אופטימיזציה של CLS ב-0.2 הובילה לעלייה של 15% בצפיות בדפים לכל סשן, משכי סשנים ארוכים יותר ב-13% וירידה של 1.72 נקודות אחוז בשיעור העזיבה.
Yahoo! JAPAN היא אחת מחברות המדיה הגדולות ביפן, ומספקת יותר מ-79 מיליארד צפיות בדפים בחודש. פלטפורמת החדשות של החברה, Yahoo! JAPAN News – עם יותר מ-22 מיליארד צפיות בדפים בחודש, וצוות הנדסה שמתמקד בשיפור חוויית המשתמש.
על ידי מעקב רציף אחר מדדי הליבה לבדיקת חוויית המשתמש באתר, הם הבחינו בין ציון Cumulative Layout Shift (CLS) המשופר של האתר לבין עלייה של 15% במספר הצפיות בדף בכל סשן ועלייה של 13% במשך הסשן.
0.2
שיפור ב-CLS
15.1%
יותר צפיות בדף בכל סשן
13.3%
משך סשן ארוך יותר
תוכן בדף שזז ממקום למקום באופן בלתי צפוי גורם לעיתים קרובות לקליקים מקריים, לבלבול בדף ובסופו של דבר לתסכול המשתמשים. משתמשים מתוסכלים נוטים לא להישאר במקום זמן רב. כדי שהמשתמשים יהיו מרוצים, פריסת הדפים צריכה להישאר יציבה לאורך כל מחזור החיים של המשתמש. לגבי Yahoo! ביפן לשיפור הזה הייתה השפעה חיובית משמעותית על מדדים של מעורבות קריטית בעסק.
לפרטים טכניים על האופן שבו הם שיפרו את ה-CLS, ראו Yahoo! JAPAN News.
זיהוי הבעיה
חשוב לעקוב אחר מדדי הליבה לבדיקת חוויית המשתמש באתר, כולל CLS, כדי לזהות בעיות ולזהות מאיפה הן מגיעות. ב-Yahoo! ב-Search Console ניתנה סקירה כללית נהדרת על קבוצות דפים עם בעיות בביצועים, ובעזרת Lighthouse אפשר לזהות הזדמנויות לשיפור חוויית השימוש בכל דף. בעזרת הכלים האלה, הם גילו שערך ה-CLS של דף פרטי הכתבה היה נמוך.
חשוב לזכור את החלק המצטבר של ה-Cumulative Layout Shift - הציון מתועד במהלך כל מחזור החיים של הדף. במציאות, הציון יכול לכלול תזוזות שמתרחשות כתוצאה מאינטראקציות עם משתמשים כמו גלילה בדף או הקשה על לחצן. כדי לאסוף תוצאות CLS מנתוני השטח, הצוות שילב את הדיווח בספריית Web-vitals של JavaScript.
הצוות השתמש בכלי הפיתוח ל-Chrome כדי לזהות באילו רכיבים בוצעו שינויים בפריסה בדף. החלק Layout Shift Regions בכלי הפיתוח מציג רכיבים חזותיים שתורמים ל-CLS על ידי הדגשה שלהם באמצעות מלבן כחול בכל פעם שיש שינוי פריסה.
הם הבינו שיש שינוי בפריסה אחרי שהתמונה הראשית (Hero) שבראש הכתבה נטענה לצפייה הראשונה.
בדוגמה שלמעלה, כשהטעינה של התמונה מסתיימת, הטקסט יידחף למטה (שינוי המיקום מצוין באמצעות הקו האדום).
שיפור ה-CLS של תמונות
אם רוצים למנוע תנודות בפריסה של תמונות בגודל קבוע, אפשר לציין את המאפיינים width ו-height ברכיב img ולהשתמש במאפיין ה-CSS aspect-ratio שזמין בדפדפנים מודרניים. עם זאת, Yahoo! JAPAN News צריכים לתמוך לא רק בדפדפנים מודרניים, אלא גם בדפדפנים שמותקנים במערכות הפעלה ישנות יחסית, כמו iOS 9.
הם השתמשו ב-Aspect Ratio Box — שיטה שמשתמשת בסימון כדי לשמור את המקום בדף לפני טעינת התמונה. כדי להשתמש בשיטה הזו, צריך לדעת מראש מהו יחס הגובה-רוחב של התמונה, שאותו ניתן היה לקבל מה-API לקצה העורפי.
תוצאות
מספר כתובות ה-URL עם ביצועים נמוכים ב-Search Console ירד ב-98%, ו-CLS בנתוני שיעור ה-Lab ירד מ-0.2 ל-0. וחשוב יותר, היו כמה שיפורים תואמים במדדים העסקיים.
כאשר חשבון Yahoo! ב-JAPAN News השוואה בין מדדי התעניינות של משתמשים לפני ואחרי האופטימיזציה של CLS, המדדים דיווחו על מספר שיפורים:
15.1%
יותר צפיות בדף בכל סשן
13.3%
משך סשן ארוך יותר
1.72%*
שיעור עזיבה נמוך יותר (*נקודות באחוזים)
על ידי שיפור ה-CLS ומדדים אחרים של מדדי ליבה לבדיקת חוויית המשתמש באתר, Yahoo! JAPAN News קיבלו גם את התווית 'דף מהיר' בתפריט ההקשר של Chrome Android.
שינויים בפריסה הם מתסכלים ולא מעודדים משתמשים לקרוא יותר דפים, אבל אפשר לשפר אותם באמצעות כלים מתאימים, זיהוי בעיות ויישום שיטות מומלצות. שיפור ה-CLS יכול לשפר את העסק שלך.
למידע נוסף, קראו את Yahoo! הפוסט של צוות המהנדסים של JAPAN.