פיתוח Cumulative Layout Shift (CLS) בכלים באינטרנט

החל מהיום, שינוי ב-CLS הושק במספר פלטפורמות של כלי האינטרנט של Chrome, כולל Lighthouse, ‏ PageSpeed Insights ודוח חוויית המשתמש של Chrome.

Addy Osmani

Elizabeth Sweeny

תאריך פרסום: 2 ביוני 2021

היום אנחנו רוצים לשתף איך אנחנו מפתחים את המדד Cumulative Layout Shift‏ (CLS) במספר ממשקי הכלי של Chrome לאינטרנט. מפתחים יוכלו להשתמש בשינויים האלה כדי לשפר את חוויית המשתמש בדפים שפתוחים זמן רב (כמו דפים עם גלילה אינסופית או אפליקציות עם דף יחיד). העדכונים האלה ל-CLS יושקעו בכלים שונים, כולל Lighthouse, ‏ PageSpeed Insights ודוח חוויית המשתמש של Chrome.

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

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

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

השקת ההתאמה של חלון הזמן ל-CLS

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

החל מהיום, השינוי הזה ב-CLS הושק במספר פלטפורמות של כלי האינטרנט של Chrome, כולל Lighthouse, ‏ PageSpeed Insights ודוח חוויית המשתמש של Chrome. בהמשך ניתן לראות סיכום של ההשקה של התאמת עיבוד החלונות של CLS, וגם אילו כלים עדיין מאפשרים נקודת השוואה מול ההטמעה המקורית.

גם כלי הפיתוח ל-Chrome יעודכנו בקרוב ויתמכו בהתאמת החלונות. העדכון של CLS בוצע גם ב-Search Console, והוא ישתקף החל מ-1 ביוני 2021.

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

CLS 'ישן'

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

בגרסה 8 של Lighthouse, הוא זמין ב-JSON בתור audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

הוא מופיע בתור experimental_uncapped_cumulative_layout_shift ב-CrUX API וכ-experimental.uncapped_cumulative_layout_shift ב-CrUX BigQuery.

אחרי 1 ביוני, בקשות API של CrUX יחזירו את המדד 'CLS הקודם':

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

אחרי 8 ביוני, CrUX BigQuery הבא ישווה בין CLS הישן לחדש:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

תוכלו להמשיך להסתמך על הנתונים האלה למשך תקופה של עד 6 חודשים, והמדד 'CLS הקודם' יוסר ב-14 בדצמבר 2021.

עדכון המשקל של CLS ב-Lighthouse

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

עכשיו, אחרי שהמפתחים השתמשו ב-Lighthouse במשך זמן מה, הגדילו את המשקל של מדד CLS מ-5% ל-15%, בהתאם למתודולוגיה שלפיה מדדי הליבה לבדיקת חוויית המשתמש הם המדדים שמשקללים בצורה המשמעותית ביותר בציון Lighthouse.

אפשר למצוא את המשקלים המעודכנים של המדדים ב-Lighthouse v8 במחשבון הציונים.

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

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

מדידה עצמית של המדידה בשטח

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

לחלופין, אפשר להסתמך ישירות על ספריית JavaScript של Web Vitals, שגם היא עודכנה עם השינוי הזה.

עדכונים נוספים

בנוסף לעדכונים של Cumulative Layout Shift, בוצעו גם עדכונים שקשורים למדדים הבאים בכלי האינטרנט שלנו:

• אנחנו מעדכנים את המדד לפי ההגדרה העדכנית ביותר של המדד Largest Contentful Paint. CrUX API,‏ PSI,‏ PSI API ו-Search Console יעודכנו ב-1 ביוני 2021. הנתונים של CrUX ב-BigQuery יעודכנו ב-8 ביוני 2021.
• ב-CrUX, ערכי הסף של חלוקה לשלושה קטגוריות של זמן הצגת התוכן הראשוני עודכנו כך: 'דפים מהירים': [0-1.8 שניות], 'דרוש שיפור': (1.8 שניות-3 שניות), 'דפים איטיים': [3 שניות-∞]

מסקנות

אנחנו צופים שהשינוי הזה יתבטא במעבר חלק ברוב האתרים. מומלץ לעיין במאמרים מדדי הליבה לבדיקת חוויית המשתמש באתר ואופטימיזציה של CLS כדי לקבל טיפים ועצות למדידת השינויים בפריסת האתר ולביצוע אופטימיזציה שלהם. כמו תמיד, אפשר לפנות אלינו בקבוצת המשוב של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) כדי לשלוח משוב על המדדים, ולפורומים שלנו למשוב ספציפי על כלים לגבי Lighthouse ודוח חוויית המשתמש של Chrome כדי לדווח על בעיות בכלים. לחיים!

תודה על המשוב של Johannes Henkel, ‏ Rick Viscomi, ‏ Vivek Sekhar, ‏ Rachel Andrew, ‏ Milica Mihajlija, ‏ Jeff Jose ו-Paul Irish.

תמונה ראשית (Hero) של Barn Images / @barnimages ב-Unbounce