ב-Rakuten 24 מדדו משתמשים אמיתיים בדוח מדדי חוויית המשתמש באתר, ומצאו שמדד LCP באיכות טובה יכול להוביל לעלייה של 61.13% בשיעור ההמרה.
Rakuten 24 היא חנות וירטואלית שפועלת בשיתוף פעולה עם יצרנים גדולים של מוצרי צריכה מקומיים ורב-לאומיים כדי להציע מגוון רחב של מוצרים יומיומיים, כולל שירותי בריאות, משקאות, מוצרים לחיות מחמד, מוצרים לתינוקות ועוד. החנות הזו מסופקת על ידי Rakuten Group, Inc. , חברה גלובלית מובילה בתחום שירותי האינטרנט, והיא בין השחקניות המובילות בפלטפורמת שוק דיגיטלי ביפן.
כדי להבין את ההשפעה של ביצועי האתר על חוויית המשתמש, הצוות של Rakuten 24 ממשיך למדוד, לבצע אופטימיזציה ולעקוב אחר מדדי הליבה לבדיקת חוויית המשתמש באתר, כמו גם מדדים אחרים.
כתוצאה מכך, יותר מ-75% מהמשתמשים שלהם נהנים מהצגת תוכן באיכות הגבוהה ביותר (LCP), השהיה לאחר קלט ראשוני (FID) והצגת תוכן ראשוני (FCP) בצורה טובה. עם זאת, הם עדיין עובדים על שיפורים ב-Cumulative Layout Shift (CLS).
אחרי ניתוח הנתונים של דף הבית, ב-Rakuten 24 מצאו שציון LCP טוב יכול להוביל ל:
- עלייה של עד 61.13% בשיעור ההמרות.
- הכנסה של 26.09% למבקר.
- 11.26% בערך ההזמנה הממוצע.
- ציון FID טוב יכול להוביל לעלייה של עד 55.88% בשיעור ההמרה.
כדי לקשר עוד יותר בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין מדדים עסקיים, ב-Rakuten 24 בוצעה גם בדיקת A/B שהתמקדה באופטימיזציה של מדדי ליבה לבדיקת חוויית המשתמש באתר ושל מדדים קשורים, ובמצב כזה זוהה שיפור:
- 53.37% בהכנסה לכל מבקר.
- 33.13% בשיעור ההמרות.
- 15.20% בערך ההזמנה הממוצע.
- 9.99% מזמן השימוש הממוצע.
- ירידה של 35.12% בשיעור היציאה.
מדגישים את ההזדמנות
אופטימיזציה של ביצועי אתרים היא השקעה חכמה לשיפור חוויית המשתמש ולצמיחה העסקית, אבל הצוות של Rakuten 24 מבין עד כמה קשה לשכנע בעלי עניין לאמץ את מדדי הליבה לבדיקת חוויית המשתמש באתר ולהתמקד בביצועים באינטרנט. הם מאמינים שהדרך הטובה ביותר לעזור לבעלי העניין היא להראות לבעלי עניין מהו ההחזר המדויק על ההשקעה (החזר ROI) שלהם.
Rakuten 24 היא שירות חדש ועצמאי יחסית, והיא השתמשה בגמישות כדי להתמודד עם האתגר. אנשי החברה מאמינים שהתוצאה של המקרה לדוגמה תעזור להם לקבל בעתיד החלטות שמבוססות על נתונים יותר, ושהם יעזרו למפתחים אחרים למדוד את ההשפעה של העבודה שלהם ולשכנע את בעלי העניין שלהם ששיפור הביצועים שווה את ההשקעה. תוכלו לגלות איך הם עשו את זה בפוסט הזה.
![דוגמאות של צילומי מסך של דף הבית של Rakuten 24, עם פריימים של מכשירים ניידים מסביב לכל צילום מסך.](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=3&hl=he)
אופטימיזציה של JavaScript ומשאבים
- יש להימנע ממשאבים שחוסמים עיבוד.
- מפצלים את הקוד ומשתמשים ב
import()
דינמי. - פיצול כל התוכן לחלקים נפרדים וטעינה מדורגת של קובצי HTML בחלק הנגלל.
- הפעלה וטעינה של JavaScript לפי דרישה.
- זיהוי משאבי JavaScript איטיים ואופטימיזציה של תהליך הטעינה באמצעות המאפיין האסינכרוני בתגי
<script>
ויצירת חיבורים מוקדמים למקורות חשובים (רמזים למשאבים כמוdns-prefetch
,preconnect
ו-preload
). - מסירים קוד שלא נמצא בשימוש ומקטינים ודחוס את הקוד.
- משתמשים ב-CDN.
- שליטה בשמירה במטמון באמצעות Service Worker עם Workbox.
לבצע אופטימיזציה של תמונות
- טעינה מושהית של תמונות בחלק הנגלל.
- אופטימיזציה של תמונות באמצעות CDN, הצגת תמונות בגודל מתאים, דחיסת תמונות ושימוש בפורמטים של תמונות שמתאימים למשימה (WebP, SVG, Web Fonts).
אופטימיזציה של ה-CLS
- שימוש ב-CSS
aspect-ratio
מאפשר לכם לשריין את המקום הדרוש לתמונות בזמן שהתמונות נטענות. - כדאי להשתמש ב-CSS
min-height
כדי לצמצם את השינויים בפריסה בזמן שהאלמנטים נטענים באופן הדרגתי.
מדידת ביצועים
מלבד השימוש ב-PageSpeed Insights כדי לבדוק את האתר, הצוות רצה למצוא דרך טובה יותר לדעת מה המשתמשים בפועל בשטח. לכן, הצוות ב-Rakuten 24 החליטה להשתמש בספריית ה-JavaScript של נכסי האתר כדי למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר ומדדים אחרים בתחום, ולשלוח את הנתונים לכלי הפנימי לניתוח נתונים.
![תהליך השילוב של מעקב אחר תפקוד האפליקציה ב-Rakuten 24. השלב הראשון הוא לשלב את ספריית האתרים האלה על ידי הוספת הסקריפט לאתר Rakuten 24. לאחר מכן, יהיה אפשר למדוד את תפקוד האפליקציה לפי מדדים אמיתיים של משתמשים, והנתונים יישלחו אל הכלי הפנימי של Rakuten 24 לאיסוף נתונים.](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=3&hl=he)
ניתוח ביצועים
הצוות ניתח את נתוני השדות שנאספו כדי לקבוע אם יש התאמה בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין המדדים העסקיים העיקריים. הם גילו שמשתמשים שהשלימו המרה נוטים לחוות LCP טוב יותר מאשר משתמשים שלא השלימו המרה.
![השוואה בין משתמשים שהשלימו המרה לבין משתמשים שלא ביצעו המרה באמצעות LCP. בקבוצת המשתמשים שביצעו המרה לעיתים קרובות יותר היה מדד LCP נמוך יותר.](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=3&hl=he)
הנתונים שנאספו העלו גם את הפרטים הבאים:
- LCP טוב יכול להוביל לעלייה של עד 61.13% בשיעור ההמרה, 26.09% בהכנסה למבקר ו-11.26% בערך ההזמנה הממוצע.
- FID טוב יכול להוביל לעלייה של עד 55.88% בשיעור ההמרה בהשוואה לנתונים הממוצעים הכוללים.
![ה-LCP מסווג לפי שיעור המרה וזמן LCP. משתמשים שביצעו המרה בתדירות גבוהה יותר כשנתוני ה-LCP היו נמוכים יותר, כש-61.13% מהמשתמשים השלימו המרה עם LCP של שנייה אחת או פחות.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=3&hl=he)
![מדד LCP בחלוקה לפי הכנסה לכל מבקר וזמן LCP. משתמשים עם רמת LCP נמוכה יותר סיפקו יותר הכנסה, ועלייה של 26.09% בהכנסה לכל משתמש, כשנתוני ה-LCP היו בשנייה אחת או פחות.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=3&hl=he)
![נתוני LCP מקובצים לפי ערך הזמנה ממוצע וזמן LCP. אצל משתמשים עם רמת LCP נמוכה יותר, ערך ההזמנה הממוצע היה גבוה ב-11.26% כשהמדד 'LCP' היה שנייה אחת או פחות.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=3&hl=he)
![נתוני FID המחולקים לפי שיעור המרה וזמן FID. משתמשים שביצעו המרה בתדירות גבוהה יותר כשה-FID היה נמוך יותר, כאשר 55.88% מהמשתמשים ביצעו המרה עם FID של 50 אלפיות השנייה או פחות.](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=3&hl=he)
מעקב ביצועים
הצוות בנה מרכז בקרה למעקב אחר ביצועים באמצעות הנתונים שנאספו בשטח והכלי לבינה עסקית (BI). האפשרות הזו חשובה למעקב אחרי ההתקדמות ולמניעת רגרסיות.
![צילום מסך של מרכז הבקרה הפנימי למעקב אחר הביצועים ב-Rakuten 24 של כל אחד מהמדדי הליבה לבדיקת חוויית המשתמש באתר (LCP, CLS ו-FID).](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=3&hl=he)
בדיקת A/B
הצוות מאמין שבדיקות A/B הן דרך טובה למדוד את ההשפעה העסקית של אופטימיזציות של ביצועים, ולכן הצוות ביצע אופטימיזציה של אחד מדפי הנחיתה עבור מדדי ליבה לבדיקת חוויית המשתמש באתר, ולאחר מכן ביצע בדיקת A/B בין הגרסה שעברה אופטימיזציה לבין הדף המקורי באמצעות בדיקת A/B למשך חודש. כדי שהבדיקה תניב תוצאות משמעותיות, הם בחרו בדף נחיתה שמניבים הרבה המרות ותנועה. במהלך הבדיקה, 50% מהתנועה נשלחה לדף הנחיתה שעבר אופטימיזציה (גרסה A) ו-50% נשלחו לדף המקורי (גרסה ב'). ההבדל היחיד בין גרסה א' לגרסה ב' היה שגרסה א' עברה אופטימיזציה למדדי הליבה לבדיקת חוויית המשתמש באתר, ולא היו הבדלים פונקציונליים או חזותיים אחרים.
![צילום מסך של בדיקת A/B לנייד באתר Rakuten 24. לכל גרסה הייתה גרסה זהה מבחינה חזותית והפונקציונליות שלה, וגרסה A עברה אופטימיזציה כדי לשפר את מדדי הליבה לבדיקת חוויית המשתמש באתר.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=3&hl=he)
הטעינה של גרסה A שעברה אופטימיזציה הסתיימה 0.4 שניות מוקדם יותר בבדיקת הטעינה בניידים, ולא הייתה בה שינוי משמעותי בפריסה. למעשה, מדד ה-CLS של גרסה א' השתפר ב-92.72% בהשוואה לגרסה B. גם הציונים האחרים של מדדי חוויית המשתמש באינטרנט השתפרו: ה-FID שופר ב-7.95%, FCP השתפר ב-8.45% והמדד TTFB שופר ב-18.03%.
![השוואת סטארט-אפ של דף הבית של Rakuten 24. גרסה א' עברה אופטימיזציה לטעינה טובה יותר תוך 1.6 שניות, בהשוואה לגרסה ב', שנטענה תוך 2 שניות.](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=3&hl=he)
בהשוואה בין גרסה A שעברה אופטימיזציה לגרסה B שלא עברה אופטימיזציה, Rakuten 24 מצא שגרסה A מניבה:
- עלייה של 53.37% בהכנסה לכל מבקר.
- עלייה של 33.13% בשיעור ההמרות.
- עלייה של 15.20% בערך ההזמנה הממוצע.
- עלייה של 9.99% בזמן השימוש הממוצע.
- ירידה של 35.12% בשיעור היציאה.
![צילום מסך של השיפורים במדדי הליבה לבדיקת חוויית המשתמש באתר של דף הבית של Rakuten 24. הנתונים הסטטיסטיים כוללים עלייה של 53.37% בהכנסה למבקר, עלייה של 33.13% בשיעור ההמרה, עלייה של 15.2% בערך ההזמנה הממוצע, עלייה של 9.99% בזמן השהייה הממוצע בדפים וירידה של 35.12% בשיעור היציאה.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=3&hl=he)
סיכום
אופטימיזציה של ביצועי אתרים היא מאתגרת, אבל מתגמלת. חברת Rakuten 24 נקטה גישה מבוססת-נתונים כדי לשפר את חוויית המשתמש ואת ההשפעה החיובית של החברה על העסק. מתוך הבנה שזה רק חלק מהמסע, לא היעד, הם ימשיכו לשפר את האתר כדי לספק לקונים באינטרנט חוויות מהנות יותר.
האופטימיזציה דורשת מאמץ משותף, והמפתחים לא צריכים להיות לבד במסע הזה. בשיתוף על המאבקים וההישגים שלהם, ב-Rakuten 24 מקווים שיותר מפתחים יוכלו להשתמש בנתונים מהדוח בנושא מדדי ליבה לבדיקת חוויית המשתמש באתר כדי לפתח הבנה הדדית עם בעלי העניין, ואז לעבוד יחד כדי להשיג חוויית משתמש איכותית וצמיחה עסקית.