Mulai hari ini, perubahan pada CLS telah diluncurkan di sejumlah platform alat web Chrome, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.
Hari ini kami ingin berbagi cara kami mengembangkan pengukuran metrik Pergeseran Tata Letak Kumulatif (CLS) di sejumlah platform alat web Chrome. Bagi developer, perubahan ini akan lebih mencerminkan pengalaman pengguna untuk halaman berdurasi panjang (seperti halaman dengan aplikasi scrolling tanpa batas atau satu halaman). Pembaruan untuk CLS ini akan diluncurkan ke berbagai alat, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.
Kita semua berharap kita melihat lebih sedikit pergeseran tata letak di web. Di sinilah metrik CLS terbukti berguna dalam mengukur stabilitas visual halaman web. Cara ini membantu mendorong situs untuk menetapkan dimensi konten dengan lebih baik, seperti gambar atau iklan, yang dapat berkontribusi pada lompatan konten yang mengejutkan bagi pengguna mereka.
Metrik ini diberi nama "kumulatif" karena skor setiap shift dijumlahkan selama masa aktif halaman. Meskipun semua pergeseran tata letak di web menyebabkan pengalaman pengguna yang buruk, halaman yang berdurasi panjang seperti Aplikasi Web Satu Halaman (SPA) atau aplikasi scroll tanpa batas secara alami mengakumulasi lebih banyak CLS dari waktu ke waktu. Dengan membatasi agregasi ke 'periode' shift terburuk, CLS kini dapat diukur secara lebih konsisten, terlepas dari durasi sesi.
Seperti yang telah kami umumkan dalam Mengembangkan metrik CLS, kami menyesuaikan metrik CLS ke periode sesi maksimum dengan jeda 1 detik, yang dibatasi hingga 5 detik, pembaruan ini lebih mencerminkan pengalaman pengguna untuk halaman yang berdurasi panjang. Dengan menerapkan perubahan ini, 70% origin tidak akan melihat perubahan CLS pada persentil ke-75, dan 30% origin lainnya akan melihat peningkatan.
Meluncurkan penyesuaian windowing ke CLS
Kita telah membahas definisi CLS yang diperbarui sebagai periode sesi maksimum dengan jeda 1 detik, yang dibatasi hingga 5 detik. Apa pengaruhnya terhadap alat?
Mulai hari ini, perubahan pada CLS ini telah diluncurkan di sejumlah platform alat web Chrome, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome. Di bawah ini, Anda dapat melihat ringkasan peluncuran penyesuaian windowing CLS, serta alat yang masih memberikan kemampuan untuk menjalankan benchmark terhadap implementasi asli.
| Alat | Penyesuaian jendela CLS 'aktif' | Ketersediaan CLS "Lama" |
|---|---|---|
| Panel DevTools Lighthouse | Saluran Canary, 2 Juni 2021 | T/A |
| CLI Lighthouse | v8, dirilis 1 Juni 2021 | Tersedia sebagai totalCumulativeLayoutShift di Lighthouse v8 |
| Lighthouse CI | v0.7.3, 3 Juni 2021 | T/A |
| PageSpeed Insights (PSI) | 1 Juni 2021 | TA |
| PSI API | 1 Juni 2021 | Tersedia di lighthouseResult sebagai totalCumulativeLayoutShift. Tidak tersedia di data loadingExperience kolom |
| Laporan UX Chrome (CrUX) - BigQuery | Set data 202105, dipublikasikan 8 Juni 2021 | Tersedia sebagai experimental.uncapped_cumulative_layout_shift hingga 202111 |
| Laporan UX Chrome (CrUX) - API | 1 Juni 2021 | Setelah 1 Juni 2021, tersedia sebagai
experimental_uncapped_cumulative_layout_shift
14 Desember 2021 |
Chrome DevTools juga akan diupdate untuk segera mendukung penyesuaian windowing. Pembaruan untuk CLS juga telah dilakukan untuk Search Console dan akan diberlakukan mulai 1 Juni 2021.
Bagi sebagian besar developer, perubahan ini diharapkan akan berjalan lancar tanpa perlu tindakan apa pun untuk memanfaatkan data dari perbaikan.
CLS "Lama"
Sebagai pengingat, CLS "lama" mengukur pergeseran tata letak selama masa aktif halaman. Karena beberapa developer mungkin ingin memantau definisi CLS lama bersama dengan penyesuaian windowing, kami memiliki kabar baik untuk disampaikan: kami mengekspos "CLS lama" di Lighthouse dan CrUX.
Di Lighthouse v8,
layanan ini tersedia di JSON sebagai
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Anda akan menemukannya sebagai experimental_uncapped_cumulative_layout_shift di CrUX API dan sebagai experimental.uncapped_cumulative_layout_shift di CrUX BigQuery.
Setelah 1 Juni, permintaan CrUX API akan menampilkan metrik "CLS lama":
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Setelah 8 Juni, CrUX BigQuery berikut akan membandingkan CLS lama dan baru:
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
Anda dapat terus mengandalkan data ini selama jangka waktu hingga 6 bulan, dan "CLS lama" akan dihentikan pada 14 Desember 2021.
Memperbarui pembobotan CLS di Lighthouse
Ketika CLS pertama kali diperkenalkan di Lighthouse, itu adalah metrik berkilau baru. Dengan demikian, guna memastikan developer memiliki waktu untuk menguji, menjalankan benchmark, dan mengoptimalkannya, skor performa CLS tidak terlalu dinilai.
Sekarang, setelah memiliki waktu di tangan developer, skor Lighthouse meningkatkan bobot CLS dari 5% menjadi 15%, konsisten dengan metodologi yang menjadikan Data Web Inti menjadi metrik yang paling berbobot di skor Lighthouse.
Anda dapat menemukan pembobotan metrik yang diperbarui di Lighthouse v8 dalam kalkulator skor.
Implementasi CLS Lighthouse 8.0 mencakup kontribusi windowing dan CLS dari subframe. Sebelum 8.0, CLS di Lighthouse tidak menyertakan CLS subframe dalam penghitungan metrik, tetapi sekarang menyertakan CLS. Dan hanya untuk konfirmasi, CLS kolom yang diukur oleh CrUX juga menangani windowing dan subframe dengan cara yang sama.
Namun, perbedaan utama antara CLS lab dan kolom adalah periode pengamatan CLS lab berakhir pada "termuat sepenuhnya" seperti yang ditentukan dalam kondisi lab, sedangkan di kolom, periode pengamatan mencakup seluruh masa aktif halaman, termasuk aktivitas pasca-pemuatan. Meskipun demikian, penyesuaian windowing sangat memitigasi perbedaan ini secara substansial.
Mengukur di lapangan sendiri
Jika ingin mengukur implementasi CLS terbaru, Anda juga dapat mencatatnya untuk data kolom melalui RUM menggunakan cuplikan PerformanceObserver berikut.
Atau dengan mengandalkan langsung library JavaScript Data Web, yang juga telah diupdate dengan perubahan ini.
Info terbaru tambahan
Selain update pada Pergeseran Tata Letak Kumulatif, pembaruan terkait metrik berikut juga telah dilakukan pada alat web kami:
- Kami memperbarui ke definisi terbaru metrik Largest Contentful Paint. CrUX API, PSI, PSI API, Search Console akan diupdate pada 1 Juni 2021. BigQuery CrUX akan diupdate pada 8 Juni 2021.
- Di CrUX, batas tri-binning First Contentful Paint telah diperbarui menjadi, Baik: [0-1,8d], Perlu Peningkatan: (1,8d-3d), Buruk: [3s-##]
Kesimpulan
Kami harap perubahan ini mencerminkan transisi yang lancar untuk sebagian besar situs dan sebaiknya Anda melihat Data Web dan Mengoptimalkan CLS untuk mengetahui tips dan trik cara mengukur dan mengoptimalkan pergeseran tata letak. Seperti biasa, jangan ragu untuk menghubungi grup web-vitals-feedback untuk mendapatkan masukan tentang metrik dan forum masukan khusus alat kami untuk Lighthouse, dan Laporan UX Chrome untuk masalah alat. Bersulang!
Terima kasih kepada Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose, dan Paul Irish atas masukannya.
Banner besar oleh Barn Images / @barnimages di Unsplash