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

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

Addy Osmani
Addy Osmani
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

תאריך פרסום: 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, וגם אילו כלים עדיין מאפשרים נקודת השוואה מול ההטמעה המקורית.

כלי התאמת עיבוד החלונות של CLS למצב 'פעיל' הזמינות של CLS 'ישן'
חלונית DevTools של Lighthouse ערוץ Canary, 2 ביוני 2021 לא רלוונטי
Lighthouse CLI גרסה 8, שפורסמה ב-1 ביוני 2021 הנתון זמין בתור totalCumulativeLayoutShift ב-Lighthouse v8
Lighthouse CI גרסה 0.7.3, 3 ביוני 2021 לא רלוונטי
PageSpeed Insights‏ (PSI) 1 ביוני 2021 לא רלוונטי
API של PSI 1 ביוני 2021 זמין ב-lighthouseResult בשם totalCumulativeLayoutShift. לא זמין בנתונים של השדה loadingExperience
דוח UX ב-Chrome (CrUX) – BigQuery מערך נתונים לשנת 202105, פורסם ב-8 ביוני 2021 זמין כ-experimental.uncapped_cumulative_layout_shift עד 202111
דוח חוויית משתמש ל-Chrome‏ (CrUX) – API 1 ביוני 2021 אחרי 1 ביוני 2021, זמין בתור experimental_uncapped_cumulative_layout_shift 14 בדצמבר 2021

גם כלי הפיתוח ל-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 במחשבון הציונים.