מטמון לדף הקודם/הבא (או 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 היו:
- שימוש במטפלים של
unload - שימוש בהוראה
no-storeבכותרותCache-control
כדי לבדוק אילו גורמים עיקריים חוסמים את הגישה לאתר, אפשר לעבור אל כלים למפתחים ב-Chrome > אפליקציות > מטמון אחורה/קדימה (פרטים נוספים), או להשתמש ב-notRestoredReasons API כדי לקבל תצוגה מקיפה יותר של הגורמים החוסמים על סמך השימוש בפועל בשטח.
כך פועלת Yahoo! אתר JAPAN News הסיר את החסימות שלו:
- הסרת גורמים שמטפלים באירועים שנטענו: משתמשים באירוע
pagehideבמקום באירועunload, כי אירועunloadלא מהימן מאוד. בנוסף,Permissions-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.
ההשפעה של bfcache בנתונים
כדי למדוד את ההשפעה של bfcache, מערכת Yahoo! אתר JAPAN News ערך בדיקת A/B במשך שבועיים, שבה הוצגה לקבוצה אחת גרסה של הדפים עם התיקונים שלהם לשמירה במטמון לדף הקודם/הבא, ולקבוצה השנייה הוצגה גרסה עם דפים שלא מתאימים לשמירה במטמון לדף הקודם/הבא. הם בחרו את נתיבי כתובות ה-URL עם כמות משמעותית של תנועה כדי שהבדיקה תוכל להניב תוצאות משמעותיות. לא היו הבדלים חזותיים או פונקציונליים אחרים בין שתי הגרסאות.
הנה סרטון שמציג השוואה בין האתר עם bfcache לבין האתר ללא bfcache. אפשר לראות שהאתר שבו התכונה bfcache מופעלת נטען מהר יותר באופן משמעותי במהלך ניווט אחורה או קדימה.
מה שמבטיח הוא שבקבוצה שבה הופעל bfcache הייתה עלייה משמעותית במספר צפיות בדפים ובהכנסות מפרסום, במיוחד במכשירים ניידים.
בהמשך מפורטים פרטים על ההשפעה שנצפתה על ידי Yahoo!. JAPAN News עם בדיקת ה-A/B של bfcache. (מידע נוסף זמין במאמר שלהם על המחקר).
כשהניווט לאחור/קדימה בין דפים הופך מיידי באמצעות bfcache, המשתמשים נוטים להישאר בדפים למשך זמן ארוך יותר, וכך מספר הצפיות במודעות גדל, מה שמוביל להגדלת ההכנסות מפרסום.
bfcache משפר את חוויית המשתמש באתר
כשדפים נטענים באופן מיידי, הניווט מרגיש חלק יותר.
ב-Yahoo! ב-JAPAN News, אחד מהתהליכים העיקריים שעוברים המשתמשים הוא:
- מעבר לרשימת המאמרים
- לוחצים על מאמר אחד כדי לקרוא אותו.
- חזרה לרשימת המאמרים
- לוחצים על מאמר אחר כדי לקרוא אותו.
לפני bfcache, כשמשתמשים סיימו לקרוא מאמר (שלב 2), הם היו צריכים להמתין עד שדף רשימת המאמרים ייטען מחדש. זה יכול להיות גורם חיכוך למשתמשים שרוצים רק לחזור לרשימה של המאמרים כדי לבחור מאמר אחר לקריאה.
מקור בעיה נוסף במהלך ניווט לאחור היה מיקום הגלילה. בפועל, הדפדפן מנסה לשחזר את מיקום הגלילה כשמתבצע ניווט לאחור. עם זאת, בגלל מודעות שנוספו באופן דינמי או שינויים אחרים בפריסת הדף, מיקום הגלילה מתאושש לעיתים קרובות באופן שגוי, דבר שעלול לגרום למשתמשים לאבד את הכיוון או אפילו לצאת מהדף. הבעיה הזו לא מתרחשת אף פעם כשהניווט לאחור מופעל על ידי bfcache: מיקום הגלילה משוחזר באופן מיידי ובצורה נכונה.
עכשיו, בעזרת bfcache, החיכוך בתהליך השימוש של המשתמשים נעלם – המשתמשים יכולים לנווט מיד חזרה לדף רשימת המאמרים ולבחור מאמר אחר לקריאה, בלי לחכות לטעינת דף רשימת המאמרים.
אותו הדבר קורה כשמשתמשים עוברים ישירות ממאמר אחד למאמר אחר ובחזרה:
בקצרה, היתרונות של שימוש ב-bfcache ב-Yahoo! 'חדשות יפן' כוללת:
- עלייה במספר הצפיות בדפים: כשדפים שמורים במטמון באמצעות bfcache, יש סיכוי גבוה יותר שמשתמשים ינווטו באתר.
- עלייה בהכנסות: כתוצאה מעלייה במספר צפיות הדפים בכל סשן, מספר החשיפות של המודעות עלה, וכתוצאה מכך נרשמה עלייה של 9% בהכנסות בנייד בהשוואה לקבוצת הבקרה ללא bfcache.
סיכום
בקיצור, bfcache לא רק מאפשר לכם להציג את האתר באופן מיידי, אלא גם יכול לצמצם את החיכוך בחוויית המשתמש הכוללת ולהגדיל את המעורבות באתר.
צוות Chrome בוחן באופן שוטף חסימות של bfcache, במיוחד את שתי הסיבות שמפורטות במאמר הזה, כי הן הסיבות הנפוצות ביותר לכך שלא נעשה שימוש ב-bfcache. יכול להיות שבעתיד התוספים האלה לא ימנע שימוש ב-bfcache, אבל אין צורך להמתין עד אז. כדי להפיק תועלת מ-bfcache, כדאי לבדוק את החסימות של bfcache ולהימנע מהדפוסים הנפוצים האלה ומדפוסים אחרים פחות נפוצים.