Rencana untuk meningkatkan metrik CLS agar lebih adil untuk halaman yang berdurasi panjang.
Kami (Tim Metrik Kecepatan Chrome) baru-baru ini menguraikan riset awal kami tentang opsi untuk membuat metrik CLS lebih adil bagi halaman yang terbuka untuk waktu yang lama. Kami telah menerima banyak masukan yang sangat membantu dan setelah menyelesaikan analisis berskala besar, kami telah menyelesaikan perubahan yang kami rencanakan untuk metrik: periode sesi maksimum dengan jeda 1 detik, yang dibatasi pada 5 detik.
Baca terus untuk mengetahui detailnya.
Bagaimana cara kami mengevaluasi opsi yang ada?
Kami telah meninjau semua masukan yang diterima dari komunitas developer dan mempertimbangkannya.
Kami juga menerapkan opsi teratas di Chrome dan melakukan analisis skala besar terhadap metrik di jutaan halaman web. Kami memeriksa jenis situs apa yang ditingkatkan oleh setiap opsi, dan bagaimana opsi tersebut dibandingkan, terutama melihat situs yang diberi skor berbeda oleh opsi yang berbeda. Secara keseluruhan, kami menemukan bahwa:
- Semua opsi mengurangi korelasi antara waktu yang dihabiskan di halaman dan skor pergeseran tata letak.
- Tidak ada opsi yang menghasilkan skor lebih buruk untuk halaman mana pun. Jadi, tidak perlu khawatir bahwa perubahan ini akan memperburuk skor situs Anda.
Poin keputusan
Mengapa jendela sesi?
Dalam postingan sebelumnya, kami membahas beberapa strategi windowing yang berbeda untuk mengelompokkan pergeseran tata letak sekaligus memastikan skor tidak bertambah tanpa batas. Masukan yang kami terima dari developer sangat menyukai strategi jendela sesi karena strategi ini mengelompokkan pergeseran tata letak secara paling intuitif.
Untuk meninjau periode sesi, berikut ini contohnya:
Pada contoh di atas, banyak pergeseran tata letak yang terjadi dari waktu ke waktu saat pengguna melihat halaman. Masing-masing diwakili oleh panel biru. Di atas, Anda akan melihat bahwa batang biru memiliki ketinggian yang berbeda; batang tersebut mewakili skor setiap pergeseran tata letak individual. Jendela sesi dimulai dengan pergeseran tata letak pertama dan terus meluas sampai ada celah tanpa pergeseran tata letak. Saat pergeseran tata letak berikutnya terjadi, jendela sesi baru akan dimulai. Karena ada tiga celah tanpa pergeseran tata letak, ada tiga periode sesi dalam contoh tersebut. Serupa dengan definisi CLS saat ini, skor setiap shift ditambahkan, sehingga skor setiap jendela adalah jumlah dari masing-masing pergeseran tata letaknya.
Berdasarkan penelitian awal, kami memilih jeda 1 detik antara periode sesi, dan celah tersebut bekerja dengan baik dalam analisis berskala besar kami. Jadi, "Kesenjangan Sesi" yang ditunjukkan dalam contoh di atas adalah 1 detik.
Mengapa periode sesi maksimum?
Dalam riset awal kami, kami mempersempit strategi ringkasan menjadi dua opsi:
- Skor rata-rata semua periode sesi, untuk periode sesi yang sangat besar (periode tidak tertutup dengan jarak 5 detik di antara periode tersebut).
- Skor maksimum semua periode sesi, untuk periode sesi yang lebih kecil (dibatasi hingga 5 detik, dengan jeda 1 detik di antara periode tersebut).
Setelah penelitian awal, kami menambahkan setiap metrik ke Chrome sehingga kami dapat melakukan analisis skala besar atas jutaan URL. Dalam analisis berskala besar, kami menemukan banyak URL dengan pola pergeseran tata letak seperti ini:
Di kanan bawah, Anda dapat melihat hanya ada satu pergeseran tata letak kecil di Jendela Sesi 2 sehingga skornya sangat rendah. Itu berarti bahwa skor rata-ratanya cukup rendah. Namun, bagaimana jika pengembang memperbaiki pergeseran tata letak yang kecil itu? Kemudian, skor dihitung hanya pada Jendela Sesi 1, yang berarti skor halaman hampir dua kali lipat. Hal ini akan sangat membingungkan dan membuat developer enggan untuk memperbaiki pergeseran tata letaknya dan mendapati bahwa skornya memburuk. Dan menghilangkan pergeseran tata letak kecil ini jelas akan sedikit lebih baik bagi pengalaman pengguna, sehingga seharusnya tidak memperburuk skornya.
Karena masalah ini terkait rata-rata, kami memutuskan untuk melanjutkan dengan jendela yang lebih kecil, dibatasi, dan maksimum. Jadi, dalam contoh di atas, Periode Sesi 2 akan diabaikan dan hanya jumlah pergeseran tata letak di Periode Sesi 1 yang akan dilaporkan.
Mengapa 5 detik?
Kami telah mengevaluasi beberapa ukuran jendela dan menemukan dua hal:
- Untuk periode yang lebih singkat, pemuatan halaman yang lebih lambat dan respons yang lebih lambat terhadap interaksi pengguna dapat membagi pergeseran tata letak menjadi beberapa jendela dan meningkatkan skor. Kami ingin menjaga jendela tetap besar agar tidak terjadi perlambatan.
- Ada beberapa halaman yang terus mengalami pergeseran tata letak kecil. Misalnya, halaman skor olahraga yang sedikit bergeser dengan setiap pembaruan skor. Pergeseran ini menjengkelkan, tetapi tidak akan semakin mengganggu seiring berjalannya waktu. Jadi kami ingin memastikan bahwa jendela dibatasi untuk jenis pergeseran tata letak ini.
Dengan mempertimbangkan dua hal ini, membandingkan berbagai ukuran jendela di banyak halaman web di dunia nyata, kami menyimpulkan bahwa 5 detik akan menjadi batas yang baik untuk ukuran jendela.
Bagaimana pengaruhnya terhadap skor CLS halaman saya?
Karena pembaruan ini membatasi CLS halaman, tidak akan ada halaman yang akan memiliki skor lebih buruk sebagai akibat dari perubahan ini.
Dan berdasarkan analisis kami, 55% tempat asal tidak akan melihat perubahan dalam CLS sama sekali pada persentil ke-75. Hal ini karena halaman mereka saat ini tidak memiliki pergeseran tata letak atau pergeseran yang dimilikinya sudah terbatas pada jendela sesi tunggal.
Origin lainnya akan mengalami peningkatan skor pada persentil ke-75 dengan perubahan ini. Sebagian besar pengguna hanya akan melihat sedikit peningkatan, tetapi sekitar 3% skor mereka akan meningkat dari rating yang "perlu peningkatan" atau "buruk" menjadi rating "baik". Halaman ini cenderung menggunakan scroller tanpa batas atau memiliki banyak update UI yang lambat, seperti yang dijelaskan di postingan sebelumnya.
Bagaimana cara mencobanya?
Kami akan segera mengupdate alat kami agar dapat menggunakan definisi metrik yang baru. Sebelum itu, Anda dapat mencoba CLS versi terbaru di situs mana pun menggunakan contoh penerapan JavaScript atau fork ekstensi Data Web.
Terima kasih kepada semua yang telah meluangkan waktu untuk membaca postingan sebelumnya dan memberikan masukan mereka.