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 menyampaikan bagaimana kami mengembangkan pengukuran Pergeseran Tata Letak Kumulatif (CLS) di sejumlah platform alat web Chrome. Bagi pengembang, perubahan ini akan lebih mencerminkan pengalaman pengguna untuk halaman berdurasi panjang (seperti aplikasi dengan scroll tanpa batas atau aplikasi web satu halaman). Pembaruan CLS ini akan diluncurkan ke alat-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 bermanfaat dalam mengukur stabilitas visual halaman web. Hal ini membantu mendorong situs untuk menyetel dimensi konten dengan lebih baik, seperti gambar atau iklan, yang dapat berkontribusi pada lompatan konten yang mengejutkan bagi pengguna mereka.
Metrik tersebut diberi nama "kumulatif" karena skor dari setiap shift dijumlahkan sepanjang masa aktif halaman. Meskipun semua pergeseran tata letak di web menyebabkan pengalaman pengguna yang buruk, halaman berdurasi lama seperti Aplikasi Web Satu Halaman (SPA) atau aplikasi scrolling tanpa batas secara alami mengakumulasi lebih banyak CLS dari waktu ke waktu. Dengan membatasi agregasi ke 'jendela' terburuk shift, CLS kini dapat diukur secara lebih konsisten, terlepas dari durasi sesi.
Seperti yang telah diumumkan dalam Mengembangkan metrik CLS, kami menyesuaikan metrik CLS menjadi periode sesi maksimum dengan jeda 1 detik, dibatasi hingga 5 detik, pembaruan ini lebih mencerminkan pengalaman pengguna untuk halaman yang tahan lama. Dengan perubahan ini, 70% asal tidak akan melihat adanya perubahan CLS di persentil ke-75, dan 30% situs asal yang tersisa akan mengalami peningkatan.
Meluncurkan penyesuaian windowing ke CLS
Kita telah membahas definisi CLS yang diperbarui sebagai periode sesi maksimum dengan jeda 1 detik, dibatasi pada 5 detik. Apa artinya bagi 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 jendela CLS, serta alat yang masih memberikan kemampuan untuk melakukan tolok ukur terhadap penerapan asli.
| Alat | Penyesuaian windowing CLS 'live' | "Lama" Ketersediaan CLS |
|---|---|---|
| Panel DevTools Lighthouse | Canary channel, 2 Juni 2021 | T/A |
| CLI Lighthouse | 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 |
| API PSI | 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 |
| 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 jendela. Perubahan pada CLS juga telah dilakukan untuk Search Console dan akan berlaku mulai 1 Juni 2021.
Bagi sebagian besar pengembang, perubahan ini diharapkan terjadi dengan lancar tanpa perlu tindakan apa pun untuk memanfaatkan data dari perbaikan.
"Lama" CLS
Sebagai pengingat, "lama" CLS mengukur pergeseran tata letak selama masa aktif halaman. Karena beberapa developer mungkin ingin memantau definisi CLS yang lama sekaligus penyesuaian jendela, ada kabar baik: kami akan menampilkan "CLS lama" di Lighthouse dan CrUX.
Di Lighthouse v8,
itu 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 "CLS lama" metrik:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Setelah 8 Juni, BigQuery CrUX 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 hingga 6 bulan, dengan "CLS lama" dihentikan pada 14 Desember 2021.
Memperbarui pembobotan CLS di Lighthouse
Saat CLS pertama kali diperkenalkan di Lighthouse, itu adalah metrik gemerlap yang benar-benar baru. Dengan demikian, untuk memastikan pengembang memiliki waktu untuk melakukan pengujian, {i>benchmark<i}, dan mengoptimalkannya, CLS lebih sedikit bobot dalam skor performa.
Sekarang, setelah memiliki beberapa waktu di tangan pengembang, skor Lighthouse telah meningkatkan bobot CLS dari 5% menjadi 15%, konsisten dengan metodologi memiliki Core Web Vitals menjadi metrik yang paling berbobot di skor Lighthouse.
Anda dapat menemukan pembobotan 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 subframe CLS dalam penghitungan metrik, tetapi sekarang melakukannya. 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 observasi CLS lab berakhir pada "terisi penuh" 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.
Melakukan pengukuran 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 Library JavaScript Web Vitals, yang juga telah diperbarui dengan perubahan ini.
Pembaruan tambahan
Di luar pembaruan Pergeseran Tata Letak Kumulatif, pembaruan terkait metrik berikut juga telah dilakukan pada alat web kami:
- Kami memperbarui ke definisi terbaru dari metrik Largest Contentful Paint. CrUX API, PSI, PSI API, Search Console akan diupdate pada 1 Juni 2021. CrUX BigQuery akan diperbarui pada 8 Juni 2021.
- Di CrUX, ambang batas tri-binning First Contentful Paint telah diperbarui menjadi, Baik: [0-1,8s], Perlu Peningkatan: (1,8s-3s), Buruk: [3s- usaha]
Kesimpulan
Kami harap perubahan ini dapat mencerminkan transisi yang lancar untuk sebagian besar situs dan mendorong Anda untuk memeriksa Data Web dan Mengoptimalkan CLS untuk mendapatkan tips dan trik cara mengukur dan mengoptimalkan pergeseran tata letak Anda. Seperti biasa, jangan ragu untuk menghubungi grup masukan web-vitals untuk mendapatkan masukan tentang metrik dan forum umpan balik khusus alat kami untuk Lighthouse, dan Laporan UX Chrome untuk masalah peralatan. 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