ב-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 היא שירות חדש ועצמאי יחסית, והיא השתמשה בגמישות כדי להתמודד עם האתגר. אנשי החברה מאמינים שהתוצאה של המקרה לדוגמה תעזור להם לקבל בעתיד החלטות שמבוססות על נתונים יותר, ושהם יעזרו למפתחים אחרים למדוד את ההשפעה של העבודה שלהם ולשכנע את בעלי העניין שלהם ששיפור הביצועים שווה את ההשקעה. תוכלו לגלות איך הם עשו את זה בפוסט הזה.
אופטימיזציה של 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 של נכסי האתר כדי למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר ומדדים אחרים בתחום, ולשלוח את הנתונים לכלי הפנימי לניתוח נתונים.
ניתוח ביצועים
הצוות ניתח את נתוני השדות שנאספו כדי לקבוע אם יש התאמה בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין המדדים העסקיים העיקריים. הם גילו שמשתמשים שהשלימו המרה נוטים לחוות LCP טוב יותר מאשר משתמשים שלא השלימו המרה.
הנתונים שנאספו העלו גם את הפרטים הבאים:
- LCP טוב יכול להוביל לעלייה של עד 61.13% בשיעור ההמרה, 26.09% בהכנסה למבקר ו-11.26% בערך ההזמנה הממוצע.
- FID טוב יכול להוביל לעלייה של עד 55.88% בשיעור ההמרה בהשוואה לנתונים הממוצעים הכוללים.
מעקב ביצועים
הצוות בנה מרכז בקרה למעקב אחר ביצועים באמצעות הנתונים שנאספו בשטח והכלי לבינה עסקית (BI). האפשרות הזו חשובה למעקב אחרי ההתקדמות ולמניעת רגרסיות.
בדיקת A/B
הצוות מאמין שבדיקות A/B הן דרך טובה למדוד את ההשפעה העסקית של אופטימיזציות של ביצועים, ולכן הצוות ביצע אופטימיזציה של אחד מדפי הנחיתה עבור מדדי ליבה לבדיקת חוויית המשתמש באתר, ולאחר מכן ביצע בדיקת A/B בין הגרסה שעברה אופטימיזציה לבין הדף המקורי באמצעות בדיקת A/B למשך חודש. כדי שהבדיקה תניב תוצאות משמעותיות, הם בחרו בדף נחיתה שמניבים הרבה המרות ותנועה. במהלך הבדיקה, 50% מהתנועה נשלחה לדף הנחיתה שעבר אופטימיזציה (גרסה A) ו-50% נשלחו לדף המקורי (גרסה ב'). ההבדל היחיד בין גרסה א' לגרסה ב' היה שגרסה א' עברה אופטימיזציה למדדי הליבה לבדיקת חוויית המשתמש באתר, ולא היו הבדלים פונקציונליים או חזותיים אחרים.
הטעינה של גרסה A שעברה אופטימיזציה הסתיימה 0.4 שניות מוקדם יותר בבדיקת הטעינה בניידים, ולא הייתה בה שינוי משמעותי בפריסה. למעשה, מדד ה-CLS של גרסה א' השתפר ב-92.72% בהשוואה לגרסה B. גם הציונים האחרים של מדדי חוויית המשתמש באינטרנט השתפרו: ה-FID שופר ב-7.95%, FCP השתפר ב-8.45% והמדד TTFB שופר ב-18.03%.
בהשוואה בין גרסה A שעברה אופטימיזציה לגרסה B שלא עברה אופטימיזציה, Rakuten 24 מצא שגרסה A מניבה:
- עלייה של 53.37% בהכנסה לכל מבקר.
- עלייה של 33.13% בשיעור ההמרות.
- עלייה של 15.20% בערך ההזמנה הממוצע.
- עלייה של 9.99% בזמן השימוש הממוצע.
- ירידה של 35.12% בשיעור היציאה.
סיכום
אופטימיזציה של ביצועי אתרים היא מאתגרת, אבל מתגמלת. חברת Rakuten 24 נקטה גישה מבוססת-נתונים כדי לשפר את חוויית המשתמש ואת ההשפעה החיובית של החברה על העסק. מתוך הבנה שזה רק חלק מהמסע, לא היעד, הם ימשיכו לשפר את האתר כדי לספק לקונים באינטרנט חוויות מהנות יותר.
האופטימיזציה דורשת מאמץ משותף, והמפתחים לא צריכים להיות לבד במסע הזה. בשיתוף על המאבקים וההישגים שלהם, ב-Rakuten 24 מקווים שיותר מפתחים יוכלו להשתמש בנתונים מהדוח בנושא מדדי ליבה לבדיקת חוויית המשתמש באתר כדי לפתח הבנה הדדית עם בעלי העניין, ואז לעבוד יחד כדי להשיג חוויית משתמש איכותית וצמיחה עסקית.