Digital Transformation
Mitigasi CLS (Cumulative Layout Shift)
TL;DR: Mitigasi CLS adalah cara mencegah pergeseran tata letak yang mengganggu saat halaman dimuat. Teknik utamanya: memesan dimensi gambar dan iklan, memuat font tanpa lonjakan, dan menghindari penyisipan konten di atas konten yang sudah terlihat. Target skor CLS yang baik adalah di bawah 0,1.
Apa itu Mitigasi CLS?
Mitigasi CLS adalah praktik teknis untuk menjaga elemen halaman tetap stabil selama pemuatan. CLS sendiri, bagian dari Core Web Vitals, mengukur seberapa sering elemen bergeser tanpa diinginkan pengguna. Analoginya seperti membaca koran yang tiba-tiba paragrafnya melompat saat iklan muncul, mengganggu dan bikin salah klik.
Pergeseran umumnya terjadi karena tiga hal: gambar tanpa dimensi, font yang berganti mendadak, dan konten dinamis yang disisipkan di atas. Mitigasi menyasar ketiga sumber itu satu per satu.
Teknik Inti
| Sumber pergeseran | Mitigasi |
|---|---|
| Gambar tanpa ukuran | Set width dan height, atau aspect-ratio |
| Web font berganti | Pakai font-display swap dan size-adjust |
| Iklan atau embed | Pesan ruang dengan min-height |
| Konten dinamis di atas | Sisipkan di bawah viewport, bukan di atas |
Saat mengaudit website klien, pergeseran paling sering datang dari gambar hero tanpa atribut dimensi. Begitu dimensi dipesan lewat properti ukuran atau aspect-ratio, skor CLS biasanya turun signifikan tanpa mengubah desain.
Kenapa Penting?
CLS yang buruk membuat pengguna salah klik dan frustrasi, terutama di perangkat seluler yang dominan di Indonesia. Karena CLS termasuk faktor pengalaman halaman, mitigasinya membantu retensi sekaligus sinyal SEO. Untuk panduan resmi, lihat dokumentasi web.dev tentang CLS.
Pertanyaan Umum
Berapa skor CLS yang dianggap baik?
Di bawah 0,1 dianggap baik, 0,1 sampai 0,25 perlu perbaikan, di atas 0,25 buruk. Ukur dengan data lapangan, bukan hanya uji lab.
Apakah animasi menyebabkan CLS?
Animasi dengan transform tidak dihitung sebagai layout shift. Yang dihitung adalah perubahan posisi elemen lewat properti tata letak. Pakai transform untuk gerakan agar aman.
Istilah Terkait