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

Yuriko Hirota

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

מאמר בנושא bfcache באתר web.dev

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

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

הסרת גורמים לחסימה של bfcache

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

1. שימוש במטפלים של unload.
2. שימוש בהוראה no-store בכותרות Cache-control.

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

כך פועלת Yahoo!‎ JAPAN News הסיר את החסימות שלו:

• החלפת גורמים שמטפלים באירועים שנטענו: הם השתמשו באירוע pagehide במקום באירוע unload, כי unload לא מהימן. Permissions-Policy: unload=() הושק ב-Chrome 115 כדי לאתרים יהיה אפשר להסיר באופן מהימן מנהלים של unload למקורות ספציפיים. אנחנו מתכננים להוציא משימוש בהדרגה את הגורמים המטפלים ב-unload.
• Changed cache-control: שינוי הכותרת Cache-control מ-no-store ‏ (CCNS) ל-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 זמין בתרשים התהליך של cache-control.

בדיקת A/B כדי להוכיח את ההשפעה

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

חוויית משתמש חלקה

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

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

1. אפשר להיכנס לרשימת המאמרים.
2. לוחצים על מאמר אחד כדי לקרוא אותו.
3. בסיום, חוזרים לרשימת המאמרים.
4. לוחצים על מאמר אחר כדי לקרוא אותו.

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

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

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

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

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

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

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

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

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

יישום bfcache עכשיו

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

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