איך האופטימיזציה של CLS הגבירה את נתוני Yahoo! צפיות בדפים של JAPAN News בכל סשן ב-15%

אופטימיזציה של CLS ב-0.2 הובילה לעלייה של 15% בצפיות בדפים לכל סשן, משכי סשנים ארוכים יותר ב-13% וירידה של 1.72 נקודות אחוז בשיעור העזיבה.

Tomoki Kiraku
Tomoki Kiraku

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 של דף פרטי הכתבה היה נמוך.

דוח מדדי הליבה לבדיקת חוויית המשתמש באתר של Google Search Console שמוצגים בו ערכי CLS גבוהים לדף פרטי המאמר.
דוח מדדי הליבה לבדיקת חוויית המשתמש באתר של Google Search Console.
Lighthouse הימנעות מבדיקה של תנודות פריסה גדולות, שבה מוצגים רכיבי DOm שתורמים הכי הרבה ל-CLS בדף.
הבדיקה של Lighthouse "להימנע משינויים משמעותיים בפריסה" מראה אילו רכיבים תורמים לדירוג ה-CLS ובאיזה שיעור.

חשוב לזכור את החלק המצטבר של ה-Cumulative Layout Shift - הציון מתועד במהלך כל מחזור החיים של הדף. במציאות, הציון יכול לכלול תזוזות שמתרחשות כתוצאה מאינטראקציות עם משתמשים כמו גלילה בדף או הקשה על לחצן. כדי לאסוף תוצאות CLS מנתוני השטח, הצוות שילב את הדיווח בספריית Web-vitals של JavaScript.

הצוות השתמש בכלי הפיתוח ל-Chrome כדי לזהות באילו רכיבים בוצעו שינויים בפריסה בדף. החלק Layout Shift Regions בכלי הפיתוח מציג רכיבים חזותיים שתורמים ל-CLS על ידי הדגשה שלהם באמצעות מלבן כחול בכל פעם שיש שינוי פריסה.

דף פרטים של כתבה עם מלבנים כחולים שמופיעים כשכבת-על של התמונה הראשית (Hero) ושל הטקסט.
המחשה חזותית של התנודות בפריסה.

הם הבינו שיש שינוי בפריסה אחרי שהתמונה הראשית (Hero) שבראש הכתבה נטענה לצפייה הראשונה.

צילומי מסך של דף פרטי הכתבה שבהם מוצגים השוואה אחת לצד השנייה לפני ואחרי שינוי הפריסה.
שינוי הפריסה בדף הפרטים של המאמר.

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

שיפור ה-CLS של תמונות

אם רוצים למנוע תנודות בפריסה של תמונות בגודל קבוע, אפשר לציין את המאפיינים width ו-height ברכיב img ולהשתמש במאפיין ה-CSS aspect-ratio שזמין בדפדפנים מודרניים. עם זאת, Yahoo! JAPAN News צריכים לתמוך לא רק בדפדפנים מודרניים, אלא גם בדפדפנים שמותקנים במערכות הפעלה ישנות יחסית, כמו iOS 9.

הם השתמשו ב-Aspect Ratio Box — שיטה שמשתמשת בסימון כדי לשמור את המקום בדף לפני טעינת התמונה. כדי להשתמש בשיטה הזו, צריך לדעת מראש מהו יחס הגובה-רוחב של התמונה, שאותו ניתן היה לקבל מה-API לקצה העורפי.

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

תוצאות

מספר כתובות ה-URL עם ביצועים נמוכים ב-Search Console ירד ב-98%, ו-CLS בנתוני שיעור ה-Lab ירד מ-0.2 ל-0. וחשוב יותר, היו כמה שיפורים תואמים במדדים העסקיים.

בדוח של Search Console מוצגת ירידה משמעותית במספר הדפים עם בעיות בביצועים.
Search Console לאחר שיפורים.

כאשר חשבון Yahoo! ב-JAPAN News השוואה בין מדדי התעניינות של משתמשים לפני ואחרי האופטימיזציה של CLS, המדדים דיווחו על מספר שיפורים:

15.1%

יותר צפיות בדף בכל סשן

13.3%

משך סשן ארוך יותר

1.72%*

שיעור עזיבה נמוך יותר (*נקודות באחוזים)

על ידי שיפור ה-CLS ומדדים אחרים של מדדי ליבה לבדיקת חוויית המשתמש באתר, Yahoo! JAPAN News קיבלו גם את התווית 'דף מהיר' בתפריט ההקשר של Chrome Android.

תווית מהירה של דף ב-Chrome ב-Android.
התווית 'דף מהיר' ב-Chrome ב-Android.

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

למידע נוסף, קראו את Yahoo! הפוסט של צוות המהנדסים של JAPAN.