Website Bisnis

Cara Mencegah CLS Tinggi di Website Bisnis Indonesia 2026

CLS di atas 0,1 bikin pengunjung salah klik dan menggerus konversi. Studi kasus Nalesha, checklist praktis reserve space dan preload font.

Vito Atmo·19 Mei 2026·0 kali dibaca·4 min baca

Cara Mencegah CLS Tinggi di Website Bisnis Indonesia 2026

TL;DR: CLS (Cumulative Layout Shift) di atas 0,1 membuat website terasa "nakal" dan menggerus konversi karena pengunjung salah klik. Penyebab utama: gambar tanpa dimensi, iklan tersisip, font swap, dan banner cookie. Solusi konsisten dari audit Vetmo dan Nalesha: reserve space pakai aspect ratio, preload font, dan tempatkan banner di posisi yang tidak menggeser konten existing.

Salah satu keluhan paling sering yang saya dengar dari klien e-commerce adalah, "Kenapa orang yang sudah scroll ke tombol Beli tiba-tiba pergi?" Sering kali jawabannya sederhana, tombolnya bergeser tepat sebelum mereka klik, dan mereka menutup iklan yang ternyata tombol Beli.

Inilah masalah yang diukur Cumulative Layout Shift (CLS).

Apa itu CLS

CLS mengukur akumulasi pergeseran tata letak yang tidak diharapkan selama halaman dimuat. Pelajari definisi teknisnya di glosarium CLS. Skor dihitung dari kombinasi fraksi viewport yang bergeser dan jarak gesernya, lalu dibandingkan dengan ambang Google:

Skor CLS	Kategori
Di bawah 0,1	Good
0,1 sampai 0,25	Needs Improvement
Di atas 0,25	Poor

CLS adalah bagian dari Core Web Vitals yang menjadi sinyal peringkat Google sejak Juni 2021.

Lima Penyebab CLS Tinggi yang Paling Sering Saya Temui

Dari audit website bisnis dan personal brand Indonesia selama beberapa tahun terakhir, polanya konsisten:

Gambar tanpa atribut dimensi. Tag <img> tanpa width dan height membuat browser tidak tahu seberapa besar slot yang harus disiapkan. Begitu gambar selesai diunduh, teks di bawahnya terdorong.

Iklan yang disisip belakangan. Banner adsense atau placement direct yang muncul setelah konten render menggeser segalanya.

Embed pihak ketiga. YouTube iframe atau Twitter widget yang tidak punya ukuran tetap akan tumbuh setelah skrip mereka load.

Font swap (FOIT/FOUT). Font kustom dengan font-display: swap mendorong baris saat font benar-benar tiba, terutama kalau metrik font fallback dan font utama beda jauh.

Banner cookie consent yang menyisip dari atas. Banyak implementasi default menggeser seluruh konten ke bawah saat banner muncul.

Studi Kasus: Nalesha dan Reservasi Space

Saat menangani Nalesha, e-commerce parfum, kami menemukan CLS halaman PDP awalnya 0,38, jauh di atas ambang poor. Penyebab utama:

Galeri produk pakai <img> tanpa width/height.
Review section di-fetch async dan muncul di tengah konten.
Web font Tan Pearl tidak di-preload.

Yang kami lakukan:

Migrasi semua gambar produk ke next/image dengan aspect ratio terdefinisi.
Reserve space untuk review section pakai placeholder skeleton seukuran final.
Preload font utama di <head> dengan crossorigin.

Setelah deploy, CLS turun ke 0,06 di persentil ke-75. Yang menarik, conversion rate halaman PDP juga membaik bertahap, kemungkinan karena pengunjung tidak lagi "tersesat" saat mau klik CTA.

Checklist Mencegah CLS

Semua <img> dan <video> punya width dan height eksplisit (atau pakai next/image dengan fill + aspect ratio container).
Iframe embed (YouTube, Twitter) dibungkus container dengan aspect ratio tetap.
Font kustom utama di-preload, dengan font-display: optional jika memungkinkan.
Banner cookie consent muncul sebagai overlay, bukan menggeser konten.
Notifikasi dinamis (toast, badge) tidak menggeser layout.
Animasi hanya pakai transform dan opacity, bukan properti layout.
Komponen async (review, related products) punya skeleton seukuran final.

Untuk panduan teknis tambahan, dokumentasi web.dev tentang CLS optimization memberikan studi kasus dan teknik mendalam.

Pertanyaan Umum

Apakah animasi membuat CLS naik?

Tidak, jika animasi memakai transform atau opacity. Animasi yang mengubah top, left, width, atau height berkontribusi ke CLS.

Bagaimana mengukur CLS di field data?

Pakai library web-vitals untuk capture data lapangan, atau cek dashboard Core Web Vitals di Google Search Console untuk agregat persentil ke-75.

Apa beda CLS dengan INP?

CLS mengukur stabilitas visual selama load. INP mengukur responsivitas interaksi setelah halaman load. Keduanya bagian Core Web Vitals tapi mengukur dimensi berbeda.

Apakah CLS hanya untuk mobile?

Tidak. CLS diukur baik di mobile maupun desktop. Mobile biasanya lebih sensitif karena viewport sempit membuat pergeseran terasa lebih mengganggu.

Apakah lazy loading menyebabkan CLS?

Tidak, kalau gambar yang lazy-loaded sudah punya dimensi terdefinisi. Browser tetap reserve space meski gambarnya belum diunduh.

Penutup

CLS adalah masalah yang sering disepelekan karena tidak terasa dramatis seperti halaman lambat. Tapi dampaknya nyata, terutama untuk halaman dengan CTA krusial seperti checkout, lead form, atau halaman donasi. Pergeseran kecil yang tidak terasa di developer machine bisa berarti kehilangan konversi di field.

Mulai dari halaman dengan trafik tertinggi. Ukur CLS-nya, lacak komponen mana yang menggeser, perbaiki satu per satu. Disiplin ini lebih kuat daripada refactor besar yang lambat selesai.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang