Rencana untuk meningkatkan metrik CLS agar lebih adil untuk halaman yang berumur panjang.
Dipublikasikan: 7 April 2021
Kami (Tim Metrik Kecepatan Chrome) baru-baru ini menguraikan riset awal kami ke dalam opsi untuk membuat metrik CLS lebih adil bagi halaman yang terbuka untuk waktu lama. Kami telah menerima banyak masukan yang sangat membantu dan setelah menyelesaikan analisis berskala besar, kami telah menyelesaikan perubahan yang ingin kami lakukan pada metrik: periode sesi maksimum dengan jeda 1 detik, yang dibatasi 5 detik.
Baca terus untuk mengetahui detailnya.
Bagaimana cara kami mengevaluasi opsi tersebut?
Kami telah meninjau semua masukan yang diterima dari komunitas developer dan mempertimbangkannya.
Kami juga menerapkan opsi terbaik di Chrome dan melakukan analisis metrik skala besar di jutaan halaman web. Kami memeriksa jenis situs yang ditingkatkan oleh setiap opsi, dan perbandingan opsi tersebut, terutama dengan 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 karena perubahan ini akan memperburuk skor situs Anda.
Titik keputusan
Mengapa interval sesi?
Dalam postingan sebelumnya, kita telah membahas beberapa strategi pembuatan jendela yang berbeda untuk mengelompokkan pergeseran tata letak sekaligus memastikan skor tidak bertambah tanpa batas. Masukan yang kami terima dari developer sangat mendukung strategi periode sesi karena strategi ini mengelompokkan perubahan tata letak secara paling intuitif.
Untuk meninjau periode sesi, berikut adalah contoh:
Pada contoh di atas, banyak pergeseran tata letak terjadi dari waktu ke waktu saat pengguna melihat halaman. Masing-masing diwakili oleh panel biru. Anda akan melihat di atas bahwa batang biru memiliki tinggi yang berbeda; batang tersebut mewakili skor dari setiap pergeseran tata letak. Periode sesi dimulai dengan pergeseran tata letak pertama dan terus diperluas hingga ada jeda 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 interval sesi dalam contoh. Serupa dengan definisi CLS saat ini, skor setiap pergeseran ditambahkan, sehingga skor setiap jendela adalah jumlah pergeseran tata letaknya masing-masing.
Berdasarkan riset awal, kami memilih celah 1 detik di antara jendela sesi, dan celah tersebut berfungsi dengan baik dalam analisis skala besar kami. Jadi, "Kesenjangan Sesi" yang ditunjukkan pada contoh di atas adalah 1 detik.
Mengapa periode sesi maksimum?
Kami mempersempit strategi ringkasan menjadi dua opsi dalam riset awal kami:
- Skor rata-rata dari semua periode sesi, untuk periode sesi yang sangat besar (periode sesi tanpa batas dengan jeda 5 detik di antaranya).
- Skor maksimum dari semua periode sesi, untuk periode sesi yang lebih kecil (dibatasi hingga 5 detik, dengan jeda 1 detik di antaranya).
Setelah riset awal, kami menambahkan setiap metrik ke Chrome sehingga kami dapat melakukan analisis skala besar terhadap jutaan URL. Dalam analisis skala besar, kami menemukan banyak URL dengan pola pergeseran tata letak seperti ini:
Di kanan bawah, Anda dapat melihat bahwa hanya ada satu pergeseran tata letak kecil di Jendela Sesi 2, sehingga memberikan skor yang sangat rendah. Artinya, skor rata-rata cukup rendah. Tetapi bagaimana jika pengembang memperbaiki pergeseran tata letak kecil itu? Kemudian, skor hanya dihitung pada Periode Sesi 1, yang berarti skor halaman hampir dua kali lipat. Developer akan merasa sangat bingung dan tidak bersemangat untuk meningkatkan pergeseran tata letak mereka hanya untuk menemukan bahwa skornya menjadi lebih buruk. Dan menghapus pergeseran tata letak kecil ini tentu akan sedikit lebih baik bagi pengalaman pengguna, sehingga tidak akan memperburuk skor.
Karena masalah rata-rata ini, kami memutuskan untuk melanjutkan dengan jendela maksimum yang lebih kecil dan dibatasi. Jadi, dalam contoh di atas, Jendela Sesi 2 akan diabaikan dan hanya jumlah pergeseran tata letak di Jendela Sesi 1 yang akan dilaporkan.
Mengapa 5 detik?
Kami mengevaluasi beberapa ukuran jendela dan menemukan dua hal:
- Untuk periode singkat, pemuatan halaman yang lebih lambat dan respons yang lebih lambat terhadap interaksi pengguna dapat memecah pergeseran tata letak menjadi beberapa periode dan meningkatkan skor. Kami ingin jendela tetap cukup besar sehingga tidak memicu pelambatan.
- Ada beberapa halaman dengan aliran pergeseran tata letak kecil yang terus-menerus. Misalnya, halaman skor olahraga yang bergeser sedikit dengan setiap pembaruan skor. Pergeseran ini memang mengganggu, tetapi tidak akan semakin mengganggu seiring waktu. Jadi kita ingin memastikan bahwa jendela tertutup untuk jenis pergeseran tata letak ini.
Dengan mempertimbangkan kedua 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 ada halaman yang akan memiliki skor lebih buruk akibat perubahan ini.
Selain itu, berdasarkan analisis kami, 55% origin tidak akan mengalami perubahan CLS sama sekali pada persentil ke-75. Hal ini karena halaman mereka saat ini tidak memiliki pergeseran tata letak atau pergeseran yang mereka miliki sudah terbatas pada satu jendela sesi.
Pengguna lain yang bergabung dalam origin akan melihat skor yang ditingkatkan pada persentil ke-75 dengan perubahan ini. Sebagian besar hanya akan melihat sedikit peningkatan, tetapi sekitar 3% akan melihat skor mereka meningkat dari rating "perlu peningkatan" atau "buruk" menjadi rating "baik". Halaman ini cenderung menggunakan scroll tanpa batas atau memiliki banyak update UI yang lambat, seperti yang dijelaskan dalam postingan sebelumnya.
Bagaimana cara mencobanya?
Kami akan segera mengupdate alat kami untuk menggunakan definisi metrik baru. Sampai saat 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.