Mengembangkan Pergeseran Tata Letak Kumulatif di alat web

Mulai hari ini, perubahan pada CLS telah diluncurkan di sejumlah platform alat web Chrome termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.

Addy Osmani

Elizabeth Sweeny

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.

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