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

Yuriko Hirota

מטמון לדף הקודם/הבא (או 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: no-store Cache-control: no-cache

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

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

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

אם מעניין אותך לקבל מידע נוסף על האפשרויות של Cache-control, אפשר להיעזר בתרשים הזרימה הזה.

ההשפעה של bfcache במספרים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בקצרה, היתרונות של השימוש במטמון לדף הקודם/הבא עבור Yahoo! JAPAN News כוללות:

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

סיכום

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

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