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

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

Addy Osmani

Elizabeth Sweeny

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

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

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

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

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

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

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

כלי	התאמת החלון של CLS במצב 'פעיל'	הזמינות "הישנה" של CLS
חלונית כלי הפיתוח של Lighthouse	הערוץ Canary, 2 ביוני 2021	לא רלוונטי
Lighthouse CLI	גרסה 8, הושקה ב-1 ביוני 2021	זמינות כ-totalCumulativeLayoutShift ב-Lighthouse v8
Lighthouse CI	גרסה 0.7.3, 3 ביוני 2021	לא רלוונטי
PageSpeed Insights (PSI)	1 ביוני 2021	לא רלוונטי
PSI API	1 ביוני 2021	זמין בlighthouseResult בתור totalCumulativeLayoutShift. לא זמין בנתוני השדה loadingExperience
דוח חוויית המשתמש של 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.

ב-Lighthouse v8, הוא זמין ב-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 ביוני, תתבצע השוואה בין ה-CLS הישן לבין ה-CLS החדש ב-CrUX BigQuery:

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.

השקלולים המעודכנים של המדדים מופיעים בגרסה 8 של Lighthouse במחשבון הציון.

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

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

מדידה בעצמכם בשטח

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

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

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

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

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

מסקנות

אנחנו צופים שהשינוי ישקף מעבר חלק ברוב האתרים, ומומלץ לעיין במדדי Web Vitals וב-Optimize CLS כדי לקבל טיפים וטריקים למדידה ולאופטימיזציה של התנודות בפריסה. כמו תמיד, אתם מוזמנים לפנות לקבוצת משוב בנושא Web-vitals-feedback כדי לקבל משוב על המדדים, ובפורומים הספציפיים למשוב על כלים של Lighthouse, ועל דוח חוויית המשתמש של Chrome לגבי בעיות בכלים. תודה,

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

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