CLS (Cumulative Layout Shift)

TL;DR: CLS (Cumulative Layout Shift) adalah salah satu dari tiga metrik Core Web Vitals Google yang mengukur stabilitas visual sebuah halaman web. Skor dihitung dari seberapa sering dan seberapa jauh elemen halaman bergeser tanpa diinginkan pengguna. Target skor baik adalah di bawah 0,1.

Apa itu CLS?

CLS, atau Cumulative Layout Shift, adalah metrik yang mengukur akumulasi pergeseran elemen visual di sebuah halaman selama proses loading dan interaksi. Bayangkan kamu sedang membaca artikel di smartphone, lalu tiba-tiba teks loncat ke bawah karena iklan baru saja muncul di atasnya. Pengalaman seperti itulah yang diukur oleh CLS.

Metrik ini diperkenalkan Google sebagai bagian dari inisiatif Core Web Vitals untuk menstandarkan pengukuran user experience. Bersama LCP dan INP, CLS menjadi sinyal peringkat resmi di Google Search sejak 2021.

Cara Kerja Skor CLS

Google menghitung CLS dengan rumus: impact fraction dikali distance fraction untuk setiap layout shift, lalu diakumulasi dalam satu sesi. Hasilnya angka tanpa satuan, semakin kecil semakin baik.

Pergeseran yang dipicu oleh interaksi pengguna (klik tombol, buka menu) tidak dihitung sebagai layout shift selama terjadi dalam 500 ms setelah input. Aturan ini disebut "user-initiated input exclusion".

Penyebab Umum CLS Tinggi

Tiga penyebab paling sering ditemui di proyek web Indonesia, terutama UMKM yang baru membangun website pertama:

1. Gambar tanpa atribut width dan height. Browser tidak tahu seberapa besar ruang yang harus disiapkan, sehingga teks loncat saat gambar selesai dimuat.
2. Iklan, embed, atau iframe yang di-inject belakangan. Banner adsense atau widget chat sering menggeser konten di atasnya.
3. Web font yang menggantikan fallback font. Disebut FOIT (Flash of Invisible Text) atau FOUT (Flash of Unstyled Text), terjadi saat font kustom selesai diunduh dan ukuran karakter berubah.

Kenapa Penting?

CLS yang tinggi merusak kepercayaan pengguna. Dalam pengalaman membangun website klien personal branding seperti Yuanita Sekar, pengunjung yang baru pertama kali mendarat sering memutuskan dalam 5 detik pertama apakah situs ini kredibel atau tidak. Layout yang loncat-loncat memberikan kesan amatir, bahkan ketika UI/UX dasarnya sudah baik.

Dari sisi SEO, dokumen resmi Google Search Central menempatkan Core Web Vitals sebagai bagian dari Page Experience signal. Skor CLS buruk berkontribusi pada penurunan peringkat di pencarian mobile, yang menjadi mayoritas traffic di Indonesia. Detail teknis pengukuran tersedia di dokumentasi web.dev tentang CLS.

Cara Memperbaiki CLS

Praktik standar yang direkomendasikan Google dan komunitas web performance:

• Selalu set atribut width dan height pada tag <img> dan <video>, atau gunakan CSS aspect-ratio.
• Reservasi ruang untuk iklan dan embed dengan placeholder berdimensi tetap.
• Gunakan font-display: optional atau swap plus preload font kritikal supaya transisi font tidak menggeser konten.
• Hindari menyisipkan konten di atas konten yang sudah dimuat, kecuali sebagai respons interaksi pengguna.

Pertanyaan Umum

Apakah CLS sama dengan kecepatan loading?

Tidak. CLS mengukur stabilitas visual, bukan kecepatan. Halaman yang cepat dimuat tetap bisa punya CLS buruk jika elemen-elemen masih bergeser setelah loading selesai. Untuk kecepatan, lihat metrik LCP.

Apakah CLS hanya dihitung saat halaman pertama dibuka?

Tidak. CLS dihitung sepanjang sesi pengguna di halaman tersebut, termasuk pergeseran yang terjadi saat scroll atau interaksi pasif lainnya.

Bagaimana cara mengecek CLS website saya?

Gunakan PageSpeed Insights, Chrome DevTools panel Performance, atau Lighthouse. Untuk data lapangan nyata, cek Chrome User Experience Report (CrUX) yang terintegrasi di Google Search Console.

Structured Data

{
  "@context": "https://schema.org",
  "@type": "DefinedTerm",
  "name": "CLS (Cumulative Layout Shift)",
  "description": "Metrik Core Web Vitals yang mengukur stabilitas visual halaman web. Skor baik di bawah 0,1.",
  "inDefinedTermSet": "https://vitoatmo.com/glosarium",
  "url": "https://vitoatmo.com/glosarium/cls"
}

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {"@type": "Question", "name": "Apakah CLS sama dengan kecepatan loading?", "acceptedAnswer": {"@type": "Answer", "text": "Tidak. CLS mengukur stabilitas visual, bukan kecepatan. Halaman yang cepat dimuat tetap bisa punya CLS buruk jika elemen-elemen masih bergeser setelah loading selesai."}},
    {"@type": "Question", "name": "Apakah CLS hanya dihitung saat halaman pertama dibuka?", "acceptedAnswer": {"@type": "Answer", "text": "Tidak. CLS dihitung sepanjang sesi pengguna di halaman tersebut, termasuk pergeseran yang terjadi saat scroll atau interaksi pasif lainnya."}},
    {"@type": "Question", "name": "Bagaimana cara mengecek CLS website saya?", "acceptedAnswer": {"@type": "Answer", "text": "Gunakan PageSpeed Insights, Chrome DevTools panel Performance, atau Lighthouse. Untuk data lapangan nyata, cek Chrome User Experience Report (CrUX) di Google Search Console."}}
  ]
}