איך חברת Ray-Ban הכפילה את שיעור ההמרות והפחיתה את שיעור העזיבה ב-13% באמצעות עיבוד מראש באמצעות Speculation Rules API

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

תאריך פרסום: 28 בינואר 2025

בניתוח המקרה הזה מתואר איך חברת Ray-Ban שיפרה את מדדי ה-LCP שלה באמצעות Speculation Rules API כדי לזרז את הניווטים העתידיים של המשתמשים באמצעות עיבוד מראש, ואיך הפעולה הזו שיפרה את הביצועים העסקיים של פלטפורמת המסחר האלקטרוני של Ray-Ban. בעקבות ההצלחה הזו, ב-Ray-Ban החליטו לבדוק אפשרויות אחרות לשיפור הביצועים, כמו הפיכת דפים לכשירים ל-bfcache.

Ray-Ban הוא מותג משקפיים אייקוני שידוע בסגנונות האופנתיים שלו, כמו Aviator ו-Wayfarer, שמשלבים עיצובים קלאסיים עם מגמות מודרניות. Ray-Ban היא אחת מהחברות המובילות בתחום משקפי השמש, וערוץ המסחר האלקטרוני שלה ממלא תפקיד קריטי בשמירה על התחרותיות של החברה, ומושך אליו יותר מ-80 מיליון מבקרים ייחודיים בשנה.

כערוץ העסקי העיקרי שלה, Ray-Ban ממשיכה לשפר את חוויית המשתמש בפלטפורמת המסחר האלקטרוני שלה, ומבינה את החשיבות של המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) ואת ההשפעה הישירה שלהם על חוויית המשתמש בפלטפורמה.

הגישה המתמשכת של Ray-Ban לשיפור חוויית המשתמש החיונית (CUJ)

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

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

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

האסטרטגיה של Ray-Ban לעיבוד מראש ספציפי למכשיר

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

במחשב, כדי לבצע עיבוד מראש, מעבירים את העכבר מעל משבצות המוצרים בדף כרטיסי המוצר (PLP) באמצעות הגדרת הנכונות "moderate", ומעבירים כבורר את הכיתה המזהה של אותן משבצות.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

מכיוון שאירוע hover לא זמין בפועל במכשירים ניידים, העיבוד מראש מתבצע באמצעות הגדרת immediate של נכונות לפעולה (eagerness) בארבעת המשבצות הראשונות, שנמצאו כמשבצות שהכי הרבה משתמשים לחצו עליהן.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

עיבוד מראש של תוצאות

לשתי האסטרטגיות לעיבוד מראש הייתה השפעה משמעותית על מדדי Core Web Vitals בדפי ה-PDP של Ray-Ban ועל המגמות של מדדי ה-KPI העסקיים.

מקור: נתונים ברמת כתובת ה-URL ב-CrUX לדפי ה-PDP של Aviator.

מכשיר	LCP			שינוי בשיעור ההמרה	שינוי בשיעור היציאה	שיעור העיבוד מראש
	לפני	אחרי	שינוי
נייד	4.69 שניות	2.66 שניות	43.28%	‎+101.47%	‎-13.25%	29%
מחשב	3.03 שניות	1.74 שניות	42.57%	‎+156.16%	‎-13.18%	50%

מדדי העסק של משתמשים שגולשים בדף ה-PDP שמוצג מהשרת הושוו למדדים של משתמשים שגולשים בדף ה-PDP שעבר רינדור מראש. אחרי איסוף נתונים ממרחב העבודה למעקב של Adobe לגבי משתמשים עם דפדפנים שתומכים ב-API (כמו Chrome), ב-Ray-Ban גילו שיפורים משמעותיים שמעידים על כך שהמשתמשים יכולים לנווט באתר בצורה חלקה יותר. בדפדפנים האחרים, שבהם אין תמיכה בעיבוד מראש, צוות Ray-Ban החליט לבצע אחסון מראש של המשאבים בזמן האירוע hover במחשב, ובארבע המשבצות הראשונות של דף ה-PLP במכשירים ניידים.

ההטמעה של Speculation Rules API לעיבוד מראש שינתה את כללי המשחק בפלטפורמת המסחר האלקטרוני של Ray-Ban. בעזרת האסטרטגיות החדשניות האלה, חברת Ray-Ban השיגה שיפור של 43% ב-LCP גם במחשב וגם בנייד, ושיפור משמעותי בחוויית המשתמש.

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

מבחינה עסקית, השיפורים היו מהפכניים, כפי שאושר בבדיקות A/B:

• שיעורי המרה גבוהים יותר:
  • שיעורי ההמרות בנייד בדפי המוצר עלו באופן משמעותי ב-101.47%.
  • שיעור ההמרות במחשבים שולחניים עלה ב-156.16%, עלייה מרשימה עוד יותר.
• שיפור מעורבות המשתמשים:
  • מספר הדפים הממוצע שנצפו בכל סשן עלה ב-51.95% בנייד וב-65.30% במחשב, דבר שמצביע על ניווט חלק יותר ועל עניין מתמשך יותר של המשתמשים. הערה: לא התייחסנו לדפים שעברו עיבוד מראש ולא הופעלו כ'צפייה'.
• שיעורי יציאה מופחתים:
  • שיעורי היציאה (% מהמשתמשים שעוזבים דף מתוך מספר הצפיות בדף הזה) ירדו ב-13.25% בנייד וב-13.18% במחשב, דבר שמצביע על שיעור שימור גבוה יותר ברגעים קריטיים של קניות.

הרחבה של התכונה כדי לספק למשתמשים יותר אפשרויות ניווט מיידיות

לאור התוצאות המצוינות שהתקבלו מהרינדור המקדים של דפי המוצרים המפורטים, ב-Ray-Ban החליטו למקסם את הפוטנציאל של Speculation Rules API על ידי רינדור מראש של קישורים לדפי המוצרים הרגילים בתפריט. הגישה הזו מאפשרת לשפר באופן משמעותי את מהירות הטעינה – וכתוצאה מכך את מדד ה-LCP – גם של סוגי דפי קטלוג וגם של סוגי דפי מוצרים.

עיבוד מראש עוזר בניווטים עתידיים, אבל ב-Ray-Ban צופים גם בחלק משמעותי של תנועה הלוך ושוב בין דף ה-PLP לדף ה-PDP. מאחר שתוצאות הניסוי של העיבוד מראש מראות בבירור שניווט מותאם של משתמשים קשור ישירות למדדים עסקיים טובים, ב-Ray-Ban בדקו גם את המטמון לדף הקודם/הבא (bfcache).

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

• השבתת האירוע unload והגבלת הגישה לממשקי ה-API של Bluetooth והאצנטרומטר של המכשיר באמצעות ערך הכותרת Permissions-Policy של unload=(), bluetooth=(), andaccelerometer=().
• סוגרים את החיבורים של RTC ו-IndexedDB באירוע pagehide.
• הימנעו משימוש מיותר בכותרת התגובה Cache-Control: no-store.

הפעלת התמיכה ב-bfcache בדפי PLP שבהם הניווט לדף הקודם/הבא היווה עד 40% מהתנועה, בזמן ששיעור ההיטים של bfcache היה 0, הביאה לשיפור של כמעט 30% ב-LCP ולשיפור של 83% ב-CLS.

מקור: נתונים ברמת כתובת ה-URL של CrUX לדף Women Sunglasses (משקפי שמש לנשים).

מדדים	2024-10-13 > 2024-11-9	2024-11-24 > 2024-12-21	דלתה
LCP	3725 אלפיות שנייה	2674 אלפיות השנייה	‎-28.21%
INP	521 אלפיות שנייה	395 אלפיות השנייה	‎-24.18%
CLS	0.46	0.08	‎-82.61%
שיעור ההיטים במטמון לדף הקודם/הבא	0.02%	72.90%	+72.87pp

סיכום

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

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

תודה מיוחדת ל-Lorenzo Bartomioli, ‏ Gilberto Cocchi, ‏ Alejandro Baeza Redondo, ‏ Barry Pollard ו-Jeremy Wagner על התרומה שלהם לעבודה הזו.