Minggu lalu, saya lagi asyik baca-baca berita di sebuah situs. Tiba-tiba, pas jari saya udah mau mencet tombol ‘Baca Selengkapnya’, eh, iklannya muncul di atas, dorong semua konten ke bawah. Tombol yang mau saya klik jadi geser. Alhasil, yang kepencet malah iklan. Kesal? Banget. Momen itu, yang bikin kita kaget dan salah klik, itu namanya dampak dari Cumulative Layout Shift (CLS) yang buruk. Dan ini bukan cuma soal iklan, kok.
Foto oleh ERFIN EKARANA via Pexels
CLS ini salah satu metrik dari Core Web Vitals yang sering diabaikan, padahal dampaknya ke pengalaman pengguna itu fatal. Banyak orang fokus ke LCP atau FID, tapi CLS ini sering jadi anak tiri. Padahal, kalau dibiarkan, bisa bikin pengunjung kabur duluan sebelum sempat baca konten kita.
Waktu Tombol “Beli” Tiba-tiba Geser Sendiri — Itu CLS Namanya
Bayangkan ini: kamu lagi di toko online, udah nemu barang yang pas, udah mau klik ‘Beli Sekarang’. Eh, tiba-tiba di atas muncul pop-up promo gede, geser semua elemen ke bawah. Tombol ‘Beli Sekarang’ yang tadinya di tengah layar jadi di pojok bawah. Kamu auto-kesal, kan? Nah, itu dia CLS.
CLS itu intinya mengukur seberapa sering dan seberapa parah elemen di halaman web kamu ‘melompat’ atau ‘bergeser’ secara tidak terduga saat halaman sedang dimuat. Angkanya diukur dari 0 sampai berapa, makin dekat ke 0 makin bagus. Idealnya di bawah 0.1. Kalau udah lebih dari itu, siap-siap aja bikin pengunjung kamu pusing.
Saya ingat betul, dulu waktu pertama kali saya coba optimasi baca juga: Apa Itu Core Web Vitals Dan Mengapa Penting Untuk Seo untuk blog pribadi, saya cuma fokus ke kecepatan loading. Saya pasang CDN, kompres gambar, minify CSS. Hasil LCP (Largest Contentful Paint) saya bagus banget, di bawah 2 detik. Tapi anehnya, di Google Search Console, CLS saya merah menyala, di atas 0.25. Saya bingung setengah mati. Kok bisa?
Ternyata, masalahnya ada di font. Saya pakai font kustom yang loading-nya agak lambat. Browser awalnya nampilin teks pakai font default sistem, lalu pas font kustomnya kelar di-load, semua teks berubah ukuran. Ini bikin layout geser mendadak. Pengunjung yang lagi baca tiba-tiba lihat paragrafnya melompat. Saya sendiri sering ngalamin ini di situs lain dan rasanya pengen nutup tab aja.
Kenapa Dulu Saya Salah Paham Soal CLS dan Efeknya ke Pengguna
Dulu, saya berpikir, CLS itu cuma masalah teknis kecil. Paling cuma bikin tampilan kurang rapi sebentar, nanti juga stabil. Asumsi saya waktu itu: ‘Ah, orang kan ngerti kalau itu cuma loading.’ Ternyata salah besar. Dampak CLS ke UX itu jauh lebih dalam dari sekadar ‘kurang rapi’.
Ketika layout bergeser, itu mengganggu alur baca dan interaksi pengguna. Mata kita harus menyesuaikan lagi. Jari kita yang udah siap klik, jadi salah target. Ini memicu rasa frustrasi, ketidakpercayaan, bahkan sampai ke tingkat cognitive load yang lebih tinggi. Pengguna jadi harus mikir dua kali, ‘Ini tombolnya ke mana lagi?’
Kenapa CLS saya tinggi padahal cuma ada satu iklan?
Ini pertanyaan yang sering muncul. Satu iklan memang kelihatannya kecil, tapi kalau iklan itu di-load secara dinamis tanpa reservasi ruang (width dan height), dia bisa bikin seluruh layout di bawahnya geser. Atau, kalau iklan itu di-load setelah konten utama, dia bisa ‘memotong’ ruang yang sudah ada. Jadi, bukan cuma jumlah iklannya, tapi cara iklannya di-load dan apakah ruang untuk iklan itu sudah dialokasikan dari awal. Seringnya, ini karena developer iklan atau platformnya tidak menyertakan atribut width dan height di tag <img> atau <div> container iklannya.
Google sendiri, lewat riset mereka, menemukan bahwa situs dengan CLS yang buruk memiliki tingkat bounce rate yang jauh lebih tinggi. Orang cenderung langsung pergi kalau pengalaman awalnya sudah buruk. Itu persis yang saya alami waktu lihat CLS saya merah. Pengunjung mungkin langsung nutup tab, dan saya kehilangan potensi pembaca atau bahkan konversi.
Dampak CLS ke UX: Bukan Cuma Angka, Tapi Soal Kepercayaan Pengguna
Mari kita bicara soal ini lebih dalam. Dampak CLS ke UX itu bukan cuma angka di laporan Lighthouse. Ini soal bagaimana pengunjung merasa saat berinteraksi dengan situs kita. Kalau situs kita sering ‘melompat-lompat’, pengunjung akan merasa situs kita tidak profesional, tidak stabil, bahkan tidak bisa dipercaya.
Pernah lihat situs berita yang tiba-tiba artikelnya geser ke bawah, lalu muncul pop-up langganan email yang menutupi seluruh layar? Itu adalah kombinasi buruk dari CLS dan interupsi UX yang parah. Pengguna yang tadinya fokus membaca, jadi terganggu. Flow mereka terputus. Ini bisa membuat mereka berpikir dua kali untuk kembali ke situs tersebut.
Data dari Google menunjukkan bahwa setiap peningkatan 0.1 di skor CLS bisa meningkatkan kemungkinan pengunjung meninggalkan halaman sebesar 10-20% atau bahkan lebih. Angka itu bukan main-main. Bayangkan kalau kamu punya toko online dan 20% calon pembeli kabur cuma karena layout situs kamu joget-joget. Kerugiannya bisa sangat signifikan.
Saya pernah punya proyek pribadi, sebuah landing page untuk produk digital sederhana. Awalnya, saya optimasi semua, kecuali CLS. Saya pikir, ‘Ah, landing page kan cuma satu halaman, nggak banyak elemen yang geser.’ Ternyata, di bagian formulir kontak, ada validasi real-time yang muncul di bawah input field. Ketika error muncul, dia mendorong tombol ‘Kirim’ ke bawah. Beberapa teman yang mencoba bilang, ‘Kok tombolnya geser pas aku salah isi email?’ Itu membuat mereka ragu, bahkan ada yang tidak jadi kirim formulir. Padahal, cuma gara-gara validasi kecil.
Hal-hal Kecil yang Sering Bikin CLS Melonjak — dan Cara Saya Menemukannya
Setelah insiden font dan landing page itu, saya jadi lebih paranoid soal CLS. Saya mulai perhatikan detail-detail kecil yang ternyata bisa jadi biang kerok CLS tinggi. Dan ini sering terlewat di banyak tutorial:
- Gambar tanpa dimensi: Ini klise, tapi masih sering terjadi. Kalau tag
<img>tidak punya atributwidthdanheight, browser tidak tahu berapa ruang yang harus dialokasikan. Gambar akan dimuat, lalu layout bergeser. Selalu tambahkanwidthdanheight, atau gunakan CSSaspect-ratio. - Iklan dan embed dinamis: Sama seperti gambar, kalau ada iklan atau video YouTube yang di-embed tanpa ukuran yang jelas, mereka akan ‘merebut’ ruang setelah di-load. Selalu reservasi ruang untuk mereka. Saya sering pakai
min-heightatauaspect-ratiodi container mereka. - Font yang di-load belakangan: Seperti pengalaman saya, kalau pakai font kustom, pastikan pakai
font-display: swapdan pertimbangkan preload font penting. Atau, lebih baik lagi, gunakansize-adjustatauline-gap-overridedi CSS untuk menjaga ukuran teks tetap konsisten antara font sistem dan font kustom. Jujur, ini detail yang agak ribet dan baru saya temukan setelah berhari-hari debugging. - Konten yang disuntikkan secara dinamis: Ini sering terjadi di situs yang pakai banyak JavaScript. Misalnya, komentar yang di-load belakangan, atau notifikasi yang muncul di bagian atas. Pastikan ada ruang yang sudah disiapkan untuk elemen-elemen ini.
Apakah semua layout shift itu buruk?
Tidak juga. Layout shift yang diinisiasi oleh pengguna, misalnya saat kamu klik tombol untuk membuka menu dropdown atau memperluas bagian konten, itu tidak dihitung sebagai CLS buruk. Karena itu adalah interaksi yang diharapkan. Yang buruk adalah shift yang tidak terduga, yang terjadi tanpa ada interaksi dari pengguna, atau interaksi yang tidak disengaja.
Memperbaiki CLS itu memang butuh kesabaran dan mata yang teliti. Kadang, masalahnya bukan di kode kita sendiri, tapi di third-party script atau widget yang kita pakai. Waktu saya debug CLS tinggi di salah satu proyek open-source saya, ternyata biang keroknya adalah plugin komentar yang di-load secara async dan tidak reservasi ruang. Saya harus utak-atik CSS-nya manual.
Perjalanan saya dengan CLS ini memang penuh kejutan. Dari awalnya meremehkan, sampai akhirnya sadar betapa krusialnya ini untuk pengalaman pengguna. Dan di dunia yang serba cepat ini, pengalaman pertama itu segalanya. Kalau situs kita bikin orang kesal di detik pertama, mereka tidak akan kembali.
Saya membuka laptop, lalu langsung cek lagi semua gambar di situs saya, memastikan atribut width dan height-nya sudah terpasang semua.