Cumulative Layout Shift atau CLS adalah Core Web Vital yang mengukur stabilitas visual halaman. Nilainya bertambah ketika elemen yang terlihat berpindah secara tidak terduga tanpa interaksi pengguna yang menjelaskan perpindahan tersebut. Contoh paling mudah adalah tombol yang bergeser tepat ketika ingin diklik karena gambar atau iklan baru muncul di atasnya.
Nilai CLS yang dianggap baik adalah 0,1 atau kurang pada persentil ke-75 kunjungan. Berbeda dari LCP dan INP yang berbasis waktu, CLS menggunakan skor pergeseran layout.
Mengapa layout shift buruk bagi pengguna?
Pergeseran mendadak membuat pengguna kehilangan posisi membaca, salah menekan tombol, atau merasa halaman tidak stabil. Masalah ini lebih dari sekadar estetika karena dapat mengganggu tindakan penting seperti checkout, formulir, atau navigasi.
Penyebab CLS yang paling umum
Gambar tanpa dimensi
Jika browser belum mengetahui rasio atau dimensi gambar, ia tidak tahu berapa ruang yang harus disediakan sebelum file selesai dimuat. Saat gambar muncul, konten di bawahnya terdorong.
Iklan, embed, dan widget tanpa slot tetap
Komponen yang disisipkan setelah render dapat mendorong konten jika ruangnya tidak dipersiapkan. Sediakan ukuran atau minimum space yang masuk akal.
Font web
Font fallback dan font final dapat memiliki ukuran glyph berbeda sehingga pergantian font mengubah panjang baris dan tinggi blok teks. Pilih fallback yang mendekati metric font utama dan gunakan strategi loading yang tepat.
Konten dinamis yang disisipkan di atas
Banner, notifikasi, atau elemen personalisasi yang baru muncul setelah halaman terlihat dapat menggeser seluruh konten. Pertimbangkan overlay atau ruang yang sudah dipesan.
Cara memperbaiki CLS pada gambar
Tentukan atribut width dan height atau gunakan CSS aspect-ratio agar browser dapat menghitung ruang sebelum resource selesai dimuat. Responsive image tetap dapat bekerja karena browser menggunakan rasio tersebut untuk menjaga slot.
Cara menangani iklan dan embed
Tentukan container dengan ukuran yang stabil. Jika ukuran final bervariasi, gunakan minimum height berdasarkan ukuran yang realistis. Hindari mengosongkan slot secara tiba-tiba setelah konten terisi jika hal itu menggeser halaman.
CLS dan animasi
Tidak semua gerakan visual dihitung sebagai layout shift yang buruk. Transform dan opacity umumnya dapat menghasilkan animasi tanpa memindahkan layout flow seperti perubahan top/left atau ukuran yang memicu relayout. Pilih teknik animasi yang tidak mengganggu alur dokumen.
Bagaimana menemukan sumber CLS?
Gunakan Performance panel atau tooling yang menampilkan layout shift region. Core Web Vitals IDZ SEO dapat digunakan sebagai titik awal untuk melihat metrik, lalu debugging dilanjutkan pada elemen yang benar-benar bergerak.
Perbedaan CLS lab dan field
Field data dapat menangkap pergeseran yang hanya terjadi pada kondisi tertentu: banner pengguna tertentu, iklan, consent, koneksi lambat, atau interaksi panjang. Lab test mungkin tidak memicu semua kondisi tersebut. Karena itu hasilnya dapat berbeda. Lihat cara memahami perbedaan hasil PageSpeed.
Jangan memperbaiki CLS dengan menyembunyikan konten penting
Tujuan optimasi bukan sekadar menurunkan skor. Menghilangkan komponen yang berguna atau membuat interface tidak jelas bukan perbaikan yang baik. Cari cara untuk mempertahankan fungsi sambil menyediakan ruang dan urutan render yang stabil.
CLS dalam konteks Core Web Vitals
CLS melengkapi metrik loading dan responsivitas. Baca panduan Core Web Vitals untuk melihat hubungan ketiganya. Jika hero adalah sumber LCP, menetapkan dimensinya sering sekaligus membantu stabilitas; lihat juga panduan LCP.
Kesimpulan
CLS yang baik berasal dari layout yang dapat diprediksi browser sejak awal. Tetapkan dimensi media, sediakan slot komponen dinamis, kelola font dengan hati-hati, dan hindari menyisipkan konten di atas viewport secara tiba-tiba. Diagnosis harus melihat elemen yang benar-benar bergerak, bukan hanya skor akhir.
CLS Mengukur Pergeseran Layout yang Tidak Terduga
Cumulative Layout Shift menilai stabilitas visual. Target kategori baik adalah CLS hingga 0,1 pada persentil ke-75. Masalah muncul ketika elemen yang sudah terlihat berpindah tanpa tindakan pengguna, misalnya gambar tanpa ruang, banner yang disisipkan di atas konten, font yang mengubah ukuran teks secara ekstrem, atau komponen pihak ketiga yang muncul terlambat.
CLS bukan sekadar soal tampilan. Pergeseran dapat membuat pengguna salah menekan tombol atau kehilangan posisi baca, sehingga perbaikannya memiliki manfaat langsung pada pengalaman.
Cadangkan Ruang sebelum Resource Datang
Berikan width dan height atau aspect-ratio pada gambar dan video sehingga browser dapat menghitung ruang sebelum file selesai dimuat. Untuk iklan atau widget, sediakan container dengan ukuran yang masuk akal. Hindari menyisipkan konten baru di atas area yang sedang dibaca kecuali itu akibat tindakan pengguna.
Pada font, gunakan strategi loading yang mengurangi perubahan metrik huruf dan cek apakah fallback sangat berbeda dari font final. Animasi sebaiknya memakai transform jika memungkinkan daripada properti yang memicu layout.
Cari Sumber Shift, Bukan Hanya Skornya
Gunakan DevTools atau laporan performance untuk melihat layout shift entries dan elemen yang bergerak. PageSpeed Checker dapat memberi indikasi awal, tetapi diagnosis akhir perlu melihat halaman dan komponen spesifik. Setelah perbaikan, cek mobile serta desktop dan pantau data pengguna nyata.
Periksa Pergeseran yang Terjadi Setelah Interaksi
Beberapa layout shift muncul setelah banner consent, formulir, accordion, atau komponen dinamis bekerja. Tidak semua pergeseran setelah interaksi dihitung sama, tetapi semuanya tetap perlu dinilai dari sisi pengalaman. Pastikan komponen membuka ruang secara terprediksi dan tidak mendorong tombol penting tepat ketika pengguna hendak menekannya.
