CLS Adalah: Cumulative Layout Shift dan Cara Mengatasinya

Anda sedang membaca artikel di ponsel, jari sudah bergerak ke arah tautan yang ingin dibuka, lalu dalam sepersekian detik halaman melompat ke bawah. Yang tertekan bukan tautan tadi, melainkan iklan yang baru saja muncul di atasnya. Peristiwa ini terasa sepele dan hampir semua orang pernah mengalaminya. Namun Google menganggapnya cukup serius untuk diberi nama, diberi satuan, dan diukur di setiap halaman yang dikunjungi pengguna Chrome.

Ukuran itulah yang disebut CLS. Artikel ini membahas apa yang sebenarnya dihitung metrik tersebut, dari mana angka ambangnya berasal, dan langkah paling berdampak untuk memperbaikinya di website Anda.

Apa Itu CLS dan Kenapa Google Mengukurnya

CLS adalah singkatan dari Cumulative Layout Shift, sebuah metrik yang mengukur seberapa sering dan seberapa jauh elemen di halaman web berpindah posisi tanpa diminta pengguna. Dalam bahasa Indonesia, metrik ini paling dekat diterjemahkan sebagai ukuran kestabilan tampilan. Semakin kecil angkanya, semakin tenang halaman Anda saat dimuat.

Kata kuncinya adalah tanpa diminta. Ketika Anda menekan tombol "Baca selengkapnya" lalu teks memanjang ke bawah, itu pergeseran yang Anda perintahkan sendiri dan tidak dihitung. Namun ketika gambar yang belum selesai dimuat tiba-tiba mengambil ruang dan mendorong paragraf ke bawah, itulah pergeseran yang dihitung.

CLS bukan metrik yang berdiri sendiri. Ia satu dari tiga Core Web Vitals, kumpulan metrik pengalaman halaman yang dipakai Google untuk menilai kualitas teknis sebuah halaman:

1. LCP (Largest Contentful Paint): mengukur kecepatan muat, dengan target 2,5 detik atau kurang.
2. INP (Interaction to Next Paint): mengukur daya respons terhadap interaksi, dengan target 200 milidetik atau kurang. Metrik ini menggantikan FID sejak 2024.
3. CLS (Cumulative Layout Shift): mengukur kestabilan tampilan, dengan target 0,1 atau kurang.

Ketiganya menjadi bagian dari sinyal pengalaman halaman yang diperhitungkan dalam SEO teknis. Bobotnya tidak sebesar relevansi konten, tetapi pada dua halaman yang sama-sama menjawab pertanyaan pencari, kestabilan tampilan bisa menjadi pembeda.

Cara Google Menghitung Skor CLS

Banyak pemilik website mengira skor CLS adalah jumlah seluruh pergeseran yang terjadi di halaman. Anggapan ini keliru, dan kata "cumulative" pada namanya justru yang membuatnya menyesatkan.

Perhitungannya bertingkat. Tingkat pertama adalah skor untuk satu pergeseran:

skor pergeseran = impact fraction × distance fraction

Impact fraction adalah gabungan area layar yang ditempati elemen tidak stabil pada dua frame berurutan, dinyatakan sebagai bagian dari luas layar. Distance fraction adalah jarak terjauh elemen itu berpindah, dibagi dimensi terpanjang layar.

Mari kita pakai contoh konkret. Sebuah blok teks menempati setengah bagian atas layar. Lalu banner iklan muncul di atasnya setinggi sepersepuluh layar, dan mendorong blok teks itu turun sejauh sepersepuluh layar juga.

• Blok teks tadinya menempati area 0%–50% layar, setelah bergeser menempati 10%–60%. Gabungan keduanya adalah 0%–60%, sehingga impact fraction bernilai 0,6.
• Jaraknya berpindah sepersepuluh tinggi layar, sehingga distance fraction bernilai 0,1.
• Skor pergeseran ini adalah 0,6 × 0,1 = 0,06.

Tingkat kedua adalah pengelompokan. Pergeseran yang terjadi berdekatan dikumpulkan ke dalam satu jendela sesi. Ada dua batas: jeda antar-pergeseran tidak boleh lebih dari 1 detik, dan panjang total satu jendela tidak boleh lebih dari 5 detik. Skor di dalam satu jendela dijumlahkan.

Tingkat ketiga adalah pelaporan. Nilai CLS halaman Anda bukan total seluruh jendela, melainkan skor jendela tertinggi sepanjang halaman itu dibuka.

Konsekuensinya penting untuk dipahami. Pergeseran 0,06 tadi masih aman sendirian. Namun kalau dalam rentang lima detik yang sama muncul satu iklan lagi dengan dampak serupa, kedua skor dijumlahkan menjadi 0,12 dan halaman Anda melewati ambang batas. Sebaliknya, dua pergeseran yang berjarak sepuluh detik tidak pernah dijumlahkan, karena berada di jendela berbeda.

Ada satu pengecualian lagi yang perlu Anda ketahui. Pergeseran yang terjadi dalam 500 milidetik setelah pengguna mengklik, menyentuh, atau mengetik dianggap sebagai konsekuensi wajar dari tindakan pengguna dan tidak dihitung. Perlu diperhatikan, scroll tidak termasuk dalam pengecualian ini. Halaman yang elemennya melompat saat digulir tetap dihukum.

Diagram rumus skor CLS: impact fraction dikali distance fraction menghasilkan skor pergeseran tata letak.

Skor satu pergeseran adalah hasil kali dua pecahan: seberapa luas layar yang terdampak, dan seberapa jauh elemennya berpindah.

Berapa Skor CLS yang Dianggap Baik

Google membagi hasilnya ke dalam tiga rentang:

1. Baik: 0,1 atau kurang.
2. Perlu perbaikan: di atas 0,1 sampai 0,25.
3. Buruk: di atas 0,25.

Angka ini tidak diambil dari rata-rata kunjungan, melainkan dari persentil 75. Artinya, 75% kunjungan ke halaman Anda harus mencatat nilai di bawah ambang tersebut. Data yang dipakai adalah rata-rata bergerak selama 28 hari dari Chrome User Experience Report, kumpulan data pengalaman nyata pengguna browser Chrome yang bersedia berbagi statistik.

Dua konsekuensi praktis dari cara pengukuran ini. Pertama, satu kunjungan bermasalah tidak akan merusak skor Anda, tetapi seperempat pengunjung yang mengalami masalah sudah cukup untuk menahan halaman di zona merah. Kedua, perbaikan yang Anda pasang hari ini tidak akan terlihat penuh sampai sekitar empat minggu kemudian, karena data lama masih ikut dihitung dalam jendela 28 hari.

Perlu diperhatikan juga di mana posisi Anda relatif terhadap situs lain. Menurut Web Almanac 2025 yang diterbitkan HTTP Archive pada Januari 2026, 81% halaman utama di perangkat mobile dan 72% di desktop sudah mencatat CLS yang baik. Sebagai pembanding, hanya 62% halaman mobile yang lulus LCP.

Kesimpulannya, CLS justru metrik Core Web Vitals yang paling mudah dilewati. Kalau website Anda gagal di sini, Anda berada di sekitar 19% terbawah — dan itu biasanya disebabkan hal-hal yang cukup mudah diperbaiki.

Diagram ambang skor CLS: zona Baik di bawah 0,1, Perlu Perbaikan 0,1 sampai 0,25, dan Buruk di atas 0,25.

Batas 0,1 dan 0,25 dinilai pada persentil 75 kunjungan, bukan pada rata-ratanya.

Cara Mengecek Skor CLS Website Anda

Sebelum memperbaiki, Anda perlu tahu angka Anda sekarang dan halaman mana yang bermasalah. Tiga alat berikut sudah cukup untuk hampir semua kebutuhan, dan ketiganya gratis.

PageSpeed Insights (pagespeed.web.dev) adalah titik awal paling cepat. Masukkan alamat halaman, lalu perhatikan bahwa hasilnya terbagi dua bagian: data pengguna nyata di bagian atas, dan diagnosa berbasis simulasi di bagian bawah. Skor CLS muncul di keduanya, dan keduanya tidak harus sama.

Laporan Core Web Vitals di Search Console memberi gambaran seluruh situs, bukan satu halaman. Kelebihannya, Google mengelompokkan halaman yang bermasalah serupa, sehingga satu perbaikan pola bisa menyelesaikan banyak URL sekaligus. Ini alat yang paling dekat dengan cara Google menilai situs Anda.

Chrome DevTools dipakai saat Anda sudah tahu ada masalah dan ingin menemukan elemen persisnya. Buka panel Performance, rekam proses pemuatan halaman, lalu buka bagian Layout shifts. DevTools menampilkan daftar pergeseran beserta skor dan elemen yang bergeser — keterangan yang tidak Anda dapat dari dua alat sebelumnya.

Untuk memantau CLS pengunjung secara terus-menerus, Google menyediakan pustaka JavaScript bernama web-vitals. Pustaka ini mengirim skor tiap kunjungan ke sistem analitik Anda, lengkap dengan keterangan elemen mana yang bergeser.

Urutan kerja yang praktis: mulai dari Search Console untuk mengetahui halaman mana yang bermasalah, konfirmasi satu per satu di PageSpeed Insights, lalu bedah elemennya dengan DevTools.

Lima Penyebab Halaman Bergeser Sendiri

Berdasarkan pemindaian jutaan halaman di crawl Web Almanac 2025, lima pola berikut adalah penyebab paling umum:

1. Gambar tanpa atribut dimensi: penyebab nomor satu, dan jaraknya jauh. Sebanyak 62% halaman mobile dan 65% halaman desktop memiliki setidaknya satu gambar tanpa atribut width dan height. Tanpa informasi itu, browser tidak tahu berapa ruang yang harus disisihkan, sehingga teks di bawahnya terdorong saat gambar selesai dimuat.
2. Iklan, embed, dan iframe yang ruangnya tidak dipesan: unit iklan dan sematan video biasanya dimuat belakangan lewat skrip pihak ketiga. Kalau kontainernya tidak diberi tinggi minimum, ruang itu muncul mendadak.
3. Konten yang disisipkan setelah halaman tampil: banner persetujuan cookie, notifikasi promo, dan blok rekomendasi yang ditambahkan JavaScript di atas konten utama.
4. Web font yang berganti saat dimuat: halaman pertama-tama menampilkan huruf cadangan sistem, lalu menggantinya dengan huruf pilihan Anda. Kalau lebar kedua huruf berbeda, seluruh paragraf mengalir ulang. Sebanyak 87% halaman mobile memakai web font, tetapi hanya sekitar 15% yang memuatnya lebih awal lewat preload. Anda bisa memeriksa huruf apa yang dipakai sebuah situs lewat cara mengetahui jenis font sebuah website.
5. Animasi yang memicu perhitungan tata letak ulang: animasi yang menggerakkan properti seperti top, left, atau box-shadow memaksa browser menghitung ulang posisi elemen lain. Pola ini ditemukan di 40% halaman mobile.

Diagram lima penyebab pergeseran tata letak: gambar tanpa dimensi, iklan, konten disisipkan, web font, dan animasi.

Lima pola penyebab pergeseran. Gambar tanpa atribut dimensi ditemukan di 62% halaman mobile, jauh di atas empat penyebab lainnya.

Cara Memperbaiki CLS Langkah demi Langkah

Urutan di bawah ini disusun dari yang paling berdampak. Kalau waktu Anda terbatas, mengerjakan langkah pertama saja sudah menyelesaikan sebagian besar kasus.

Langkah #1: Beri Dimensi pada Setiap Gambar

Tuliskan lebar dan tinggi asli gambar sebagai atribut di tag HTML. Angkanya tidak perlu sama dengan ukuran tampil, cukup mencerminkan perbandingan sisi yang benar:

<img src="grafik-penjualan.webp" width="1200" height="800" alt="Grafik penjualan kuartal pertama">

Supaya gambar tetap menyesuaikan lebar layar, tambahkan aturan berikut di stylesheet Anda:

img {
  width: 100%;
  height: auto;
}

Dengan dua atribut tadi, browser modern otomatis menyiapkan ruang sesuai perbandingan 1200:800 sebelum berkas gambarnya tiba. Kombinasi ini aman dipakai untuk desain responsif.

Langkah #2: Pesan Ruang untuk Iklan dan Sematan

Untuk elemen yang ukurannya tidak Anda kendalikan, siapkan kontainer dengan tinggi minimum atau perbandingan sisi tetap lewat properti CSS berikut:

.slot-iklan {
  min-height: 280px;
}

.wadah-video {
  aspect-ratio: 16 / 9;
}

Pilih tinggi minimum berdasarkan ukuran unit yang paling sering tampil di posisi tersebut. Ruang kosong sesaat memang terlihat, tetapi jauh lebih baik daripada konten yang melompat.

Langkah #3: Tahan Penyisipan Konten di Atas Layar

Hindari menambahkan elemen baru di atas konten yang sedang dibaca. Kalau Anda memakai banner persetujuan cookie atau pemberitahuan promo, tempatkan sebagai lapisan mengambang yang tidak mendorong apa pun, atau sediakan ruangnya sejak render pertama.

Untuk konten tambahan seperti daftar artikel lanjutan, munculkan lewat tombol yang ditekan pengguna. Selain lebih sopan, pergeseran yang terjadi dalam 500 milidetik setelah klik tidak dihitung sebagai CLS.

Langkah #4: Kendalikan Pemuatan Huruf

Muat berkas huruf utama lebih awal, lalu atur perilaku penggantiannya:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: optional;
}

Nilai font-display: optional memberi huruf pilihan Anda jendela waktu sangat singkat untuk tiba. Kalau terlambat, browser bertahan dengan huruf cadangan untuk kunjungan itu dan tidak pernah menukarnya di tengah jalan. Cara ini menghilangkan pergeseran akibat pergantian huruf, dengan konsekuensi sebagian pengunjung melihat huruf cadangan.

Langkah #5: Pindahkan Animasi ke Properti Transform

Animasi yang menggeser posisi sebaiknya memakai transform, bukan properti yang memengaruhi tata letak:

/* Hindari */
.kartu:hover { top: -8px; }

/* Gunakan */
.kartu:hover { transform: translateY(-8px); }

Transformasi dikerjakan di lapisan komposisi, sehingga posisi elemen lain tidak dihitung ulang dan tidak ada pergeseran yang tercatat.

Kenapa Skor PageSpeed Insights Berbeda dengan Search Console

Ini pertanyaan yang paling sering muncul begitu pemilik website mulai memperhatikan CLS. Halaman yang sama bisa mendapat CLS 0 di satu alat dan tanda merah di alat lain. Keduanya tidak sedang keliru — keduanya mengukur hal yang berbeda.

Data lab dihasilkan Lighthouse, Chrome DevTools, dan bagian simulasi PageSpeed Insights. Alat-alat ini memuat halaman Anda satu kali dalam kondisi terkendali, lalu berhenti merekam segera setelah halaman selesai dimuat. Semua pergeseran yang terjadi sesudahnya tidak pernah masuk hitungan.

Data lapangan berasal dari Chrome User Experience Report dan ditampilkan di bagian atas PageSpeed Insights serta di laporan Core Web Vitals Search Console. Data ini merekam seluruh masa hidup halaman pada kunjungan nyata. Termasuk saat pengunjung menggulir ke bawah dan iklan berikutnya dimuat, saat komentar disisipkan, dan saat gambar di bagian bawah artikel akhirnya tampil.

Karena itu arah selisihnya hampir selalu sama: nilai lab cenderung lebih rendah daripada nilai lapangan. Kalau keduanya berbeda jauh, hampir bisa dipastikan masalah Anda ada pada elemen yang muncul setelah halaman dianggap selesai dimuat.

Untuk keperluan penilaian, pakai data lapangan sebagai patokan karena itu yang dinilai Google. Data lab tetap berguna sebagai alat kerja, sebab hasilnya langsung terlihat setiap kali Anda mengubah kode, tanpa menunggu 28 hari.

Hal yang Perlu Anda Pertimbangkan

CLS bukan ukuran kualitas halaman secara keseluruhan, dan memperlakukannya seperti itu akan membuang waktu Anda.

Skor 0 tidak menjamin halaman nyaman dibaca. Sebuah halaman bisa sepenuhnya stabil namun tetap lambat, penuh iklan, atau sulit dinavigasi. CLS hanya menjawab satu pertanyaan sempit: apakah yang dilihat pengguna berpindah tempat tanpa diminta.

Metrik ini juga punya titik buta. Pergeseran yang terjadi dalam 500 milidetik setelah interaksi tidak dihitung, padahal tetap bisa mengganggu kalau lompatannya jauh. Jendela lima detik juga berarti serangkaian pergeseran kecil yang tersebar merata sepanjang halaman bisa lolos dengan nilai rendah, meski pengalaman membacanya terasa gelisah.

Terakhir, soal porsinya dalam peringkat. Core Web Vitals adalah sinyal pendukung, bukan penentu utama. Memperbaiki CLS dari 0,3 menjadi 0,05 tidak akan mengangkat halaman yang kontennya tidak menjawab pertanyaan pencari. Nilainya terasa ketika kualitas konten sudah setara, atau ketika pergeseran itu benar-benar membuat pengunjung menutup halaman lebih cepat.

Arti Lain dari Singkatan CLS

Singkatan CLS dipakai di beberapa bidang yang sama sekali berbeda. Kalau Anda sampai di artikel ini sambil mencari salah satu makna berikut, ini ringkasannya:

1. Citizen Lawsuit: gugatan warga negara terhadap penyelenggara negara atas kelalaian memenuhi hak warga. Inilah yang dimaksud istilah "sidang CLS" dan "gugatan CLS" dalam pemberitaan hukum. Berbeda dari class action, penggugat tidak harus mengalami kerugian langsung dan tuntutannya berupa perbaikan kebijakan, bukan ganti rugi. Perkara pertamanya di Indonesia diajukan pada 2003.
2. Certified Logistics Supervisor: sertifikasi kompetensi bagi penyelia di bidang logistik dan rantai pasok, diselenggarakan lembaga pelatihan bersertifikat.
3. Perintah cls: perintah untuk membersihkan layar terminal di Command Prompt Windows dan DOS. Pembahasannya ada di artikel CMD adalah.
4. Mercedes-Benz CLS: sedan empat pintu bergaya coupe dari Mercedes-Benz. Produksinya dihentikan pada 31 Agustus 2023 setelah tiga generasi, tanpa model penerus.
5. CLS Group: lembaga penyelesaian transaksi valuta asing antarbank di sektor keuangan internasional.

Pertanyaan yang Sering Muncul Seputar CLS

Apakah CLS memengaruhi peringkat di Google? Ya, sebagai bagian dari sinyal pengalaman halaman. Namun pengaruhnya kecil dibanding relevansi dan kualitas konten. Anggap sebagai penyeimbang saat bersaing dengan halaman yang isinya setara.

Berapa lama perbaikan saya terlihat di Search Console? Sekitar 28 hari untuk terlihat penuh, karena laporan memakai rata-rata bergerak dengan rentang tersebut. Perubahan biasanya mulai tampak bergerak setelah satu sampai dua minggu.

Apakah tema WordPress bisa menjadi penyebab CLS buruk? Bisa, terutama tema yang menyisipkan slider atau banner di bagian atas halaman tanpa memesan ruang lebih dulu. Plugin iklan dan plugin persetujuan cookie juga sering menjadi sumbernya.

Bisakah CLS diperbaiki tanpa mengubah desain? Untuk sebagian besar kasus, bisa. Menambahkan atribut dimensi pada gambar dan menyiapkan tinggi minimum untuk slot iklan tidak mengubah tampilan akhir sama sekali. Keduanya hanya memberi tahu browser lebih awal tentang ruang yang dibutuhkan.

Apakah CLS diukur berbeda di mobile dan desktop? Ya, Google menilai kedua jenis perangkat secara terpisah. Halaman yang sama bisa lulus di desktop namun gagal di mobile. Penyebabnya, layar ponsel lebih sempit sehingga pergeseran sejauh yang sama menghasilkan distance fraction lebih besar.

Kesimpulan

CLS adalah ukuran kestabilan tampilan halaman: seberapa jauh isi halaman berpindah tanpa diminta pengguna, dengan ambang aman 0,1 pada persentil 75 kunjungan. Skornya bukan penjumlahan seluruh pergeseran, melainkan total tertinggi dari satu jendela sesi maksimal lima detik. Memahami hal ini menghemat waktu Anda saat menelusuri dari mana angka di laporan berasal.

Kabar baiknya, penyebab terbesarnya sederhana. Gambar tanpa atribut dimensi ada di lebih dari separuh halaman web, dan memperbaikinya tidak menuntut perubahan desain apa pun. Kalau Anda hanya punya waktu untuk satu langkah, mulailah dari sana, lalu tunggu laporan lapangan Anda bergerak dalam empat minggu berikutnya.

Semoga artikel ini membantu.