מטמון לדף הקודם/הבא (או bfcache) הוא אופטימיזציה של דפדפן שמאפשרת ניווט מיידי אחורה וקדימה. הם משפרים משמעותית את חוויית הגלישה של המשתמשים, במיוחד באתרים שכוללים הרבה ניווטים הלוך ושוב.
מאמר בנושא web.dev בנושא bfcache
מזהה העסק JAPAN News, אחת מפלטפורמות החדשות הפופולריות ביותר ביפן, השיגה מאמץ מרוכז לשפר את שיעור ההיטים של bfcache. באופן ספציפי, התוצאות של בדיקת A/B הראו שדפים שנעשה בהם שימוש במטמון לדף הקודם/הבא הניבו עלייה של 9% בהכנסות מפרסום.
מקרה לדוגמה זה יסביר כיצד Yahoo! JAPAN News הסירה את החסימות של המטמון לדף הקודם/הבא, ואיך bfcache שיפר באופן משמעותי את חוויית המשתמש.
הסרת חסימות למטמון לדף הקודם/הבא
המטמון לדף הקודם/הבא זמין החל מ-Chrome 86, וזמין גם בכל הדפדפנים המודרניים. עם זאת, כדי לנצל את מלוא היתרונות של המטמון לדף הקודם/הבא, יש להסיר חסימות פוטנציאליות מהאתר. כמה מהחסימות העיקריות של Yahoo! ביחס ל-Yahoo! JAPAN News:
- השימוש ב-
unload
handlers - שימוש בהוראה
no-store
בכותרותCache-control
כדי לבדוק אילו חסימות עיקריות יש באתר, אפשר לעבור אל כלי הפיתוח של Chrome > אפליקציות > מטמון לדף הקודם/הבא (פרטים נוספים), או להשתמש בממשק ה-API של notRestoredReasons
כדי לקבל תמונה מקיפה יותר של החסימות על סמך השימוש בפועל בשדה.
כך Yahoo! JAPAN News הסיר/ה את החסימות:
- הסרת רכיבי ה-handler של האפליקציות שנטענו: צריך להשתמש באירוע
pagehide
במקום באירועunload
, כי האירועunload
מאוד לא מהימן. כמו כן,permission-policy: unload
הושק ב-Chrome 115 כדי לאפשר לאתרים להסיר באופן מהימן רכיבי handler שלunload
למקורות ספציפיים. בנוסף, אנחנו ב-Chrome מתכננים להוציא משימוש בהדרגה את ה-handlers שלunload
. Cache-control: no-store
(או בקיצור CCNS): שינוי הכותרתCache-control
מ-no-store
ל-no-cache
יכול להפעיל שמירה במטמון לדף הקודם/הבא. בנוסף, אנחנו ב-Chrome מתכננים להתחיל לשמור במטמון לדף הקודם/הבא, גם עם כותרתno-store
בנסיבות מסוימות.
CCNS מיועד לדפים שאין לשמור במטמון בשום מקרה. מתווספת אזהרה שלפיה כל דף עם CCNS לא יוכל להפיק תועלת מטכנולוגיית שמירה במטמון, כולל שרתי קצה של CDN ומטמון מקומי.
אם יש לך כותרת CCNS, זו הזדמנות מצוינת לדון בשיטות Cache-control
שמתאימות לאתר שלך. אלה ההבדלים העיקריים בין no-store
לבין no-cache
.
אם מעניין אותך לקבל מידע נוסף על האפשרויות של Cache-control
, אפשר להיעזר בתרשים הזרימה הזה.
ההשפעה של bfcache במספרים
כדי למדוד את ההשפעה של bfcache, JAPAN News ביצעו בדיקת A/B במשך שבועיים, שבה הם הציגה לקבוצה אחת גרסה של הדפים שלהם עם תיקוני מטמון לדף הקודם/הבא, וגרסה עם דפים שלא עומדים בדרישות לשמירה במטמון לדף הקודם/הבא. כדי שהבדיקה תוכל להניב תוצאות משמעותיות, היא בחרה בנתיבי כתובות ה-URL שמושכים הרבה תנועה. לא היה הבדל חזותי או פונקציונלי אחר בין שתי הגרסאות.
כאן מופיע סרטון שמשווה בין האתר לדף הבא במטמון לדף הקודם/הבא וללא מטמון לדף הקודם/הבא. אתם יכולים לראות שהאתר שהופעל בו התכונה 'מטמון לדף הקודם' נטען הרבה יותר מהר במהלך ניווט אחורה או קדימה.
מה שאפשר להבטיח באמת הוא שהקבוצה שבה הופעל מטמון לדף הקודם/הבא נהנתה מעלייה משמעותית בצפיות בדפים ובהכנסות ממודעות, במיוחד בניידים.
הנה פרטים לגבי ההשפעה שנצפתה על ידי Yahoo! JAPAN News עם בדיקת ה-A/B ששמורה במטמון bfcache. (מידע נוסף תוכלו לקרוא במאמר על המקרה לדוגמה).
כשמעברים בין דפים לדף הקודם/הבא הופכים באופן מיידי למטמון לדף הקודם/הבא, המשתמשים נוטים להישאר בדפים ארוכים יותר, וכך מגדילים את מספר הצפיות במודעות, מה שמוביל לעלייה בהכנסות מפרסום.
המטמון לדף הקודם/הבא משפר את חוויית המשתמש באתר
כשדפים נטענים באופן מיידי, הניווט נראה חלק יותר.
דרך חשבון Yahoo! JAPAN News, אחד מהתהליכים העיקריים שעובר המשתמש:
- לרשימת המאמרים
- יש ללחוץ על מאמר כדי לקרוא אותו
- חזרה לרשימת המאמרים
- לחץ על מאמר אחר כדי לקרוא אותו
לפני bfcache, כשמשתמשים סיימו לקרוא מאמר (שלב 2), הם נאלצו להמתין לטעינה חוזרת של דף רשימת המאמרים. הדבר עשוי להקשות על משתמשים שרוצים רק לחזור לרשימת המאמרים כדי לקרוא מאמר אחר.
מקור נוסף לחיכוך במהלך הניווט לאחור היה מיקום הגלילה. בפועל, הדפדפן מנסה לשחזר את מיקום הגלילה כשמתרחשת ניווט לאחור. עם זאת, עקב מודעות שנוספות באופן דינמי או שינויים אחרים בפריסה, מיקום הגלילה לעיתים קרובות משוחזר באופן שגוי, וכתוצאה מכך המשתמשים עלולים לאבד את הנקודה או אפילו לעזוב את הדף. הבעיה הזו אף פעם לא קיימת כשהניווט לאחור מופעל על ידי מטמון לדף הקודם/הבא: מיקום הגלילה משוחזר באופן מיידי ונכון.
עכשיו, עם המטמון לדף הקודם/הבא, החיכוך בתהליך שעובר המשתמש נעלם – המשתמשים יכולים לחזור מיד לדף רשימת המאמרים ולבחור מאמר אחר לקריאה, בלי להמתין לטעינה של דף רשימת המאמרים.
אותו דבר קורה כאשר משתמשים גולשים ממאמר אחד ישירות לאחרת ובחזרה:
בקצרה, היתרונות של השימוש במטמון לדף הקודם/הבא עבור Yahoo! JAPAN News כוללות:
- עלייה במספר הצפיות בדפים: משתמשים נטו יותר לנווט באתר כשהדפים נשמרו במטמון עם המטמון לדף הקודם/הבא.
- עלייה בהכנסה: כתוצאה מעלייה במספר הצפיות בדפים לכל סשן, עלתה החשיפה של מודעות. התוצאה היא עלייה של 9% בהכנסות בנייד בהשוואה לקבוצת הבדיקה שלא כללה שמירה במטמון לדף הקודם/הבא.
סיכום
לסיכום, bfcache לא רק הופך את האתר שלכם למיידי, אלא גם יכול להפחית את הקשיים הכולל בחוויית המשתמש ולהגביר את המעורבות באתר שלכם.
צוות Chrome בודק כל הזמן חוסמי bfcache – בייחוד את שתי הסיבות שמפורטות במאמר הזה, כי הן סיבות נפוצות שלא נעשה בהן שימוש במטמון לדף הקודם/הבא. בעתיד, יכול להיות שהן לא ימנעו שימוש במטמון לדף הקודם/הבא, אבל אין צורך להמתין עד אז. כדי להפיק תועלת ממטמון לדף הקודם/הבא, בוחנים את החסימות של מטמון לדף הקודם/הבא ונמנעים מהדפוסים הנפוצים האלה ואחרים פחות נפוצים.