Digital Transformation
Penyebab Cumulative Layout Shift (CLS)
TL;DR: Penyebab Cumulative Layout Shift (CLS) adalah elemen halaman yang tiba-tiba bergeser saat konten masih dimuat. Pemicu paling umum: gambar tanpa ukuran yang ditetapkan, iklan atau banner yang muncul belakangan, dan font yang berubah saat dimuat. Memperbaikinya berarti memesan ruang untuk elemen-elemen ini sebelum mereka tampil.
Apa itu penyebab CLS?
Cumulative Layout Shift mengukur seberapa sering elemen halaman bergeser tanpa diminta pengguna. Penyebabnya hampir selalu sama: browser menampilkan sebagian konten dulu, lalu elemen lain datang dan mendorong yang sudah tampil. Akibatnya tombol bergeser tepat saat hendak diklik, atau teks melompat saat sedang dibaca. CLS adalah salah satu dari tiga metrik dalam Core Web Vitals, dan termasuk yang paling sering memengaruhi kenyamanan membaca.
Berbeda dari metrik kecepatan murni, CLS mengukur stabilitas visual. Halaman bisa cepat tapi tetap terasa berantakan jika elemennya terus bergeser saat dimuat.
Pemicu paling umum
| Pemicu | Cara mencegah |
|---|---|
| Gambar tanpa lebar dan tinggi | Tetapkan dimensi atau rasio aspek sejak awal |
| Iklan atau embed muncul belakangan | Sediakan ruang kosong sesuai ukuran sebelum dimuat |
| Font yang berubah saat dimuat | Atur strategi pemuatan font agar pergeseran minimal |
| Konten disisipkan di atas yang sudah ada | Hindari menyuntik elemen di atas viewport setelah halaman tampil |
Kenapa Penting?
Bagi pengunjung website bisnis di Indonesia, banyak yang membuka situs lewat ponsel dengan koneksi tidak stabil. Pada kondisi ini, elemen yang dimuat bertahap lebih rentan bergeser, dan pergeseran itu mudah membuat orang salah klik atau frustrasi. Karena CLS dinilai Google sebagai bagian dari pengalaman halaman, memperbaikinya membantu sekaligus dari sisi kenyamanan pengguna dan sinyal SEO. Website yang dibangun dengan pendekatan SSG sering lebih mudah dijaga stabil, karena struktur halaman sudah ditentukan sejak proses build.
Pertanyaan Umum
Berapa skor CLS yang dianggap baik?
Google menetapkan ambang baik di bawah 0,1. Di atas 0,25 dianggap buruk, dan rentang di antaranya perlu diperbaiki.
Apakah CLS hanya soal gambar?
Tidak. Gambar tanpa dimensi memang pemicu umum, tapi iklan, embed, dan font yang berubah saat dimuat juga sering jadi penyebab. Memesan ruang untuk semua elemen dinamis adalah kuncinya.
Istilah Terkait