Rahasia Mempercepat Website dengan Memperbaiki CLS

Bayangkan Anda sedang membaca artikel menarik di sebuah website. Tiba-tiba, sebelum jari Anda menekan tombol "Beli Sekarang", sebuah banner iklan muncul dari atas dan mendorong semua konten ke bawah. Alih-alih tombol yang Anda tuju, Anda malah menekan link yang salah. Pengalaman seperti ini bukan cuma menjengkelkan. Google mengukurnya sebagai salah satu sinyal peringkat terpenting, yaitu Cumulative Layout Shift (CLS).

CLS mengukur seberapa sering elemen-elemen di halaman website Anda bergeser secara tidak terduga saat halaman sedang dimuat. Semakin tinggi skor CLS Anda, semakin buruk pengalaman pengguna, dan semakin besar kemungkinan Google menurunkan posisi website Anda di hasil pencarian.

Apa Itu Skor CLS dan Batas Amannya?

CLS adalah bagian dari Core Web Vitals, tiga metrik utama yang Google gunakan untuk menilai kualitas pengalaman pengguna di website Anda. Skor CLS bukan diukur dalam detik atau milidetik. Ini adalah angka murni yang dihitung dari seberapa jauh dan seberapa luas elemen halaman berpindah tempat.

Google menetapkan standar berikut:

• CLS 0,1 atau di bawahnya: Bagus. Website Anda nyaman digunakan.
• CLS 0,1 hingga 0,25: Perlu perbaikan. Pengunjung sudah mulai terganggu.
• CLS di atas 0,25: Buruk. Halaman Anda terasa tidak stabil dan berdampak negatif pada SEO.

Target yang realistis adalah skor 0,1 atau lebih rendah untuk setidaknya 75% dari semua kunjungan halaman Anda, baik dari perangkat mobile maupun desktop.

Mengapa Google Menganggap CLS Itu Penting?

Google merancang Core Web Vitals untuk mencerminkan pengalaman nyata pengguna. CLS secara langsung memengaruhi apakah pengunjung merasa nyaman atau frustasi saat berinteraksi dengan halaman Anda.

Ketika konten bergeser tiba-tiba, dua hal buruk terjadi. Pertama, pembaca kehilangan posisi bacaan mereka. Kedua, dan lebih parah, mereka bisa mengklik elemen yang salah karena tombol berpindah tepat sebelum jari menyentuhnya. Ini bukan sekadar soal estetika. Dalam skenario terburuk, pengguna bisa saja menekan tombol konfirmasi pembelian yang tidak mereka inginkan karena tata letak tiba-tiba berubah.

Google mengukur CLS dari data pengguna nyata melalui Chrome User Experience Report (CrUX), bukan hanya dari simulasi lab. Artinya, skor yang tertera di Google Search Console atau PageSpeed Insights mencerminkan apa yang benar-benar dirasakan pengunjung website Anda.

Kenapa Halaman Website Anda Bisa Mengalami Layout Shift?

Pergeseran tata letak hampir selalu dipicu oleh satu dari empat kondisi ini:

• Gambar atau video tanpa dimensi yang ditentukan. Browser tidak tahu berapa ruang yang harus disisihkan, sehingga konten di bawahnya bergeser saat gambar selesai dimuat.
• Iklan, embed, atau iframe yang muncul belakangan. Widget dari YouTube, Google Maps, atau jaringan iklan sering kali baru diketahui ukurannya setelah dimuat.
• Konten yang disuntikkan secara dinamis. Banner notifikasi, pop-up cookie, atau konten yang di-load lewat JavaScript sering muncul dan mendorong elemen lain.
• Web font yang menyebabkan pergeseran teks. Ketika font kustom selesai dimuat dan menggantikan font fallback, ukuran teks bisa berubah dan menggeser seluruh blok konten di bawahnya.

Cara Mengecek Skor CLS Website Anda

Sebelum memperbaiki, Anda perlu tahu di mana masalahnya. Gunakan salah satu alat ini:

• PageSpeed Insights (pagespeed.web.dev): Masukkan URL Anda dan lihat skor CLS dari data pengguna nyata sekaligus hasil dari simulasi lab.
• Google Search Console: Buka laporan "Core Web Vitals" untuk melihat halaman mana saja yang memiliki masalah CLS di skala keseluruhan website.
• Chrome DevTools: Buka panel Performance, rekam aktivitas halaman, lalu cari bagian "Layout Shifts" yang ditandai dengan bar berwarna ungu untuk melihat elemen mana yang bergeser.

Panduan Memperbaiki CLS Langkah demi Langkah

1. Selalu Tentukan Ukuran pada Gambar dan Video

Ini adalah penyebab CLS yang paling umum sekaligus yang paling mudah diperbaiki. Tambahkan atribut width dan height langsung pada tag <img> Anda.

Contoh yang benar:

<img src="foto-produk.jpg" width="640" height="360" alt="Foto produk" style="height: auto; width: 100%;">

Dengan atribut ini, browser langsung tahu berapa ruang yang harus disiapkan sebelum gambar selesai diunduh. Elemen lain di bawahnya tidak akan bergerak ke mana-mana.

Pengguna WordPress: Sebagian besar tema modern sudah menambahkan atribut ini secara otomatis. Pastikan Anda mengunggah gambar dengan dimensi yang tepat dan gunakan plugin seperti Jetpack atau aktifkan fitur "lazy loading" bawaan WordPress yang sudah menyertakan atribut dimensi.

2. Siapkan Ruang untuk Iklan dan Konten yang Muncul Belakangan

Iklan adalah salah satu penyumbang CLS terbesar. Ukurannya sering tidak diketahui sebelum ditayangkan. Solusinya adalah menyisihkan ruang terlebih dahulu menggunakan CSS.

Tambahkan min-height pada wadah iklan Anda:

.ad-container {
  min-height: 250px;
  width: 100%;
}

Dengan begitu, meski iklan belum muncul, ruang sudah tersedia. Konten di bawahnya tidak akan bergeser saat iklan akhirnya ditampilkan.

Prinsip yang sama berlaku untuk widget embed seperti video YouTube atau peta Google Maps. Gunakan teknik aspect-ratio di CSS untuk menjaga rasio lebar-tinggi elemen sebelum kontennya selesai dimuat.

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

3. Jangan Sisipkan Konten Baru di Bagian Atas Halaman Tanpa Ruang

Banner cookie, notifikasi promosi, atau pop-up yang muncul di bagian atas halaman mendorong semua konten ke bawah dan langsung menaikkan skor CLS Anda secara signifikan.

Ada dua pilihan yang aman:

• Overlay, bukan dorong. Tampilkan banner sebagai elemen yang mengambang di atas konten (menggunakan position: fixed atau position: sticky), bukan sebagai elemen yang mendorong konten lain.
• Sisihkan ruang sebelumnya. Jika banner harus berada di dalam alur konten, siapkan ruangnya sejak halaman pertama dimuat, bahkan sebelum banner tersebut muncul.

4. Optimalkan Web Font agar Tidak Menggeser Teks

Saat font kustom sedang diunduh, browser menampilkan teks dengan font cadangan terlebih dahulu. Ketika font asli akhirnya aktif, ukuran dan bentuk teks berubah, dan ini menggeser semua elemen di bawahnya.

Tambahkan font-display: optional di deklarasi CSS font Anda. Pengaturan ini memberi tahu browser untuk hanya menggunakan font kustom jika sudah tersedia sebelum halaman pertama kali dirender. Jika belum siap, browser tetap menggunakan font fallback tanpa menyebabkan pergeseran apapun.

@font-face{ 
  font-family: 'NamaFont';
  src: url('font.woff2') format('woff2');
  font-display:swap;
 }

Anda juga bisa mempercepat proses pemuatan font dengan menambahkan tag <link rel="preload"> di bagian <head> halaman, sehingga font diunduh lebih awal bersamaan dengan aset-aset penting lainnya.

Pengguna WordPress dengan Google Fonts: Plugin seperti OMGF (Optimize My Google Fonts) atau Perfmatters membantu Anda menghosting font secara lokal dan mengatur font-display tanpa perlu menyentuh kode secara manual.

5. Gunakan Animasi CSS yang Tidak Memicu Layout Shift

Jika Anda menggunakan animasi di website, hindari menganimasikan properti top, left, height, atau width. Properti-properti ini memaksa browser menghitung ulang tata letak halaman setiap frame animasi berlangsung, dan itu menyebabkan layout shift.

Ganti dengan properti transform:

• Gunakan transform: translate() untuk menggerakkan elemen, bukan mengubah nilai top atau left.
• Gunakan transform: scale() untuk memperbesar atau memperkecil elemen, bukan mengubah width atau height.

Animasi berbasis transform berjalan di GPU tanpa mengganggu alur tata letak halaman, sehingga tidak berkontribusi pada skor CLS sama sekali.

Cara Cepat Memeriksa Hasil Perbaikan Anda

Setelah menerapkan perubahan, kembali ke PageSpeed Insights dan jalankan pengujian ulang. Fokus pada skor CLS di bagian "Lab Data". Jika skor turun ke 0,1 atau di bawahnya, perbaikan Anda berhasil.

Untuk website dengan banyak halaman, pantau Google Search Console selama beberapa minggu ke depan. Data CrUX membutuhkan waktu untuk diperbarui karena menggunakan data kunjungan nyata dari 28 hari terakhir. Jadi jangan kecewa jika perubahan di Search Console belum terlihat dalam beberapa hari pertama.

CLS yang rendah bukan hanya tentang nilai metrik yang bagus di laporan. Website yang stabil membuat pengunjung lebih percaya, lebih lama tinggal, dan lebih mudah mengklik tombol yang benar-benar mereka inginkan.