Mulai hari ini, perubahan pada CLS telah diluncurkan di sejumlah platform alat web Chrome, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.
Dipublikasikan: 2 Juni 2021
Hari ini, kami ingin menyampaikan 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 yang dibuka dalam waktu lama (seperti halaman dengan scroll tanpa batas atau aplikasi web satu halaman). Pembaruan pada CLS ini akan diluncurkan ke alat termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.
Kita semua berharap melihat lebih sedikit pergeseran tata letak di web. Di sinilah metrik CLS terbukti berguna dalam mengukur stabilitas visual halaman web. Hal ini membantu mendorong situs untuk menetapkan dimensi konten dengan lebih baik, seperti gambar atau iklan, yang dapat berkontribusi pada lonjakan konten yang mengejutkan bagi pengguna.
Metrik ini diberi nama "kumulatif" karena skor setiap pergeseran individu dijumlahkan sepanjang masa aktif halaman. Meskipun semua perubahan tata letak di web menyebabkan pengalaman pengguna yang buruk, halaman yang berumur panjang seperti Aplikasi Web Satu Halaman (SPA) atau aplikasi scroll tanpa batas secara alami akan mengakumulasi lebih banyak CLS dari waktu ke waktu. Dengan membatasi agregasi ke 'periode' pergeseran terburuk, CLS kini dapat diukur dengan lebih konsisten, terlepas dari durasi sesi.
Seperti yang telah diumumkan dalam Mengembangkan metrik CLS, kami menyesuaikan metrik CLS ke periode sesi maksimum dengan jeda 1 detik, yang dibatasi hingga 5 detik, update ini lebih mencerminkan pengalaman pengguna untuk halaman yang berdurasi lama. Dengan perubahan ini, 70% origin tidak akan melihat perubahan CLS di persentil ke-75, dan 30% origin yang tersisa akan mengalami peningkatan.
Meluncurkan penyesuaian periode 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 periode CLS, serta alat yang masih dapat melakukan benchmark terhadap implementasi asli.
| Alat | Penyesuaian periode CLS 'live' | Ketersediaan CLS "Lama" |
|---|---|---|
| Panel DevTools Lighthouse | Channel Canary, 2 Juni 2021 | T/A |
| Lighthouse CLI | v8, dirilis 1 Juni 2021 | Tersedia sebagai totalCumulativeLayoutShift di Lighthouse v8 |
| CI Mercusuar | v0.7.3, 3 Juni 2021 | T/A |
| PageSpeed Insights (PSI) | 1 Juni 2021 | NA |
| PSI API | 1 Juni 2021 | Tersedia di lighthouseResult sebagai totalCumulativeLayoutShift. Tidak tersedia di data kolom loadingExperience |
| Laporan UX Chrome (CrUX) - BigQuery | Set data 202105, dipublikasikan 8 Juni 2021 | Tersedia sebagai experimental.uncapped_cumulative_layout_shift hingga 202111 |
| Chrome UX Report (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 jendela. Perubahan pada CLS juga telah dilakukan di Search Console dan akan diterapkan mulai 1 Juni 2021.
Bagi sebagian besar developer, perubahan ini diharapkan akan terjadi dengan 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 penyesuaian jendela, kami memiliki kabar baik: kami mengekspos "CLS lama" di Lighthouse dan CrUX.
Di Lighthouse v8,
nilai ini tersedia dalam 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 akan dapat terus mengandalkan data ini untuk tersedia selama maksimum 6 bulan, dan "CLS lama" akan dihentikan pada 14 Desember 2021.
Memperbarui pembobotan CLS di Lighthouse
Saat pertama kali diperkenalkan di Lighthouse, CLS adalah metrik baru yang menarik. Oleh karena itu, untuk memastikan developer memiliki waktu untuk menguji, menjalankan benchmark, dan mengoptimalkannya, CLS tidak terlalu diperhitungkan dalam skor performa.
Sekarang, setelah beberapa waktu digunakan oleh developer, skor Lighthouse telah meningkatkan bobot CLS dari 5% menjadi 15%, yang konsisten dengan metodologi menjadikan Data Web Inti sebagai metrik dengan bobot paling besar dalam skor Lighthouse.
Anda dapat menemukan bobot metrik yang diperbarui di Lighthouse v8 di kalkulator penskoran.
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 melakukannya. Dan hanya untuk konfirmasi, CLS kolom yang diukur oleh CrUX juga menangani jendela dan subframe dengan cara yang sama.
Namun, perbedaan utama antara CLS lab dan kolom adalah periode observasi CLS lab berakhir pada "dimuat sepenuhnya" sebagaimana ditentukan dalam kondisi lab, sedangkan di kolom, periode pengamatan akan diperluas ke seluruh masa aktif halaman, termasuk aktivitas pasca-pemuatan. Meskipun demikian, penyesuaian windowing memang mengurangi perbedaan ini secara substansial.
Mengukur sendiri di lapangan
Jika ingin mengukur penerapan CLS terbaru, Anda juga dapat mencatatnya untuk data kolom melalui RUM menggunakan cuplikan PerformanceObserver berikut.
Atau dengan mengandalkan langsung library JavaScript Web Vitals, yang juga telah diperbarui dengan perubahan ini.
Pembaruan tambahan
Selain update pada Cumulative Layout Shift, update 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 diperbarui pada 1 Juni 2021. CrUX BigQuery akan diperbarui pada 8 Juni 2021.
- Di CrUX, nilai minimum tri-binning First Contentful Paint telah diperbarui menjadi, Baik: [0-1,8 detik], Perlu Peningkatan: (1,8 detik-3 detik), Buruk: [3 detik-∞]
Kesimpulan
Kami harap perubahan ini akan mencerminkan transisi yang lancar bagi sebagian besar situs dan mendorong Anda untuk memeriksa Data Web dan Mengoptimalkan CLS untuk mendapatkan tips dan trik tentang cara mengukur dan mengoptimalkan pergeseran tata letak Anda. Seperti biasa, hubungi kami di grup masukan web-vitals untuk memberikan masukan tentang metrik dan forum masukan khusus alat kami untuk Lighthouse, dan Laporan UX Chrome untuk masalah alat. Terima kasih.
Terima kasih kepada Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose, dan Paul Irish atas masukan mereka.
Banner besar oleh Barn Images / @barnimages di Unsplash