Digital Transformation
Cumulative Layout Shift (CLS)
CLS adalah metrik Google Core Web Vitals yang mengukur seberapa sering elemen halaman bergeser tidak terduga selama dimuat, dengan skor baik di bawah 0,1.
TL;DR: Cumulative Layout Shift (CLS) adalah salah satu dari tiga metrik Google Core Web Vitals yang mengukur stabilitas visual sebuah halaman. CLS menghitung seberapa sering elemen bergeser tidak terduga saat halaman dimuat. Skor baik berada di bawah 0,1, perlu perbaikan 0,1 hingga 0,25, dan buruk di atas 0,25.
Apa itu Cumulative Layout Shift?
Cumulative Layout Shift menjawab keluhan paling umum pengguna web mobile: tombol yang tiba-tiba berpindah saat hendak ditekan, lalu jari menekan iklan yang baru saja muncul. CLS mengukur akumulasi pergeseran tata letak yang tidak diharapkan selama sesi pengguna, dan menjadi bagian resmi sinyal peringkat Google sejak update Page Experience pada 2021.
Skor dihitung dari hasil kali fraksi area yang berpindah dengan jarak pergeseran. Pergeseran yang dipicu interaksi pengguna dalam 500 ms tidak dihitung. Bersama Largest Contentful Paint (LCP) dan INP, CLS membentuk tiga pilar Core Web Vitals.
Penyebab Umum CLS Buruk
| Sumber Masalah | Solusi |
|---|---|
| Gambar tanpa atribut width dan height | Definisikan dimensi eksplisit atau gunakan aspect-ratio CSS |
| Iklan atau embed yang mengisi ruang setelah load | Reservasi slot dengan min-height |
| Web font yang ganti tampilan saat dimuat | Pakai font-display: swap dengan fallback metric matching |
| Konten yang di-inject lewat JavaScript di atas konten lain | Inject di bawah viewport atau setelah interaksi |
Kenapa Penting?
Pergeseran tata letak menyebabkan dua kerugian sekaligus, yaitu pengalaman pengguna yang frustrasi dan klik tidak sengaja yang merusak metrik konversi. Untuk e-commerce Indonesia, CLS yang buruk pada halaman checkout kerap menyebabkan pengguna menekan tombol yang salah, lalu meninggalkan transaksi. Google juga menjadikan CLS faktor peringkat, sehingga halaman dengan CLS tinggi cenderung kalah bersaing di SERP mobile.
Pertanyaan Umum
Apakah CLS hanya diukur saat halaman pertama dimuat?
Tidak. Sejak Juni 2021 Google mengukur Session Window CLS, yaitu jendela 5 detik aktivitas, lalu mengambil skor jendela terburuk sepanjang sesi.
Berapa target skor CLS yang aman?
Di bawah 0,1 untuk 75 persen sesi, baik di desktop maupun mobile. Angka ini diukur Google lewat Chrome User Experience Report.