שיפור Cumulative Layout Shift (CLS) בקבוצת מדיה של Telegraph

בתוך חודשיים, אתר החדשות המוביל בבריטניה הצליח לשפר את ערך ה-CLS באחוזון ה-75 ב-250% מ-0.25 ל-0.1.

Chris Boakes

אתגר היציבות החזותית

השינויים בפריסה יכולים להפריע מאוד. היציבות החזותית של Telegraph Media Group (TMG) חשובה במיוחד, כי הקוראים משתמשים באפליקציות שלנו בעיקר כדי לצרוך את החדשות. אם הפריסה משתנה במהלך קריאת מאמר, סביר להניח שהקורא יאבד את המקום שלו. זו יכולה להיות חוויה מתסכלת ומסיחה את הדעת.

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

ב-TMG, יש לנו מספר צוותים שתורמים את הקוד בצד הלקוח:

  • הנדסת ליבה. יישום פתרונות של צד שלישי לתחומים כמו המלצות על תוכן והוספת תגובות.
  • שיווק. הרצת בדיקות A/B כדי לבדוק איך הקוראים שלנו מקיימים אינטראקציה עם תכונות חדשות או שינויים.
  • פרסום. ניהול הבקשות להצגת מודעות והגשת הצעות מחיר מראש.
  • עריכה. הטמעת קוד במאמרים כמו ציוצים או סרטונים, וכן ווידג'טים מותאמים אישית (לדוגמה, כלי למעקב אחרי מקרים של נגיף הקורונה).

כדי להבטיח שכל אחד מהצוותים האלה לא יגרום לפריסת הדף, עשויה להיות קשה. בעזרת המדד Cumulative Layout Shift (CLS) למדידת התדירות שבה זה קורה לקוראים שלנו, הצוותים קיבלו תובנות נוספות לגבי חוויית המשתמש האמיתית והשיגו יעד ברור לשאוף אליו. כתוצאה מכך, ה-CLS באחוזון ה-75 גדל מ-0.25 ל-0.1 והקטגוריה העוברת עלתה מ-57% ל-72%.

250%

שיפור ב-CLS באחוזון ה-75

15%

יותר משתמשים עם ציון CLS טוב

איפה התחלנו

בעזרת מרכזי הבקרה של CrUX הצלחנו להבין שהדפים שלנו משתנים יותר מכפי שרצינו.

מרכז הבקרה של CrUX שבו מוצגים כ-55% עד 60% טובים, 15% זקוקים לשיפור ו-25% מהציונים הנמוכים.
הציונים המצטברים שלנו לשינוי בפריסה בין יוני 2020 לפברואר 2021.

באופן אידיאלי, רצינו שלפחות 75% מהקוראים שלנו ייהנו מחוויה 'טובה' אז התחלנו לזהות את הסיבות לחוסר היציבות בפריסה.

איך מדדנו את התנודות בפריסה

השתמשנו בשילוב של Chrome DevTools ו-WebPageTest כדי לזהות מה גרם לשינוי בפריסה. בכלי הפיתוח, השתמשנו בקטע Experience של הכרטיסייה Performance (ביצועים) כדי להדגיש מקרים ספציפיים של שינוי הפריסה ולראות איך הם תרמו לציון הכולל.

העמוד הקדמי של Telegraph עם מודעה בכותרת המסמלת בשכבת-על כחולה.
זיהוי שינוי פריסה שנוצר בעקבות טעינת המודעה בצד הלקוח מעל לכותרת באמצעות הקטע 'חוויית משתמש' בכלי הפיתוח ל-Chrome.

WebPageTest מדגיש בצורה מועילה את המיקום שבו מתרחש שינוי הפריסה בתצוגת ציר הזמן, כאשר האפשרות 'הדגשה של שינויי הפריסה' מסומנת.

תצוגה ברצועת תמונות של WebPageTest של אתר Telegraph עם פריסה מודגשת בשכבת-על אדומה.
WebPageTest מדגישה את המיקום שבו שונתה הפריסה.

אחרי שבדקנו כל שינוי בתבניות הכי פופולריות, חשבנו על רשימה של רעיונות לשיפור.

הפחתה של שינויי הפריסה

התמקדנו בארבעה תחומים שבהם יכולנו לצמצם את השינויים בפריסה: - מודעות - תמונות - כותרות - הטמעות

מודעות

המודעות נטענות אחרי העיבוד הראשוני באמצעות JavaScript. בחלק מהמאגרים שנטענו לא היה גובה שמור.

אנימציה של אתר הטלגרף. רשימת הכתבות זזה למטה כשמודעה נטענת מעליה.
הקטע 'כתבות נוספות' שמתחת למודעה זז למטה אחרי טעינת המודעה.

למרות שאנחנו לא יודעים מה הגובה המדויק, אנחנו יכולים לשריין מקום באמצעות גודל המודעה הנפוץ ביותר שנטען במיקום.

אנימציה של אתר הטלגרף. מלבן לציון המיקום של המודעה מוצב מעל רשימת הכתבות. המודעה נטענת במקום ה-placeholder בלי לגרום לשינוי בפריסה.
בעקבות שמירת מקום למודעה, הבלוק 'כתבות נוספות' שלמטה נשאר סטטי לפני ואחרי טעינת המודעה.

במקרים מסוימים טעינו בהערכה של הגובה הממוצע של המודעה. החריץ היה מתכווץ עבור קוראי טאבלטים.

אנימציה של תצוגת טאבלט באתר של Telegraph. מיקום ה-placeholder גדול יותר מהמודעה, כך שהתוכן זז למעלה לאחר טעינת המודעה.
משבצת המודעה מתכווצת אחרי שהיא נטענת לקוראים במכשירים בגודל טאבלט.

חזרנו לחריץ ושינינו את הגובה כדי להשתמש בגודל הנפוץ ביותר.

אנימציה של תצוגת טאבלט באתר של Telegraph. כאשר ה-placeholder תואם לגודל המודעה, לא יתבצע שינוי פריסה כשהמודעה נטענת.
להבטיח שהשטח ששמרנו למשבצת המודעה תואם לגובה של המודעה המוצגת בדרך כלל.

תמונות

הרבה מהתמונות באתר נטענות לפי הצורך, והשטח שלהן שמור להן.

אנימציה של טעינת כרטיסי תצוגה מקדימה של מאמר.
טעינה מדורגת של תמונות בלי לשבש את הפריסה.

עם זאת, לתמונות מוטבעות בחלק העליון של המאמרים לא היה מקום במאגר התגים, וגם לא מאפייני רוחב וגובה המשויכים לתגים. בעקבות זאת הפריסה תזוז במהלך הטעינה.

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

הוספת מאפייני הרוחב והגובה לתמונות מבטיחה שהפריסה לא תזוז.

אנימציה של טעינת דף הכתבה עם placeholder ששמור לתמונה הראשית. כאשר התמונה הראשית נטענת בחלק העליון של הדף, אין שינוי בפריסה.
התמונה הראשית של הכתבה נטענת בלי לשנות את הפריסה.

הכותרת הייתה מתחת לתוכן בתגי העיצוב וממוקמת למעלה באמצעות CSS. הרעיון המקורי היה לתת עדיפות להעלאת התוכן לפני הניווט, אבל זה גרם לתזוזה מיידית של הדף.

ALT_TEXT_HERE
הכותרת של הדף שנטען באופן לא חוקי.

העברת הכותרת לחלק העליון של תגי העיצוב אפשרה לדף לעבד את הנתונים בלי ההיסט הזה.

ALT_TEXT_HERE
הכותרת של טעינת הדף לא מפריעה יותר את הפריסה.

הטמעות

לחלק מההטמעות הנפוצות יש יחס גובה-רוחב מוגדר. לדוגמה, סרטונים ב-YouTube. בזמן שהנגן נטען, אנחנו מושכים את התמונה הממוזערת מ-YouTube ומשתמשים בה כ-placeholder בזמן שהסרטון נטען.

חריץ נגן הווידאו טוען תמונה ממוזערת ברזולוציה נמוכה בזמן שנגן הווידאו נטען.
חריץ נגן הווידאו טוען תמונה ממוזערת ברזולוציה נמוכה בזמן שנגן הווידאו נטען.

מדידת ההשפעה

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

תרשים SpeedCurve שבו מוצגת ירידה תלולה בציון ה-CLS.
מעקב אחר ההתקדמות סינתטית ב-CLS באמצעות SpeedCurve.

אחרי שהקוד הגיע לייצור, נוכל לתקף את התוצאות בנתוני ה-RUM (שסופקו על ידי mPulse).

תרשים mPulse שבו מוצגת ירידה בציון ה-CLS.
אימות שיפורי CLS באתר כולו עם נתוני mPulse RUM לפני ואחרי ביצוע שינויים.

הבדיקה של נתוני ה-RUM מספקת לנו מידה טובה של ביטחון שלשינויים שאנחנו מבצעים יש השפעה חיובית על הקוראים שלנו.

המספרים הסופיים שבדקנו הם של נתוני RUM ש-Google אוספת. זה רלוונטי במיוחד עכשיו, כי בקרוב ישפיעו על דירוג הדף. בתור התחלה, השתמשנו בדוח חוויית המשתמש של Chrome, גם בנתונים ברמת המקור החודשיים שזמינים דרך לוח הבקרה של CrUX, וגם בביצוע שאילתות ב-BigQuery כדי לאחזר נתוני p75 היסטוריים. כך ראינו בקלות שבכל התנועה שנמדדה על ידי CrUX, ה-CLS באחוזון ה-75 השתפר ב-250% מ-0.25 ל-0.1 והקטגוריה העוברת עלתה מ-57% ל-72%.

לוח הבקרה של CrUX שבו מוצג הערך p75 CLS של telegraph.co.uk הוא 0.1.
תוצאות ממרכז הבקרה של Crux.
BigQuery שמוצגים בו ערכי p75 שמשפרים מדי חודש, מ-0.25 ל-0.1.
הרצה של BigQuery מציגה את ערכי p75 של 2021 עד היום.

בנוסף, הצלחנו להשתמש ב-Chrome UX Report API וליצור כמה מרכזי בקרה פנימיים שמפוצלים לתבניות.

לוח בקרה פנימי שמציג ציון טוב ממוצע 76.2, נדרש שיפור של 9.3 וציון נמוך של 14.6.
מרכזי בקרה פנימיים שמשתמשים בתבנית Chrome UX Report API כדי להדגיש את הציון הממוצע שלנו ואת הדפים עם הביצועים הגרועים ביותר שמשתמשים בתבנית הזו.

הימנעות מרגרסיות CLS

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

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

אם הבדיקה תחרוג מהתקציב, תישלח הודעה לערוץ Slack כדי שנוכל לחקור את הסיבה. בנוסף, הגדרנו דוחות שבועיים, כך שגם אם התבניות נשארות בתקציב, אנחנו מודעים לשינויים שהיו להם השפעה שלילית.

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

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

סיכום

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

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