CLS (Cumulative Layout Shift) adalah metrik dalam Google Core Web Vitals yang mengukur stabilitas visual sebuah halaman web dengan menghitung frekuensi dan besarnya pergeseran tata letak (layout shift) yang tidak terduga selama proses pemuatan atau interaksi halaman.
Pergeseran tata letak terjadi ketika elemen yang sedang dilihat pengguna tiba-tiba berpindah posisi karena ada elemen lain (seperti gambar, iklan, atau tombol) yang terlambat dimuat di atasnya. CLS yang buruk menyebabkan pengalaman pengguna yang sangat mengganggu, seperti salah memencet tombol atau kehilangan baris bacaan.
Standar Skor CLS Google
Google menilai skor CLS berdasarkan jumlah total skor pergeseran yang terjadi:
- Sangat Baik (Good): Skor di bawah 0.1 (Target utama Super Kilat).
- Perlu Perbaikan (Needs Improvement): Skor antara 0.1 - 0.25.
- Buruk (Poor): Skor di atas 0.25.
Contoh Masalah Nyata Akibat CLS Buruk
Bayangkan seorang pelanggan sedang membaca deskripsi produk di toko online Anda dan berniat memencet tombol “Batal”. Tiba-tiba sebuah gambar banner promo selesai dimuat di bagian atas, mendorong seluruh konten ke bawah. Pelanggan secara tidak sengaja memencet tombol “Beli Sekarang”.
Kejadian seperti ini memicu frustrasi tinggi pengguna (rage click) dan menurunkan kepercayaan terhadap bisnis Anda.
Penyebab Utama CLS & Cara Mengatasinya
| Penyebab Utama CLS | Solusi & Optimasi Super Kilat |
|---|---|
Gambar tanpa Atribut width & height |
Selalu menyertakan atribut dimensi rasio aspek (aspect-ratio) pada setiap elemen gambar. |
| Iklan atau Widget yang Dimuat Dinamis | Memesan ruang kosong (placeholder/skeleton screen) dengan ukuran pasti sebelum iklan dimuat. |
| Pemuatan Web Font (FOUT/FOIT) | Menggunakan fitur font-display: swap dengan font metric override agar ukuran teks pas. |
| Injeksi Elemen DOM Dinamis | Menggunakan arsitektur modern seperti SSG (Static Site Generator) dan Tailwind CSS yang konsisten. |
Dampak CLS pada SEO & Mobile Usability
Google memasukkan CLS sebagai indikator resmi kepuasan pengguna dalam Mobile-First Indexing. Website dengan skor CLS tinggi (sering bergeser) akan dianggap memiliki kualitas UX buruk dan dapat mengalami penurunan peringkat dalam Indexing pencarian Google.
Rangkuman
CLS (Cumulative Layout Shift) adalah jaminan bahwa website Anda nyaman dibaca dan diinteraksi tanpa efek “meloncat-loncat”. Bersama Super Kilat, setiap website dirancang dengan presisi dimensi yang kokoh demi stabilitas visual 100%.