החל מהיום, הושק שינוי ב-CLS בכמה פלטפורמות של Chrome לבניית כלים לאינטרנט, כולל Lighthouse, PageSpeed Insights ודוח חוויית המשתמש של Chrome.
היום נסביר איך אנחנו ממשיכים לשפר את המדידה של המדד 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