בתוך חודשיים, אתר החדשות המוביל בבריטניה הצליח לשפר את ערך ה-CLS באחוזון ה-75 ב-250% מ-0.25 ל-0.1.
אתגר היציבות החזותית
השינויים בפריסה יכולים להפריע מאוד. היציבות החזותית של 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 הצלחנו להבין שהדפים שלנו משתנים יותר מכפי שרצינו.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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