Cumulative Layout Shift (CLS) digunakan Google untuk mengukur pengalaman pengguna saat halaman dimuat. Ini melihat seberapa besar elemen dan pergeserannya selama proses pemuatan.
Penyebab CLS itu umumnya karena:
- Gambar tanpa ukuran yang jelas
- Iklan, atau iframe tanpa ukuran dimensi yang jelas
- Konten yang dihasilkan lewat suntikan javascript
- Font yang digunakan di akhir pemuatan
Berapa Skor CLS yang Bagus?
Bila Anda meningkatkan dengan pengukuran Google, maka mereka memiliki kalkulasi angka, tentang berapa skor untuk CLS yang baik, atau bahkan buruk.
Skor baik, bila nilai CLS antara 0-0,1. CLS bernilai kurang, sebesar 0,1-0,25. Sedangkan nilai yang buruk, lebih dari 0,25.
Cara Mengukur CLS Blog Anda
Karena CLS memegang peranan penting, maka perlu kita ketahui tentang bagaimana mengukur CLS untuk blog Anda.
Ada banyak alat gratis yang dapat digunakan, salah satunya dan yang paling sering Saya gunakan, adalah Pagespeed Insight.
Alat Pagespeed milik Google ini, benar-benar menghasilkan pengukuran dan deskripsi masalah yang jelas (bila ditemukan masalah). Misalnya, lihatlah bagaimana hasil pengukuran dari halaman yang Saya uji:
Itu menghasilkan bagian-bagian khusus, yang ditandai sebagai elemen yang memiliki pergerakan saat halaman dimuat.
Ini cukup membantu pengguna, untuk langsung memperbaiki CLS yang dimilikinya, untuk meminimalkan skor yang ada.
Jika Anda memiliki skor yang masih tergolong perlu perbaikan, segeralah lakukan perubahan. Itulah yang akan dibahas berikutnya.
Cara Meningkatkan Skor CLS Blog
Ini landasannya:
Semakin kecil skor CLS, semakin baik.
Laporan Google Search Console belakangan ini muncul di email saya, dan menerangkan bahwa masalah CLS yang lebih dari 0,1 detik. Di halaman Google Search Console, saya melihat laporan ini:
28 artikel saya membutuhkan peningkatan.
...dan membuka laporannya untuk melihat seberapa besar CLS ini mempengaruhi tampilan:
Sekarang, kita akan mulai memperbaiki permasalahan CLS ini. Mari kita teruskan ke langkah-langkahnya.
1. Diagnosa Halaman dengan Pagespeed Insight
Buka Pagespeed, dan lakukan diagnosa untuk URL Anda.
2. Ketahui Elemen yang Mengalami Pergeseran
Tampilan hasil diagnosa sudah cukup untuk memaparkan dengan jelas masalah-masalah kecepatan pada URL yang dianalisis.
Pilih CLS, untuk filter khusus:
Setelah diaktifkan, semua elemen yang ditandai memiliki pergeseran tata letak akan ditampilkan. Ini mempermudah pekerjaan Anda.
Sekarang, kita harus mengetahui, elemen yang akan diperbaiki. Mari kita teruskan.
3. Perbaiki Elemen CLS seperti Gambar atau Iframe
Lihatlah hasil diagnosa yang muncul:
Dalam kasus Saya, halaman ditandai sebagai "Elemen media tidak memiliki ukuran yang jelas". Inilah sumber masalahnya.
Jika Anda tidak menemukan ukuran yang jelas dalam elemen Gambar, tambahkan atribut width dan height pada elemen gambar Anda.
Pada dasarnya, menyediakan ruang untuk gambar maupun iframe sangat dianjurkan. Jadi, saya menerapkan ini untuk mengurangi angka CLS.
Kesimpulan
Cumulative Layout Shift (CLS) penting karena berhubungan langsung dengan User Experience (UX) dan SEO.
CLS mengukur seberapa banyak elemen pada halaman web berpindah secara tiba-tiba saat dimuat. Jika halaman berubah tata letak saat dibuka, itu bisa mengganggu pengguna.
Semakin kecil skor CLS, semakin baik. Bila Anda memiliki skor yang tinggi, ceritakan dengan Saya, lewat kolom Komentar.
Komentar