Digital Transformation
CLS (Cumulative Layout Shift)
TL;DR: CLS (Cumulative Layout Shift) adalah salah satu dari tiga metrik Core Web Vitals Google yang mengukur stabilitas visual halaman. Skor baik adalah di bawah 0,1. Skor di atas 0,25 dianggap buruk dan bisa menurunkan ranking SEO.
Apa itu CLS?
Cumulative Layout Shift adalah metrik yang menjumlahkan setiap kali elemen di halaman berpindah posisi secara tidak terduga selama pengguna ada di halaman tersebut. Bayangkan saat membaca artikel di smartphone, lalu tiba-tiba sebuah iklan muncul di tengah dan menggeser paragraf ke bawah. Itu layout shift, dan akumulasi shift seperti ini yang dihitung CLS.
Google memperkenalkan CLS sebagai bagian dari Core Web Vitals pada 2020, dan menjadikannya sinyal peringkat resmi sejak 2021. Standar ini dipakai untuk menilai kualitas user experience secara objektif.
Threshold Skor CLS
| Skor | Kategori | Dampak |
|---|---|---|
| 0 sampai 0,1 | Good (Baik) | Lulus Core Web Vitals |
| 0,1 sampai 0,25 | Needs Improvement | Perlu optimasi |
| Di atas 0,25 | Poor | Berisiko menurunkan ranking |
Skor diambil dari persentil ke-75 (field data CrUX) pengguna nyata, bukan dari lab test.
Penyebab CLS Tinggi
Empat penyebab paling sering muncul di project klien:
- Image tanpa dimensi eksplisit yang merender lebih besar dari placeholder
- Font web yang loading lambat lalu mengubah ukuran teks (lihat font display swap)
- Iklan atau widget third-party yang muncul tanpa container preserved
- Konten async yang inject setelah halaman pertama kali render
Cara Mengurangi CLS
Pasang width dan height eksplisit di setiap image. Pakai aspect-ratio CSS untuk reserve space sebelum image load. Pakai skeleton loader dengan dimensi tetap untuk konten async. Hindari inject DOM di atas viewport setelah load.
Detail teknis ada di dokumentasi web.dev tentang CLS. Untuk metrik turunan, lihat LCP, INP, dan First Contentful Paint.
Kenapa Penting untuk Marketer Indonesia?
Mayoritas traffic e-commerce dan portfolio di Indonesia datang dari smartphone dengan koneksi 4G yang variabel. CLS tinggi membuat pengguna salah klik (misalnya klik tombol yang baru saja bergeser) dan meningkatkan bounce rate. Untuk landing page dengan CTA penting, CLS buruk langsung memotong conversion rate.
Pertanyaan Umum
Apakah CLS hanya dihitung saat load awal?
Tidak. CLS mengukur layout shift sepanjang sesi pengguna di halaman, tapi shift yang terjadi dalam 500 ms setelah interaksi pengguna (klik, scroll) tidak dihitung karena dianggap sebagai respons yang diharapkan.
Bagaimana cek CLS di production?
Pakai Search Console di tab Core Web Vitals, atau pasang web-vitals library yang kirim metrik ke analytics seperti GA4. Lab tools seperti Lighthouse memberi estimasi tapi bukan data real user.
Istilah Terkait