Digital Transformation
Cara Memperbaiki CLS (Cumulative Layout Shift Fix)
TL;DR: Memperbaiki CLS berarti menghentikan elemen halaman yang melompat-lompat saat dimuat. Penyebab tersering: gambar tanpa dimensi, iklan tanpa ruang cadangan, dan font yang berganti mendadak. Targetnya menjaga skor di bawah 0,1, ambang "baik" Google.
Apa itu Perbaikan CLS?
CLS mengukur seberapa sering elemen halaman bergeser tanpa diduga selama memuat. Pergeseran itu mengganggu, misalnya saat Anda akan mengetuk tombol lalu tombolnya melompat karena ada banner yang baru muncul. Perbaikan CLS adalah serangkaian langkah teknis untuk mencadangkan ruang bagi setiap elemen sebelum kontennya selesai dimuat.
Analoginya seperti memesan kursi sebelum tamu datang. Kalau ruang sudah disiapkan, tidak ada yang perlu digeser saat tamu masuk. CLS adalah salah satu dari tiga Core Web Vitals yang jadi faktor peringkat sejak 2021.
Penyebab dan Solusi
| Penyebab | Solusi |
|---|---|
| Gambar tanpa ukuran | Set atribut width dan height, atau aspect-ratio CSS |
| Iklan/embed dinamis | Cadangkan kontainer dengan tinggi minimum |
| Web font berganti | Pakai font-display: optional atau preload font |
| Konten disuntik di atas | Hindari menyisipkan elemen di atas konten yang sudah terlihat |
| Animasi yang memicu layout | Pakai transform, bukan properti yang memicu reflow |
Kenapa Penting?
Dari praktik Web Vitals yang saya pakai di proyek client, CLS sering jadi metrik termudah diperbaiki tapi paling sering terabaikan. Menetapkan dimensi gambar dengan next/image biasanya menyelesaikan sebagian besar masalah dalam satu langkah. Skor yang stabil di bawah 0,1 tidak hanya membantu peringkat, tapi juga menurunkan rasa frustrasi pengunjung yang berdampak pada conversion rate.
Pertanyaan Umum
Berapa skor CLS yang dianggap baik?
Di bawah 0,1 tergolong baik, 0,1 sampai 0,25 perlu perbaikan, dan di atas 0,25 buruk. Angka diukur dari data lapangan pengguna nyata lewat CrUX.
Apakah memperbaiki CLS butuh menulis ulang seluruh situs?
Umumnya tidak. Mayoritas perbaikan terfokus pada gambar, iklan, dan font. Perubahan kecil yang tepat sasaran sering cukup menurunkan skor secara signifikan.
Istilah Terkait