איך התכונה 'מטמון לדף הקודם/הבא' עזרה ל-Yahoo! JAPAN News הגדילה את ההכנסות ב-9% במכשירים ניידים

Yuriko Hirota

מטמון לדף הקודם/הבא (או bfcache) הוא אופטימיזציה של דפדפן שמאפשרת ניווט מיידי אחורה וקדימה. היא משפרת משמעותית את חוויית הגלישה למשתמשים, במיוחד באתרים שכוללים ניווטים רבים הלוך ושוב.
מאמר בנושא bfcache באתר web.dev

Yahoo!‎ JAPAN News, אחת מפלטפורמות החדשות הפופולריות ביותר ביפן, ניסתה לשפר את שיעור ההיטים של המטמון לדף הקודם/הבא, וכתוצאה מכך הניבה חוויית משתמש משמעותית ושיפורים עסקיים. באופן ספציפי, תוצאות בדיקת ה-A/B שהם ערכו הראו שבדפים שמשתמשים ב-bfcache הייתה עלייה של 9% בהכנסות מפרסום.

במחקר המקרה הזה נסביר איך Yahoo!‎ JAPAN News הסיר את החסימות של bfcache, ואיך bfcache שיפר באופן משמעותי את חוויית המשתמש.

הסרת חוסמים של המטמון לדף הקודם/הבא

התכונה bfcache זמינה מאז Chrome 86, והיא זמינה גם בכל הדפדפנים המודרניים. עם זאת, כדי לנצל את bfcache במלואו, צריך להסיר חסימות פוטנציאליות באתר. כמה חסימות עיקריות ש-Yahoo!‎ הבעיות שבהן נתקלה JAPAN News היו:

שימוש ב-unload handlers
שימוש בהוראה no-store בכותרות Cache-control

כדי לבדוק אילו גורמים עיקריים חוסמים את הגישה לאתר, אפשר לעבור אל כלים למפתחים ב-Chrome > אפליקציות > מטמון אחורה/קדימה (פרטים נוספים), או להשתמש ב-notRestoredReasons API כדי לקבל תצוגה מקיפה יותר של גורמים חוסמים על סמך השימוש בפועל בשטח.

כך עושים את זה ב-Yahoo! אתר JAPAN News הסיר את החסימות שלו:

הסרת גורמים שמטפלים באירועים שנטענו: מומלץ להשתמש באירוע pagehide במקום באירוע unload, כי אירוע unload לא מהימן מאוד. בנוסף, permission-policy: unload הושק ב-Chrome 115 כדי שהאתרים יוכלו להסיר באופן מהימן מנהלים של unload למקורות ספציפיים. בנוסף, אנחנו מתכננים ב-Chrome להוציא משימוש בהדרגה את הטיפולים של unload.
Cache-control: no-store (או CCNS בקיצור): שינוי הכותרת Cache-control מ-no-store ל-no-cache יכול להפעיל את bfcache. בנוסף, אנחנו מתכננים להתחיל ב-Chrome אחסון במטמון ל-bfcache גם עם כותרת no-store בנסיבות מסוימות.

הכותרת CCNS מיועדת לדפים שאסור לשמור במטמון בשום מצב. עם זאת, חשוב לזכור שכל דף עם כותרת CCNS לא יוכל ליהנות מטכנולוגיית מטמון כלשהי, כולל שרתים קצה של CDN ומטמון מקומי.

אם יש לכם כותרת CCNS, זו הזדמנות מצוינת לדון באסטרטגיות Cache-control המתאימות לאתר שלכם. ריכזנו כאן את ההבדלים העיקריים בין no-store לבין no-cache.

Cache-control: no-store Cache-control: no-cache

`Cache-control: no-store`	`Cache-control: no-cache`
אסור לשמור את התשובה במטמון. כתוצאה מכך, התגובה אוחזר במלואה בכל בקשה. כדאי להשתמש באפשרות הזו לתשובות פרטיות.	התגובה מותרת לשמירה במטמון כל עוד היא מאומתת מחדש מול השרת לפני כל שימוש. אלה צריכות להיות תשובות ציבוריות שרוצים לאמת מחדש בכל פעם (לדוגמה, דף הבית של אתר חדשות – אבל גם במקרה כזה, זמן קצר מאוד לשמירת נתונים במטמון יכול לשפר את הביצועים ולפנות מקום בשרתים הראשיים).

אסור לשמור את התשובה במטמון.
כתוצאה מכך, התגובה אוחזר במלואה בכל בקשה.
כדאי להשתמש באפשרות הזו לתשובות פרטיות.

התגובה מותרת לשמירה במטמון כל עוד היא מאומתת מחדש מול השרת לפני כל שימוש.
אלה צריכות להיות תשובות ציבוריות שרוצים לאמת מחדש בכל פעם (לדוגמה, דף הבית של אתר חדשות – אבל גם במקרה כזה, זמן קצר מאוד לשמירת נתונים במטמון יכול לשפר את הביצועים ולפנות מקום בשרתים הראשיים).

תרשים התהליך הזה יעזור לך להבין טוב יותר את האפשרויות של Cache-control.

ההשפעה של bfcache בנתונים

כדי למדוד את ההשפעה של bfcache, מערכת אתר JAPAN News ערך בדיקת A/B במשך שבועיים, שבה הוצגה לקבוצה אחת גרסה של הדפים עם התיקונים שלהם לשמירה במטמון לדף הקודם/הבא, ולקבוצה השנייה הוצגה גרסה עם דפים שלא מתאימים לשמירה במטמון לדף הקודם/הבא. הם בחרו את נתיבי כתובות ה-URL עם כמות משמעותית של תנועה כדי שהבדיקה תוכל להניב תוצאות משמעותיות. לא היו הבדלים חזותיים או פונקציונליים אחרים בין שתי הגרסאות.

הנה סרטון שמציג השוואה בין האתר עם bfcache לבין האתר ללא bfcache. אפשר לראות שהאתר שבו התכונה bfcache מופעלת נטען מהר יותר באופן משמעותי במהלך ניווט אחורה או קדימה.

מה שמבטיח הוא שבקבוצה שבה הופעל bfcache הייתה עלייה משמעותית במספר צפיות בדפים ובהכנסות מפרסום, במיוחד במכשירים ניידים.

בהמשך מפורטים פרטים על ההשפעה שנצפתה על ידי Yahoo!‎. JAPAN News עם בדיקת ה-A/B של bfcache. (מידע נוסף זמין במאמר שלהם על המחקר).

מדדים	עלייה באחוזים (נייד)	עלייה באחוזים (מחשב)
שיעור ההיטים ב-bfcache	+54.03 נקודות (0.04% ← 54.07%)	עלייה של 47.28 נקודות (0.02% → 47.30%)
צפיות בדף	עלייה של 2.26%	+0.65%
הכנסות מפרסום	+9.0%	+0.6%

כשהניווט לאחור/קדימה בין דפים הופך מיידי באמצעות bfcache, המשתמשים נוטים להישאר בדפים למשך זמן ארוך יותר, וכך מספר הצפיות במודעות גדל, מה שמוביל להגדלת ההכנסות מפרסום.

bfcache משפר את חוויית המשתמש באתר

כשהדפים נטענים מיד, הניווט נראה חלק יותר.

ב-Yahoo!‎ JAPAN News, אחד התהליכים העיקריים שעוברים המשתמשים הוא:

מעבר לרשימת המאמרים
לוחצים על מאמר אחד כדי לקרוא אותו.
חזרה לרשימת המאמרים
אפשר ללחוץ על מאמר אחר כדי לקרוא

לפני bfcache, כשמשתמשים סיימו לקרוא מאמר (שלב 2), הם היו צריכים להמתין עד שדף רשימת המאמרים ייטען מחדש. זה עשוי להקשות על משתמשים שרוצים לחזור לרשימת המאמרים ולבחור מאמר אחר לקריאה.

מקור בעיה נוסף במהלך ניווט לאחור היה מיקום הגלילה. בפועל, הדפדפן מנסה לשחזר את מיקום הגלילה כשמתבצע ניווט לאחור. עם זאת, בגלל מודעות שנוספו באופן דינמי או שינויים אחרים בפריסה, מיקום הגלילה מתאושש לעיתים קרובות באופן שגוי, מה שעלול לגרום למשתמשים לאבד את הכיוון או אפילו לצאת מהדף. הבעיה הזו לא מתרחשת אף פעם כשהניווט לאחור מופעל על ידי bfcache: מיקום הגלילה משוחזר באופן מיידי ובצורה נכונה.

שתי רצועות סרטים של ניווט אחורה מכתבה אל דף רשימת המאמרים. בחלק העליון מוצגת רצף תמונות של התהליך שמטופל באמצעות bfcache, והוא נמשך 0.3 שניות. בחלק התחתון מוצג אותו תהליך שמטופל ללא bfcache, והוא נמשך 3.3 שניות.

עכשיו, עם bfcache, החיכוך בתהליך השימוש של המשתמשים נעלם – המשתמשים יכולים לנווט מיד חזרה לדף רשימת המאמרים ולבחור מאמר אחר לקריאה, בלי לחכות לטעינת דף רשימת המאמרים.

אותו הדבר קורה כשמשתמשים עוברים ישירות ממאמר אחד למאמר אחר ובחזרה:

תמונה מונפשת שמראה את תהליך הניווט לאחור מכתבה לדף רשימת הכתבות, עם bfcache וגם בלי bfcache. כשמשתמשים ב-bfcache, הניווט לאחור הוא לא רק מהיר יותר, אלא גם מיקום הגלילה נשמר בצורה מדויקת. בלי bfcache, אי אפשר להבטיח את הדברים האלה.

בקצרה, היתרונות של שימוש ב-bfcache ב-Yahoo!‎ 'חדשות יפן' כוללת:

עלייה בצפיות בדף: הייתה סבירות גבוהה יותר שמשתמשים יעברו בתוך האתר כשדפים נשמרו במטמון לדף הקודם/הבא.
עלייה בהכנסות: כתוצאה מעלייה במספר צפיות בדף לכל סשן, מספר החשיפות של המודעות עלה, וכתוצאה מכך נרשמה עלייה של 9% בהכנסות בנייד בהשוואה לקבוצת הבקרה ללא bfcache.

סיכום

בקיצור, bfcache לא רק מאפשר לכם להציג את האתר באופן מיידי, אלא גם יכול לצמצם את החיכוך בחוויית המשתמש הכוללת ולהגדיל את ההתעניינות באתר.

צוות Chrome בוחן באופן שוטף חסימות של bfcache, במיוחד את שתי הסיבות שמפורטות במאמר הזה, כי הן הסיבות הנפוצות ביותר לכך שלא נעשה שימוש ב-bfcache. יכול להיות שבעתיד התוספים האלה לא ימנע שימוש ב-bfcache, אבל אין צורך להמתין עד אז. כדי להפיק תועלת מ-bfcache, כדאי לבדוק את החסימות של bfcache ולהימנע מהדפוסים הנפוצים האלה ומדפוסים אחרים פחות נפוצים.