Cumulative Layout Shift (CLS) adalah salah satu metrik penting dalam standar pengukuran performa web Core Web Vitals yang dikembangkan oleh Google. Metrik ini mengukur stabilitas visual sebuah halaman web dengan menghitung seberapa sering elemen visual (seperti gambar, tombol, teks, atau iklan) bergeser secara tidak terduga saat halaman sedang dimuat.
Pergeseran tata letak yang terjadi secara tiba-tiba sangat mengganggu pengalaman pengguna. Bayangkan saat Anda hendak menekan sebuah tombol, tiba-tiba sebuah iklan atau gambar termuat di bagian atas dan mendorong tombol tersebut ke bawah, sehingga Anda justru mengklik tautan yang salah. CLS hadir untuk mengukur dan meminimalisir frustrasi pengguna akibat masalah stabilitas visual tersebut.
Matriks Poin Kunci Cumulative Layout Shift
| Aspek CLS | Keterangan Teknis |
|---|---|
| Definisi | Metrik Core Web Vitals untuk mengukur stabilitas visual halaman. |
| Fokus Pengukuran | Pergeseran elemen tak terduga selama masa aktif halaman web. |
| Standar Skor Baik | Di bawah 0.1 |
| Standar Skor Buruk | Di atas 0.25 |
Penyebab Utama Pergeseran Tata Letak
Memahami akar permasalahan CLS adalah langkah awal untuk meningkatkan performa situs. Berdasarkan analisis performa web modern, beberapa faktor utama yang sering memicu tingginya skor CLS meliputi:
- Gambar dan Video Tanpa Dimensi: Media yang disematkan tanpa atribut
widthdanheightyang jelas membuat peramban tidak tahu berapa banyak ruang yang harus dialokasikan sebelum media tersebut selesai diunduh. - Iklan Dinamis: Slot iklan yang dimuat secara asinkron sering kali mengubah ukuran atau mendorong konten di sekitarnya setelah konten utama sudah tampil di layar pengguna.
- Konten Injeksi Pihak Ketiga: Widget media sosial, banner cookie, atau elemen sematan (embed) yang dimuat belakangan dapat menggeser tata letak yang sudah stabil.
- Web Font yang Belum Optimal: Penggunaan web font yang menyebabkan masalah FOUT (Flash of Unstyled Text) atau FOIT (Flash of Invisible Text) dapat mengubah ukuran blok teks saat font kustom selesai diterapkan.
Cara Mengatasi dan Mengoptimalkan Skor CLS
Untuk memastikan situs web memenuhi standar kenyamanan pengguna dan siap diakses oleh berbagai agen otomatisasi maupun browser modern, pengembang perlu menerapkan beberapa langkah teknis pencegahan CLS:
- Selalu tentukan atribut lebar dan tinggi (
widthdanheight) pada elemen gambar dan video, atau gunakan rasio aspek CSS modern (aspect-ratio). - Sediakan ruang cadangan (reserved space) atau wadah dengan ukuran tetap untuk slot iklan dan elemen dinamis pihak ketiga.
- Hindari menyisipkan konten baru di atas konten yang sudah ada kecuali sebagai respons langsung terhadap tindakan pengguna (seperti klik tombol).
- Gunakan properti CSS
font-display: optionalatau pastikan sistem memuat font dengan transisi yang halus tanpa mengubah tata letak blok teks secara drastis.