Skip to main content

Cara Memperbaiki CLS: Penyebab Pergeseran Tata Letak dan Solusinya

Roofel Team
•

CLS mengukur pergeseran tata letak yang tidak diharapkan, dengan target ≤ 0,1. Penyebab yang paling sering, cara menemukannya, dan perbaikan yang paling murah.

Core Web Vitals & Web Performance
Cara Memperbaiki CLS: Penyebab Pergeseran Tata Letak dan Solusinya

Apa Itu CLS

Cumulative Layout Shift mengukur seberapa banyak elemen halaman bergeser setelah pengunjung mulai membaca — dan Google menetapkan ≤ 0,1 sebagai batas baik, diukur di persentil ke-75.

Gejalanya sudah dikenal semua orang meski namanya tidak: Anda mulai membaca sebuah paragraf, lalu tulisannya melompat ke bawah karena ada gambar atau iklan yang baru selesai dimuat. Atau lebih buruk — jari sudah menekan tombol, tapi tombolnya bergeser dan yang tertekan sesuatu yang lain.

Yang dihitung hanya pergeseran yang tidak diharapkan. Pergeseran akibat tindakan pengunjung sendiri — membuka menu, memperbesar bagian yang dilipat — tidak dihitung, selama terjadi dalam waktu singkat setelah interaksinya.

Dari tiga metrik Core Web Vitals, ini yang biasanya paling murah diperbaiki dan paling langsung terasa oleh pengunjung.

Ambang batas dan cara membaca data lapangannya dijelaskan di Core Web Vitals; CLS sendiri perlu ditangani lewat sumber pergeseran yang spesifik.

Penyebab yang Paling Sering

  • Gambar tanpa width dan height, sehingga peramban tidak tahu berapa ruang yang perlu disiapkan.
  • Iklan dan penyemat yang ukurannya baru diketahui setelah dimuat.
  • Huruf khusus yang mengubah tinggi baris saat berkasnya selesai diunduh.
  • Isi yang disisipkan di atas isi yang sudah ada — banner pemberitahuan, bilah promosi, atau pesan persetujuan.
  • Elemen yang dimuat lewat skrip dan menyisip di tengah halaman.
  • Animasi yang mengubah tata letak, bukan hanya tampilan.

Cara Memperbaikinya

  1. Cantumkan width dan height pada semua gambar dan video. Peramban modern memakai keduanya untuk menyiapkan ruang bahkan ketika ukuran akhirnya diatur CSS. Ini perbaikan tunggal yang paling banyak menyelesaikan kasus.
  2. Sediakan ruang tetap untuk iklan dan penyemat lewat wadah dengan tinggi minimum, supaya halaman tidak melompat saat isinya datang.
  3. Muat huruf lebih awal dan pakai huruf cadangan dengan ukuran yang mendekati, supaya pergantiannya tidak mengubah tinggi baris.
  4. Jangan menyisipkan apa pun di atas isi yang sudah tampil. Banner dan pemberitahuan sebaiknya melayang di atas halaman, bukan mendorong isinya ke bawah.
  5. Sediakan ruang untuk isi yang dimuat belakangan, termasuk yang datang dari skrip pihak ketiga.
  6. Pakai transform untuk animasi, bukan properti yang mengubah posisi dan ukuran elemen lain.
  7. Periksa bagian yang bisa dilipat — pastikan pembukaannya tidak menggeser isi yang sedang dibaca.

Tampilan responsif yang benar juga membantu mengurangi masalah di layar kecil. Periksa viewport meta tag sebelum menyimpulkan penyebabnya ada pada CSS lain.

Cara Menemukan Penyebabnya

Berbeda dari LCP yang penyebabnya sering langsung terlihat, sumber CLS kadang sulit ditangkap karena terjadi sekejap.

  1. Buka PageSpeed Insights dan lihat bagian “Avoid large layout shifts” — ia menyebutkan elemen yang paling banyak menyumbang.
  2. Rekam di panel Performance alat pengembang, lalu telusuri kembali detik-detik awal pemuatan.
  3. Muat halaman dengan pembatasan jaringan lambat, karena pergeseran jauh lebih terlihat saat sumber daya datang bertahap.
  4. Periksa laporan Search Console untuk mengetahui kelompok halaman mana yang bermasalah, bukan satu halaman.
  5. Uji di ponsel, karena pergeseran hampir selalu lebih parah di layar sempit.

Kesalahan yang Sering Terjadi

  • Menghapus width dan height dari gambar dengan alasan sudah diatur CSS. Justru keduanya yang mencegah pergeseran.
  • Memasang banner persetujuan yang mendorong isi ke bawah, bukan melayang di atasnya.
  • Menguji hanya di komputer dengan jaringan cepat, yang menyembunyikan hampir semua pergeseran.
  • Mengejar angka nol. Ambang batasnya 0,1, dan mengejar kesempurnaan di sini jarang sepadan.

Pertanyaan Umum Seputar CLS

Apakah pergeseran karena klik pengguna dihitung?

Tidak, selama terjadi dalam jendela waktu singkat setelah interaksinya. Membuka menu atau bagian yang dilipat tidak menambah angka CLS.

Kenapa CLS di ponsel lebih buruk daripada di komputer?

Karena ruangnya lebih sempit, sehingga satu elemen yang menyisip mendorong lebih banyak isi. Jaringan seluler yang lebih lambat juga membuat sumber daya datang lebih bertahap.

Apakah CLS 0,15 sudah bermasalah?

Masuk kelompok perlu diperbaiki, tapi bukan keadaan darurat. Prioritaskan halaman yang paling banyak dikunjungi lebih dulu.