Cara Memperbaiki Cumulative Layout Shift (CLS)

Apa Itu CLS?

Cumulative Layout Shift (CLS) adalah metrik Core Web Vitals yang mengukur stabilitas tampilan halaman. Jika elemen halaman bergeser saat loading, nilai CLS naik dan pengalaman pengguna terganggu.

CLS mengukur seberapa banyak elemen halaman bergeser secara visual tanpa interaksi pengguna. Google menetapkan skor ≤ 0,1 sebagai kategori baik. Nilai tinggi artinya halaman tidak stabil.

Penyebab CLS Buruk

• Gambar atau video tanpa ukuran lebar dan tinggi
• Iklan atau pop-up yang muncul mendadak
• Font eksternal yang lambat dimuat (FOIT/FOUT)
• Elemen dinamis tanpa placeholder
• Animasi atau transisi yang tidak diatur dengan baik

Cara Memperbaiki CLS

1. Tentukan Ukuran Gambar & Video

• Selalu gunakan atribut width dan height
• Atau gunakan CSS aspect-ratio agar ruang dialokasikan sejak awal

2. Gunakan Placeholder untuk Konten Dinamis

• Terapkan skeleton loading untuk teks/gambar
• Pastikan elemen tetap memiliki ruang meski data belum termuat

3. Atur Iklan dengan Benar

• Sediakan ruang tetap untuk slot iklan
• Hindari iklan yang muncul di atas konten tanpa peringatan

4. Optimasi Font

• Gunakan font-display: swap agar teks tampil dengan font default sebelum custom font dimuat
• Preload font penting untuk mempercepat rendering

5. Gunakan Animasi & Transisi yang Halus

• Hindari animasi yang mendorong layout keseluruhan
• Gunakan transform & opacity alih-alih mengubah ukuran/layout

Tools untuk Mengukur CLS

• Google PageSpeed Insights → laporan CLS dengan rekomendasi perbaikan
• Chrome DevTools → memantau pergeseran layout real-time
• Web Vitals Extension → cek langsung nilai CLS saat browsing
• Google Search Console → laporan CLS skala besar di seluruh halaman

Checklist Perbaikan CLS

• Tambahkan atribut ukuran untuk semua gambar & video
• Gunakan aspect-ratio atau placeholder untuk elemen dinamis
• Sediakan slot iklan dengan ukuran tetap
• Terapkan font-display: swap untuk font eksternal
• Hindari animasi layout yang mendadak

FAQ tentang CLS

1. Apa standar nilai CLS yang baik? Skor CLS sebaiknya ≤ 0,1 agar dianggap stabil oleh Google.

2. Apakah CLS hanya dipengaruhi oleh iklan? Tidak. Gambar, font, dan elemen dinamis juga berkontribusi.

3. Bagaimana cara cepat memperbaiki CLS? Tambahkan ukuran pada gambar/video, preload font, dan gunakan placeholder untuk elemen dinamis.