הצוות ניתח נתונים מ-10 מיליון ביקורים בדפי הנחיתה ומצא קשר ברור בין Largest Contentful Paint (LCP) לבין שיעור ההמרות.
קבוצת רנו היא יצרנית רכב רב-לאומית בצרפת, עם נוכחות ביותר מ-130 מדינות. כשמדובר בקבוצת כלי רכב כמו Renault, אתרים של מותגים שמציעים ביצועים טובים יותר מעודדים יותר מעורבות של משתמשים, והמרות משמעותו יותר עסקים. כל אתרי המותג שלה נועדו לספק את חוויית המשתמש הטובה ביותר בקנה מידה רחב תוך שמירה על גמישות התוכן והתכונות לאתרים שמותאמים לשוק המקומי. בהקשר הזה, מעקב אחר ביצועים הוא מרכיב מרכזי בצוות חוויית הלקוח שאחראי על הפיתוח והתחזוקה של הפלטפורמה הגלובלית.
מדידת ההשפעה העסקית של מדדי הליבה לבדיקת חוויית המשתמש באתר
מדידה ב-Google Analytics
רנו עובדים עם 55, שותפת הנתונים הגלובלית שלה, והגדירה את ספריית Web-vitals. הספרייה מאפשרת לשלוח ל-Google Analytics את כל המדדים של מדדי חוויית המשתמש ממשתמשים אמיתיים באופן שתואם במדויק לאופן שבו הם נמדדים על ידי Chrome ומדווחים לכלים אחרים של Google.
בניתוח הבא מוצג מערך נתונים שתועד באמצעות הכלים האלה במהלך ארבעה חודשים בין דצמבר 2020 למרץ 2021.
רמת ה-LCP לאחר אופטימיזציה משפיעה מאוד על התעניינות המשתמשים ועל המדדים העסקיים.
הצוותים זיהו קשר חזק במיוחד בין שיעור ה-LCP הנמוך ביותר לבין שיעורי העזיבה ושיעורי ההמרות החיוביים.
מערך הנתונים מתעד יותר מ-10 מיליון ביקורים ב-33 מדינות במהלך ארבעה חודשים, ומראה עד כמה מדד LCP נמוך יותר מתואם עם:
- שיעורי עזיבה נמוכים יותר
- יותר המרות (טפסים להשארת פרטים שהושלמו)
מעניין לציין שמאחר שהאתר פועל כאפליקציית דף יחיד (SPA), כל הפעולות האלה מתועדות בדפי נחיתה בלבד. הנתונים מראים שכדאי לבצע אופטימיזציה של האתר עד שה-LCP יגיע פחות משנייה אחת. אתרי המותגים של הקבוצה לא יכולים לעבור אופטימיזציה רבה מדי!
מערך הנתונים הזה לא רק מציג את ההתאמה השלילית בין LCP למדדים עסקיים, אלא גם מדגיש את הפערים בביצועים של דפי הנחיתה שמניבים את הביצועים הטובים ביותר. בהקשר של האתר הזה, שימוש ב-LCP תוך פחות משנייה אחת מוביל לעלייה משמעותית בהמרות ולירידה בעזיבה מהדף הראשון.
אז'ה רקוטוארימננה (Eja Rakotoarimanana), יועץ, חמישים וחמישה
שיפור LCP אחד יכול להוביל לירידה של 14 נקודות אחוז (ppt) בשיעור העזיבה ולעלייה של 13% במספר ההמרות.
| שיפור LCP שנייה אחת | תוצאה |
|---|---|
| LCP בסביבות שנייה אחת | שיעור המרות (CVR) של +13% |
| LCP מתחת ל-1.6 שנ' | -14 ppt שיעור יציאה מדף כניסה |
| LCP מעל 1.6 שנ' | -5 ppt שיעור יציאה מדף כניסה |
הגישה של Renault לביצוע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר בקנה מידה נרחב
מתחילת 2020, ב-5 השווקים המובילים של המותג באירופה, מספר המבקרים שחוו LCP מהיר (פחות מ-2.5 שניות) השתפר בממוצע של 22ppt בדומיינים של Renault (מ-51% ל-73%).
כך הם ניגשו לזה.
אופטימיזציה מרכזית של ה-SPA
מבחינת הפלטפורמה, הביצועים היו בעדיפות גבוהה במשך שנים, וכללו את מדדי הליבה לבדיקת חוויית המשתמש באתר, מאחר שהמדדים העיקריים היו תהליך חלק. צוותים מרכזיים הגדירו פתרון מעקב מקיף (באמצעות Google Lighthouse ו-Chrome UX Report API) ובססו תרבות של ביצועים בארגון. היו מספר אסטרטגיות לביצוע אופטימיזציה של Single Page Application, כולל:
- רינדור בצד השרת (SSR) כדי להבטיח הצגת תוכן ראשוני (FCP) מהירה.
- פיצול קוד כדי לספק רק את קטעי ה-JS וה-CSS הנדרשים לדף הנחיתה (לשיפור LCP ו-FID).
- CDN עם רמה גבוהה של שמירת משאבים במטמון (כולל Lambda@Edge) למיון ולהסרה של פרמטרים מיותרים של שאילתות). כך יכולנו להימנע מהחסרונות של SSR (שיטה איטית יותר (TTDFB) בגלל חישוב שרת), ולספק תוכן קרוב יותר למשתמש הסופי (כדי לשפר את TTFB ו-LCP).
- ביצוע אופטימיזציה של דחיסה עם brotli כדי להקטין את גודל הקוד.
- HTTP2 כדי לאפשר ריבוב של בקשות ותגובות.
- משתמשים בתמונות רספונסיביות עם תמיכה ב-WebP והמאפיין
srcsetו-sizesכדי להציג למשתמשים את התמונות בגודל ובפורמט המתאימים ביותר. - טעינה מדורגת של תמונות, סרטונים ומסגרות iframe באמצעות
IntersectionObserverו-FPO (תמונות ממוזערות קטנות בגודל 1KB). - הסרת סקריפטים חוסמים והתאמת הטרנספילציה ליעדי הדפדפן כדי לצמצם את הגודל של קובצי JS (על ידי הימנעות מפולימלאים מיותרים).
- הקטנת גודל מאגר התגים של Google Tag Manager כדי לטעון סקריפטים של צד שלישי רק היכן ובמקרה הצורך.
- הפחתת מספר הגופנים המותאמים אישית, שימוש בפורמטים woff/woff2 עם טווח Unicode ו-
font-display:swapכדי להקטין את גודל הקבצים של הגופנים ולהציג טקסט בהקדם האפשרי, גם אם גופנים מותאמים אישית עדיין לא זמינים. - טעינה מראש של תמונות ראשיות, שהן בדרך כלל רכיבי LCP.
הצוות עדיין עובד על שיפורים עתידיים כמו:
- דחיפה של השרת לשיפור ה-FCP על ידי אספקת CSS מהירה יותר. (במצב המתנה כי אין תמיכה ב-AWS והצעה להוצאה משימוש.
- שתייה הדרגתית לשיפור FID.
- תמיכה במודול ES6 במטרה לספק חוויה מהירה יותר באמצעות גרסאות build של ES6 לדפדפנים מודרניים.
גישת SPA יכולה להועיל לביצועים מכיוון שאין צורך לטעון מחדש דף מלא כאשר משתמשים מנווטים בין דפים. עם זאת, המתודולוגיות הנוכחיות של מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר ב-SPA עשויות להיחשב לחסרון, כי מעברים בין נתיבים לא נמדדים. לכן, טעינות דפים מהירות יותר בהשוואה בסשן לא נלקחות בחשבון, כתוצאה משמירה במטמון של ממשק המשתמש. הוא גם מקשה להשוות את מדדי הליבה לבדיקת חוויית המשתמש באתר לעומת אתר מתחרה באפליקציה מרובת דפים, שבו מטמון חם יקטין את המדדים לגבי כל דף שהמשתמש גולש בו במהלך סשן. לקבלת מידע נוסף, מומלץ לעיין בשאלות נפוצות לגבי Web Vitals SPA.
אלו מגבלות ידועות שנחקרות על ידי צוותי המוצר של Chrome. כבר נשלח עדכון למדד CLS כדי לשפר את המדידה באפליקציות SPA.
הביצועים דורשים מעקב רציף, מאחר שצוותים טכניים שונים יכולים להשפיע עליהם. למרות המגבלות על אופן המדידה של SPA, מדדי ליבה לבדיקת חוויית המשתמש באתר מאפשרים לנו לעקוב אחרי ההשפעה של הפעולות שהצוותים שלנו מבצעים. אני מקווה שהמעברים בין המסלולים יילקחו בחשבון בקרוב!
סדרריק באזורו (Cedric Bazureau), מנהל טכני, Renault
הנחיות מקומיות בנושא אופטימיזציה של ביצועים כאחריות משותפת
הביצועים נחשפים גם כאחריות גלובלית (מרכזית) וגם כאחריות מקומית. הצוותים יצרו סדרה של שיטות מומלצות לבעלי תוכן מקומיים. הנה כמה דוגמאות מההנחיות האלו:
- אופטימיזציה של מאגר תגים מקומי של Google Tag Manager כדי לשפר את ביצועי האתר. לדוגמה, הפעלה של תגים מסוימים באופן מותנה.
- הגבילו את הגודל של תוכן הווידאו על ידי דחיסתו באמצעות כלים פנימיים או על ידי אירוחו בפלטפורמה חיצונית (כגון YouTube).
- אין להעלות תמונות באמצעות Google Tag Manager.
הבנה עמוקה של הביצועים שלנו בדיגיטל היא המפתח להבטחת אופטימיזציה מתמשכת של אתרי המותג שלנו. הגישה של צוות חוויית הלקוח היא לספק פלטפורמה גלובלית שמשפיעה לטובה על התוצאות העסקיות של הצוותים המקומיים, תוך מתן הנחיות ושיטות מומלצות לצוותים האלה כדי לשמור על רמת ביצועים גבוהה.
אלכסנדר פרוש (Alexandre Perruche), ראש מחלקת הביצועים, Renault
לסיכום, ביצועי האתר תמיד היו בעדיפות גבוהה ב-Renault, ופלטפורמת האתר שלה עוברת אופטימיזציה מתמשכת. מדידה של מדדי הליבה לבדיקת חוויית המשתמש באתר, לצד מדדים עסקיים, אפשרה לצוותים לקדם את הנושא הזה כאחריות משותפת גלובלית, וההנחיות המקומיות נותנת לצוותים את היכולת להשתתף במאמץ המועיל הזה.