Google Menjelaskan Cara Mengukur Pergeseran Tata Letak Kumulatif (CLS)

Google Web Performance Advocate mengklarifikasi pengukuran Cumulative Layout Shift (CLS), membantu pengembang web dalam mengoptimalkan Core Web Vitals.

• Advokat Kinerja Web Google, Barry Pollard, memberikan penjelasan CLS yang terperinci.
• Klarifikasi ini penting karena CLS merupakan Core Web Vital.
• Memahami perhitungan CLS membantu pengembang mengoptimalkan situs web untuk pengalaman pengguna yang lebih baik.

Google Web Performance Advocate mengklarifikasi pengukuran Cumulative Layout Shift (CLS), membantu pengembang web dalam mengoptimalkan Core Web Vitals.

• Advokat Kinerja Web Google, Barry Pollard, memberikan penjelasan CLS yang terperinci.
• Klarifikasi ini penting karena CLS merupakan Core Web Vital.
• Memahami perhitungan CLS membantu pengembang mengoptimalkan situs web untuk pengalaman pengguna yang lebih baik.

Bagaimana cara mengukurnya? Pollard menjawab pertanyaan ini dalam thread tentang X.

Memahami Pengukuran CLS

Pollard memulai dengan menjelaskan sifat pengukuran CLS:

“CLS tidak memiliki satuan, tidak seperti LCP dan INP yang diukur dalam satuan detik/milidetik.”

Dia menjelaskan lebih lanjut:

“Setiap pergeseran tata letak dihitung dengan mengalikan dua persentase atau pecahan: Apa yang bergerak (fraksi dampak) Seberapa banyak pergerakannya (fraksi jarak).”

Metode perhitungan ini membantu mengukur tingkat keparahan pergeseran tata letak.

Seperti yang dijelaskan Pollard:

“Seluruh viewport bergerak ke bawah sepenuhnya – itu lebih buruk daripada hanya separuh viewport yang bergerak ke bawah sepenuhnya. Seluruh viewport bergerak ke bawah sedikit? Itu tidak seburuk seluruh viewport bergerak ke bawah banyak.”

Skenario terburuk

Pollard menggambarkan skenario terburuk untuk satu pergeseran tata letak:

“Pergeseran tata letak maksimum terjadi jika 100% area pandang (fraksi dampak = 1,0) dipindahkan satu area pandang penuh ke bawah (fraksi jarak = 1,0).

Hal ini memberikan skor pergeseran tata letak sebesar 1,0 dan pada dasarnya merupakan jenis pergeseran terburuk.”

Namun, ia mengingatkan kita tentang sifat kumulatif CLS:

“CLS adalah Cumulative Layout Shift, dan kata pertama (kumulatif) itu penting. Kami mengambil semua pergeseran individual yang terjadi dalam waktu singkat (maksimal 5 detik) dan menjumlahkannya untuk mendapatkan skor CLS.”

Pollard menjelaskan alasan di balik jendela pengukuran 5 detik:

“Awalnya kami mencatat SEMUA perubahan, tetapi itu tidak benar-benar mengukur UX—terutama untuk halaman yang dibuka dalam waktu lama (pikirkan SPA atau email). Mengukur semua perubahan berarti, jika diberi waktu yang cukup, bahkan halaman terbaik pun akan gagal!”

Ia juga mencatat skor CLS maksimum teoritis:

“Karena setiap elemen hanya dapat bergeser saat bingkai digambar dan kami memiliki batasan 5 detik dan sebagian besar perangkat berjalan pada 60 fps, maka batasan teoritis pada CLS adalah 5 detik * 60 fps * 1,0 pergeseran maksimum = 300.”

Menafsirkan Skor CLS

Pollard membahas cara menafsirkan skor CLS :

“… ada baiknya untuk menganggap CLS sebagai persentase pergerakan. Ambang batas yang baik sebesar 0,1 berarti sekitar halaman bergerak 10%—yang bisa berarti seluruh halaman bergerak 10%, atau setengah halaman bergerak 20%, atau banyak pergerakan kecil yang setara dengan keduanya.”

Mengenai nilai ambang batas tertentu, Pollard menjelaskan:

“Jadi mengapa 0,1 ‘baik’ dan 0,25 ‘buruk’? Itu dijelaskan di sini sebagai kombinasi dari apa yang kita inginkan (CLS = 0!) dan apa yang dapat dicapai … 0,05 sebenarnya dapat dicapai pada median, tetapi untuk banyak lokasi tidak demikian, jadi nilainya sedikit lebih tinggi.”

Mengapa Hal Ini Penting

Wawasan Pollard memberi pengembang web dan profesional SEO pemahaman yang lebih jelas tentang pengukuran dan pengoptimalan CLS.

Saat Anda bekerja dengan CLS, ingatlah poin-poin berikut:

• CLS tidak memiliki satuan dan dihitung berdasarkan fraksi dampak dan jarak.
• Sifatnya kumulatif, mengukur pergeseran dalam kurun waktu 5 detik.
• Ambang batas “baik” sebesar 0,1 kira-kira setara dengan 10% pergerakan viewport.
• Skor CLS dapat melebihi 1,0 karena adanya beberapa shift yang bertambah.
• Ambang batas (0,1 untuk “baik”, 0,25 untuk “buruk”) menyeimbangkan kinerja ideal dengan tujuan yang dapat dicapai.

Dengan wawasan ini, Anda dapat membuat penyesuaian untuk mencapai ambang batas Google.