تغییر چیدمان تجمعی در حال تحول در ابزارسازی وب

از امروز، تغییری در CLS در تعدادی از سطوح ابزار وب کروم از جمله Lighthouse، PageSpeed ​​Insights و Chrome UX Report اعمال شده است.

Addy Osmani

Elizabeth Sweeny

تاریخ انتشار: 2 ژوئن 2021

امروز می خواهیم به اشتراک بگذاریم که چگونه اندازه گیری تغییر چیدمان تجمعی (CLS) را در تعدادی از سطوح ابزار وب کروم تکامل می دهیم. برای توسعه دهندگان، این تغییرات تجربه کاربر را برای صفحات طولانی مدت (مانند صفحاتی که دارای برنامه های اسکرول بی نهایت یا تک صفحه ای هستند) بهتر منعکس می کند. این به‌روزرسانی‌های CLS برای ابزارهایی از جمله Lighthouse، PageSpeed ​​Insights و Chrome UX Report منتشر خواهند شد.

همه ما آرزو می کنیم که شاهد تغییرات کمتری در طرح بندی وب باشیم. اینجاست که معیار CLS برای اندازه‌گیری ثبات بصری یک صفحه وب مفید است. این به تشویق سایت‌ها کمک می‌کند تا ابعاد بهتری برای محتوا، مانند تصاویر یا تبلیغات، تعیین کنند که ممکن است به جهش شگفت‌انگیز محتوا برای کاربرانشان کمک کند.

این معیار "تجمعی" نامیده می شود زیرا امتیاز هر جابجایی فردی در طول عمر یک صفحه جمع می شود. در حالی که همه تغییرات طرح‌بندی در وب باعث تجربه ضعیف کاربر می‌شود، صفحات با عمر طولانی مانند برنامه‌های تک صفحه (SPA) یا برنامه‌های اسکرول بی‌نهایت طبیعتاً CLS بیشتری را در طول زمان جمع‌آوری می‌کنند. با محدود کردن تجمع به بدترین "پنجره" شیفت ها، اکنون می توان CLS را بدون توجه به مدت جلسه به طور مداوم تری اندازه گیری کرد.

همانطور که در Evolving the CLS Metric اعلام کردیم، متریک CLS را به یک پنجره جلسه حداکثر با فاصله 1 ثانیه تنظیم می کنیم که حداکثر آن 5 ثانیه است ، این به روز رسانی بهتر تجربه کاربر را برای صفحات طولانی مدت منعکس می کند. با این تغییر، 70 درصد از مبداها نباید انتظار داشته باشند که هیچ تغییری در CLS در صدک 75 مشاهده کنند و 30 درصد باقی مانده از مبداها شاهد بهبود خواهند بود.

تنظیم پنجره را به CLS باز می کند

ما در مورد تعریف CLS به روز شده صحبت کرده ایم که حداکثر پنجره جلسه با فاصله 1 ثانیه، محدود به 5 ثانیه است. این برای ابزارها به چه معناست؟

از امروز، این تغییر به CLS در تعدادی از سطوح ابزار وب کروم از جمله Lighthouse، PageSpeed ​​Insights و Chrome UX Report اعمال شده است. در زیر می‌توانید خلاصه‌ای از راه‌اندازی تنظیم پنجره‌های CLS و همچنین ابزارهایی را که هنوز هم توانایی محک زدن با اجرای اصلی را ارائه می‌دهند، ببینید.

ابزار	تنظیم پنجره CLS "زنده"	در دسترس بودن CLS "قدیمی".
پنل DevTools Lighthouse	کانال قناری، 2 ژوئن 2021	N/A
فانوس دریایی CLI	نسخه 8، منتشر شده در 1 ژوئن 2021	به عنوان totalCumulativeLayoutShift در Lighthouse v8 موجود است
فانوس دریایی CI	نسخه 0.7.3، 3 ژوئن 2021	N/A
PageSpeed ​​Insights (PSI)	1 ژوئن 2021	NA
PSI API	1 ژوئن 2021	موجود در lighthouseResult به عنوان totalCumulativeLayoutShift . در فیلد loadingExperience داده موجود نیست
گزارش Chrome UX (CrUX) - BigQuery	مجموعه داده 202105، منتشر شده در 8 ژوئن 2021	در دسترس به عنوان experimental.uncapped_cumulative_layout_shift تا 202111
گزارش Chrome UX (CrUX) - API	1 ژوئن 2021	پس از ۱ ژوئن ۲۰۲۱، به‌عنوان experimental_uncapped_cumulative_layout_shift در ۱۴ دسامبر ۲۰۲۱ در دسترس است

Chrome DevTools نیز به زودی برای پشتیبانی از تنظیم پنجره به روز می شود. به‌روزرسانی CLS در کنسول جستجو نیز انجام شده است و از 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 خواهید یافت.

پس از ۱ ژوئن، درخواست‌های CrUX API معیار «کلاس قدیمی» را برمی‌گردانند:

{
  "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

می‌توانید برای مدت حداکثر ۶ ماه به این داده‌ها تکیه کنید و «CLS قدیمی» در ۱۴ دسامبر ۲۰۲۱ بازنشسته شود.

به روز رسانی وزن CLS در فانوس دریایی

زمانی که CLS برای اولین بار در Lighthouse معرفی شد، یک معیار جدید درخشان بود. به این ترتیب، برای اطمینان از اینکه توسعه‌دهندگان زمان برای آزمایش، معیار و بهینه‌سازی در مقابل آن دارند، CLS در امتیاز عملکرد وزن کمتری داشت.

اکنون، پس از مدتی در دست داشتن توسعه دهندگان، امتیاز Lighthouse وزن CLS را از 5٪ به 15٪ افزایش داده است، مطابق با روشی که Core Web Vitals به عنوان سنگین ترین معیارهای وزن در امتیاز Lighthouse باشد.

شما می توانید وزن های به روز شده معیارها را در Lighthouse v8 در ماشین حساب امتیازدهی پیدا کنید.

اجرای CLS Lighthouse 8.0 شامل پنجره‌سازی و مشارکت CLS از زیرفریم‌ها می‌شود. قبل از نسخه 8.0، CLS در Lighthouse CLS فریم های فرعی را در محاسبه متریک لحاظ نمی کرد، اما اکنون شامل می شود. و فقط برای تأیید، فیلد CLS اندازه‌گیری شده توسط CrUX نیز پنجره‌ها و زیرفریم‌ها را به طور مشابه مدیریت می‌کند.

با این حال، تفاوت اصلی بین CLS آزمایشگاهی و میدانی در این است که پنجره مشاهده آزمایشگاه CLS در شرایط آزمایشگاهی به "کاملا بارگذاری" ختم می شود، در حالی که در میدان، پنجره مشاهده تا کل طول عمر صفحه، از جمله فعالیت پس از بارگذاری، گسترش می یابد. . گفته می شود، تنظیم پنجره این تفاوت را به طور قابل توجهی کاهش می دهد.

خودتان در میدان اندازه گیری کنید

اگر می‌خواهید آخرین پیاده‌سازی CLS را اندازه‌گیری کنید، می‌توانید با استفاده از قطعه PerformanceObserver زیر ، این را برای داده‌های فیلد خود از طریق RUM نیز ثبت کنید.

یا با تکیه مستقیم به کتابخانه جاوا اسکریپت Web Vitals که با این تغییر نیز به روز شده است.

به روز رسانی های اضافی

خارج از به‌روزرسانی‌های تغییر طرح‌بندی تجمعی، به‌روزرسانی‌های مرتبط با معیارهای زیر نیز در ابزار وب ما انجام شده است:

• ما در حال به روز رسانی به جدیدترین تعریف از بزرگترین معیار رنگ محتوایی هستیم. CrUX API، PSI، PSI API، کنسول جستجو در 1 ژوئن 2021 به‌روزرسانی می‌شود. CrUX BigQuery در 8 ژوئن 2021 به‌روزرسانی می‌شود.
• در CrUX، آستانه‌های سه‌بینینگ First Contentful Paint به‌روزرسانی شده‌اند، خوب: [0-1.8s]، نیاز به بهبود: (1.8s-3s)، ضعیف: [3s-∞]

نتیجه گیری

ما انتظار داریم که این تغییر منعکس کننده یک انتقال آرام برای اکثر سایت‌ها باشد و شما را تشویق می‌کند تا Web Vitals و Optimize CLS را برای نکات و ترفندهایی در مورد نحوه اندازه‌گیری و بهینه‌سازی تغییرات طرح‌بندی خود بررسی کنید. مثل همیشه، برای بازخورد درباره معیارها و تالارهای گفتمان بازخورد ویژه ابزارسازی ما برای Lighthouse و گزارش Chrome UX برای مشکلات ابزارسازی، راحت به گروه web-vitals-feedback مراجعه کنید. به سلامتی

با تشکر از Johannes Henkel، Rick Viscomi، Vivek Sekhar، Rachel Andrew، Milica Mihajlija، Jeff Jose و Paul Irish برای بازخوردشان.

تصویر قهرمان توسط Barn Images / @barnimages در Unsplash