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