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

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

Addy Osmani

Elizabeth Sweeny

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

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

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

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

השקת ההתאמה של עיבוד החלק הנצפה בלבד ל-CLS

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

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

כלי	התאמת עיבוד החלונות של CLS למצב 'פעיל'	"ישן" זמינות CLS
חלונית כלי הפיתוח של Lighthouse	ערוץ של Canary, 2 ביוני 2021	לא רלוונטי
CLI של Lighthouse	גרסה 8, שפורסמה ב-1 ביוני 2021	זמין כ-totalCumulativeLayoutShift ב-Lighthouse גרסה 8
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 גרסה 8, היא זמינה ב-JSON audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

השם יופיע בתור experimental_uncapped_cumulative_layout_shift ב-CrUX API ובתור experimental.uncapped_cumulative_layout_shift ב-CrUX BigQuery.

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

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

אחרי 8 ביוני, CrUX BigQuery ישוווה בין ערכי CLS הישנים לבין ערכי ה-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.

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

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

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

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

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

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

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

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

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

מסקנות

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

הודות למשוב שלהם על יוהנס הנקל, Rick Viscomi, Vivek Sekhar, רייצ'ל אנדרו, Milica Mihajlija, Jf Jose ו-Paul אירית.

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