Digital Transformation
Cumulative Layout Shift (CLS)
TL;DR: Cumulative Layout Shift (CLS) mengukur jumlah pergeseran tata letak halaman yang tidak disebabkan oleh interaksi pengguna selama sesi load. Sejak 2021, CLS jadi bagian dari Core Web Vitals dan memengaruhi peringkat Google. Skor baik di bawah 0,1, perlu perbaikan 0,1 sampai 0,25, buruk di atas 0,25.
Apa itu Cumulative Layout Shift?
CLS menghitung total skor dari setiap layout shift tak terduga di halaman. Layout shift terjadi ketika elemen yang sudah dirender pindah posisi tanpa pengguna mengklik atau mengetuk. Skor satu shift dihitung dari impact fraction (seberapa luas viewport yang terkena) dikali distance fraction (seberapa jauh elemen berpindah).
Contoh paling umum: pengguna mau mengetuk tombol "Beli", lalu banner iklan muncul di atasnya dan tombol pindah ke bawah, sehingga ketukan jatuh ke link salah. Frustrasi ini yang ingin Google ukur dengan CLS.
Penyebab CLS Tinggi
Empat penyebab dominan dari pengalaman menangani audit website klien:
- Gambar tanpa dimensi: Tag
<img>atau<video>tanpa atributwidthdanheightsehingga browser tidak bisa reservasi ruang. - Iframe dan iklan tanpa container: Embed YouTube, iklan AdSense, atau widget pihak ketiga yang lebar dan tinggi baru ditentukan setelah JavaScript jalan.
- Font swap mendadak: Font fallback dan font kustom punya metric berbeda, sehingga teks reflow setelah font selesai diunduh.
- Animasi yang menggeser layout: Animasi pakai properti
width,height,top, atauleftalih-alihtransform.
Cara Memperbaiki CLS
| Area | Aksi konkret |
|---|---|
| Gambar/Video | Selalu set width dan height, atau pakai next/image yang otomatis reservasi space |
| Iklan/Embed | Bungkus dengan container yang punya tinggi minimum |
| Font | font-display: optional atau swap plus preload, atau pakai size-adjust untuk match metric |
| Animasi | Pakai transform: translate() dan opacity saja, hindari geser layout |
| Inject content | Jangan sisipkan banner/notifikasi di atas konten yang sudah dirender |
Kenapa Penting?
CLS adalah satu-satunya Core Web Vital yang langsung terasa "bikin kesal" oleh pengguna. Riset internal Google (web.dev) menyebut situs e-commerce dengan CLS di bawah 0,1 punya conversion rate lebih tinggi dibanding kompetitor dengan CLS tinggi. Untuk landing page bisnis di Indonesia yang mengandalkan tombol WhatsApp atau form lead, satu shift yang menggeser tombol bisa berarti satu lead hilang.
Pertanyaan Umum
Apakah CLS hanya dihitung saat load awal?
Tidak. Sejak update 2021, CLS dihitung sepanjang sesi pengguna, dalam jendela 5 detik berturut-turut. Total skor sesi adalah jendela dengan akumulasi shift tertinggi.
Apakah scroll bisa menambah CLS?
Tidak. Pergeseran karena scroll atau interaksi pengguna dianggap "expected" dan tidak masuk perhitungan. Hanya shift yang tidak diawali interaksi dalam 500 ms yang dihitung.
Istilah Terkait