Digital Transformation
CLS (Cumulative Layout Shift), Detail Lengkap
CLS adalah metrik Core Web Vitals yang mengukur stabilitas visual halaman, yaitu seberapa sering elemen bergeser tak terduga selama loading. Skor baik di bawah 0,1, butuh perbaikan 0,1-0,25, buruk di atas 0,25.
TL;DR: CLS atau Cumulative Layout Shift mengukur seberapa sering elemen halaman bergeser tanpa interaksi pengguna selama loading. Pergeseran tak terduga merusak pengalaman, sering bikin pengguna salah klik tombol. Skor baik di bawah 0,1.
Apa itu CLS?
CLS atau Cumulative Layout Shift menjumlahkan skor pergeseran terbesar dalam jendela 5 detik selama sesi pengguna. Skor pergeseran dihitung dari area dampak (berapa banyak viewport yang terpengaruh) dikalikan jarak pergeseran (seberapa jauh elemen bergeser).
Sumber otoritatif: web.dev CLS. Pergeseran yang dipicu oleh interaksi pengguna seperti klik tombol atau membuka menu tidak dihitung.
Penyebab CLS Tinggi
| Penyebab | Solusi |
|---|---|
| Gambar tanpa atribut width/height | Selalu set dimensi eksplisit, atau pakai aspect-ratio CSS |
| Iklan atau embed yang load belakangan | Reservasi slot dengan min-height |
| Font web yang FOIT/FOUT | Pakai font-display: swap dan preload font kritikal |
| Konten yang inject di atas viewport | Jangan inject tanpa placeholder |
Dalam audit website klien saya di 2025, hampir 80% kasus CLS buruk berasal dari banner iklan adsense yang tidak punya container fixed. Setelah ditambah min-height dan aspect-ratio, CLS turun dari 0,38 ke 0,06. Lihat panduan [Web Vitals Attribution](/glosarium/web-vitals-attribution) untuk identifikasi elemen penyebab.
Kenapa Penting?
CLS buruk bikin pengguna salah klik tombol atau kehilangan posisi baca. Di halaman checkout, satu pergeseran tombol "Bayar" bisa berarti pengguna meng-klik "Batal" tanpa sengaja. Stabilitas visual berkorelasi langsung dengan trust dan completion rate.
Pertanyaan Umum
Apakah popup cookie banner mempengaruhi CLS?
Tidak, kalau popup muncul setelah interaksi pengguna seperti scroll atau klik. Tapi kalau auto-popup setelah load tanpa interaksi, ya berdampak.
Bagaimana cara debug CLS di Chrome?
Buka DevTools, tab Performance, rekam load halaman. Layout shift ditandai dengan kotak merah di timeline. Atau pakai library web-vitals/attribution untuk identifikasi elemen presisi.
Istilah Terkait