Pengalaman Menangani Skor Buruk CLS Core Web Vitals: Panduan Lengkap, Contoh Kode, dan Cara Mengatur Iklan

Bayangkan Anda sedang membaca artikel di ponsel. Jari Anda sudah siap menggulir. Tiba-tiba teks melompat turun. Anda kehilangan baris yang tadi dibaca. Kejadian sepele? Bagi pengunjung, tidak. Mereka tidak peduli penyebab teknisnya. Yang mereka rasakan hanya situs ini mengganggu. Dan jika tidak ditangani, situs Anda perlahan akan dianggap buruk oleh Google karena CLS Core Web Vitals tidak lolos uji.

Di dunia web, masalah ini punya nama comulative layout shift atau CLS. Metrik ini bagian dari Core Web Vitals, yaitu seperangkat ukuran yang dipakai Google untuk menilai pengalaman pengguna di sebuah halaman. Skor CLS yang buruk berarti halaman Anda sering bergeser sendiri.

Banyak pemilik situs baru sadar saat membuka laporan Search Console. Muncul tulisan merah CLS issue: more than 0.25. Lalu bingung. Apa artinya? Dari mana asalnya? Bagaimana memperbaikinya?

Artikel ini menjawab semua pertanyaan itu. Kita mulai dari dasar. Lalu kita bedah cara kerja skor CLS, cara mengukurnya, dan cara mengatasi CLS dengan contoh kode yang bisa langsung dipakai. Saya juga akan membagikan rangkuman dari banyak pengalaman menangani masalah ini dari beberapa website klien.

Ada satu bagian yang saya bahas secara khusus, yakni iklan. Iklan adalah penyebab CLS yang paling sering terabaikan dan terlewat, terutama di blog dan situs berita. Anda akan melihat mengapa iklan membuat CLS Core Web Vitals memburuk. Anda juga akan tahu cara mengatur slot iklan agar penghasilan tetap jalan dan halaman tetap stabil.

Siapkan kopi. Mari mulai dari yang paling dasar.

Apa Itu CLS Core Web Vitals dan Mengapa Penting?

Pernah klik sebuah tombol, lalu halaman tiba-tiba bergeser? Yang terklik malah iklan. Kesal, bukan?

Itulah masalah yang diukur oleh CLS. Singkatan dari Cumulative Layout Shift. Dalam bahasa Indonesia, CLS berarti pergeseran tata letak kumulatif.

CLS adalah satu dari tiga metrik Core Web Vitals. Dua lainnya adalah LCP (Largest Contentful Paint) dan INP (Interaction to Next Paint). INP menggantikan FID sebagai metrik responsivitas pada Maret 2024.

Pembagian tugasnya jelas:

• LCP mengukur kecepatan memuat konten utama.
• INP mengukur respons halaman terhadap interaksi.
• CLS mengukur stabilitas visual.

Mengapa CLS Core Web Vitals perlu Anda urus? Ada dua alasan.

Pertama dan paling utama adalah pengguna. Halaman yang melompat-lompat membuat orang salah klik. Mereka kehilangan posisi baca. Mereka kesal, lalu pergi.

Kedua, mesin pencari. Google memasukkan Core Web Vitals ke dalam sinyal page experience. Tapi jangan salah paham. Relevansi konten tetap jauh lebih penting. CLS bukan jimat SEO. Namun CLS yang buruk jelas merugikan.

Ada data yang menarik. Yahoo! JAPAN News memperbaiki CLS di situsnya. Skornya turun sekitar 0,2. Hasilnya, tayangan halaman per sesi naik sekitar 15 persen. Durasi sesi naik sekitar 13 persen. Rasio pentalan turun. Angka itu dipublikasikan di web.dev sebagai studi kasus. Hasil setiap situs tentu berbeda. Tapi arahnya masuk akal, yaitu layout stabil, pengunjung betah.

Case Study Japan News ini dapat Anda baca artikel Web.dev berjudul Cara pengoptimalan CLS meningkatkan JAPAN News per sesi sebesar 15%

Cara Kerja Skor CLS Core Web Vitals dari Rumus dan Ambang Batas

Sebelum mengatasi CLS, pahami dulu cara menghitungnya. Anda tidak perlu jago matematika. Rumusnya sederhana.

Skor satu pergeseran = impact fraction × distance fraction

• Impact fraction adalah seberapa luas area layar yang terdampak. Area itu gabungan posisi elemen sebelum dan sesudah bergeser.
• Distance fraction adalah seberapa jauh elemen bergeser. Jaraknya dibagi dimensi viewport terbesar (tinggi atau lebar).

Contoh dari dokumentasi Google. Sebuah elemen mengisi setengah viewport. Lalu ia turun sejauh 25 persen tinggi viewport. Area terdampaknya jadi 75 persen, atau 0,75. Jarak geser 0,25. Maka skor pergeserannya 0,75 × 0,25 = 0,1875.

Satu pergeseran itu saja sudah membuat CLS masuk kategori buruk. Lihat tabel berikut.

Ada satu aturan penting soal penilaian. Google memakai persentil ke-75 dari kunjungan nyata. Dipisah antara mobile dan desktop. Artinya, minimal 75 persen kunjungan harus berskor baik. Satu halaman yang mulus di laptop Anda belum tentu mulus di ponsel pengunjung.

Window Sesi dan Cara CLS Dihitung Saat Ini

Dulu CLS menjumlahkan semua pergeseran selama halaman terbuka. Itu tidak adil untuk halaman yang dibuka lama. Sejak Chrome 91, perhitungannya berubah.

Pergeseran dikelompokkan dalam window sesi. Satu window berisi pergeseran yang jaraknya kurang dari 1 detik satu sama lain. Panjang maksimal satu window adalah 5 detik. Skor CLS adalah window terburuk, bukan total keseluruhan.

Pergeseran yang Tidak Dihitung

Tidak semua gerakan merugikan skor CLS. Dua pengecualian utama yang perlu Anda catat:

• Pergeseran setelah input pengguna. Jika terjadi dalam 500 milidetik setelah klik atau ketukan, tidak dihitung. Contohnya menu yang terbuka setelah diklik.
• Animasi dengantransform. Elemen yang bergerak lewat transform tidak mengubah layout. Jadi aman.

Perhatikan batas 500 milidetik. Kalau data baru tiba 2 detik setelah klik, pergeseran itu tetap dihitung.

Cara Mengukur CLS Core Web Vitals Data Lab dan Data Lapangan

Mengatasi CLS dimulai dari pengukuran. Ada dua jenis data.

Data lab berasal dari simulasi. Contohnya Lighthouse. Cocok untuk debugging. Tapi Lighthouse hanya melihat proses pemuatan. Pergeseran yang terjadi saat Anda menggulir halaman bisa terlewat.

Data lapangan berasal dari pengguna sungguhan. Contohnya Chrome UX Report (CrUX). Inilah data yang dipakai Google untuk menilai. Ini juga yang menangkap masalah CLS dari iklan, karena iklan sering muncul belakangan.

Alat yang bisa Anda pakai:

1. PageSpeed Insights. Menampilkan data lapangan dan lab sekaligus.
2. Laporan Core Web Vitals di Search Console. Mengelompokkan URL bermasalah.
3. Chrome DevTools, panel Performance. Ada jalur Layout Shifts yang menandai setiap pergeseran.
4. Rendering di DevTools, opsi Layout Shift Regions. Area yang bergeser akan berkedip biru.
5. Libraryweb-vitals. Untuk mengirim data CLS pengguna nyata ke analitik Anda.

Menemukan Elemen Penyebab CLS dengan JavaScript

Skrip kecil ini mencatat setiap pergeseran di konsol. Jalankan di DevTools.

let total = 0;

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      total += entry.value;
      console.log('Pergeseran:', entry.value, entry.sources);
    }
  }
  console.log('Total sementara:', total);
}).observe({ type: 'layout-shift', buffered: true });

Catatan: skrip ini menjumlahkan semua pergeseran. Metode resmi memakai window sesi. Tapi untuk mencari pelaku, skrip ini sudah cukup. Buka entry.sources. Di sana tertera elemen yang bergeser.

Penyebab Utama CLS Core Web Vitals yang Buruk

Sebelum masuk ke solusi, kenali dulu para pelakunya. Dalam praktiknya penyebab CLS itu itu saja:

• Gambar tanpa atribut ukuran.
• Iklan, embed, dan iframe tanpa ruang cadangan.
• Konten yang disisipkan dinamis di atas konten lain.
• Web font yang mengubah ukuran teks saat dimuat.
• Animasi yang memakai properti layout.
• Banner cookie atau popup yang mendorong halaman.

Semua punya satu akar, browser tidak tahu ukuran elemen sebelum elemen itu tiba. Jadi ia menggambar halaman tanpa ruang untuknya. Begitu elemen datang, semuanya terdorong.

Kunci mengatasi CLS Core Web Vitals pun satu sebenarnya, sediakan ruang lebih dulu. Mari kita bahas satu persatu.

Mengatasi CLS dari Gambar dan Video

Ini penyebab CLS paling klasik. Dan paling mudah diperbaiki.

Kode di bawah ini bermasalah:

<img src="foto-prabowo.jpg" alt="foto prabowo">

Browser tidak tahu tinggi gambar. Awalnya tingginya nol. Saat gambar selesai diunduh, teks di bawahnya terdorong. Itu CLS.

Perbaikannya sederhana, tambahkan width dan height.

<img src="foto-prabowo.jpg" alt="foto prabowo" width="800" height="600">

Angka itu bukan ukuran tampil. Itu rasio aspek. Browser modern memakainya untuk menghitung ruang yang dibutuhkan sebelum gambar dimuat. Fitur ini didukung semua browser utama sejak sekitar 2020.

Agar gambar tetap responsif, tambahkan CSS ini:

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

Sekarang gambar mengecil mengikuti lebar layar. Rasionya tetap terjaga. Ruangnya tetap tersedia. CLS aman.

Untuk Gambar Responsif dan Lazy Loading

Jika memakai srcset, tetap isi width dan height. Pakai dimensi gambar asli yang rasionya sama.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="1600" height="900"
  loading="lazy"
  alt="Banner utama">

Lazy loading tidak menyebabkan CLS, selama ruangnya sudah dicadangkan. Tanpa width dan height, lazy loading justru memperparah pergeseran.

Jangan lazy load gambar utama di atas lipatan. Itu merusak LCP.

Untuk Video dan Embed YouTube

Iframe tidak punya rasio bawaan. Gunakan CSS aspect-ratio.

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

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Sekarang kotak video sudah punya tinggi sebelum player dimuat. Halaman tidak melompat.

Mengatasi CLS Core Web Vitals dari Iklan

Banyak situs berhasil memperbaiki gambar dan font. Tapi CLS tetap merah. Penyebabnya hampir selalu satu iklan. Terkadang hal ini yang membuat pemilik situs, apalagi bisnis media menjadi cukup dilematis. Copot iklan berarti mengurangi revenue, dan sementara memasang iklan bisa jadi merusak core web vitals.

Sebab, semua iklan itu tidak bisa diprediksi. Ia dimuat belakangan. Ukurannya bisa berbeda-beda. Kadang tidak muncul sama sekali. Semua itu resep CLS yang buruk.

Anda boleh khawatir soal itu, tetapi setelah membaca dan mempraktikkan ini, semoga situs Anda makin membaik dengan performa iklan yang tetap bagus.

Mengapa Iklan Membuat CLS Core Web Vitals Buruk

Bayangkan skenario ini. Artikel Anda punya satu jatah iklan di bawah paragraf kedua. Slotnya kosong, tingginya nol.

Pembaca mulai membaca. Dua detik kemudian, iklan 300×250 piksel masuk. Seluruh paragraf di bawahnya turun 250 piksel. Pembaca kehilangan posisi.

Di layar ponsel dengan tinggi viewport sekitar 800 piksel, pergeseran itu bisa menyentuh sebagian besar layar. Skor CLS satu kali kejadian itu saja bisa melewati 0,1.

Terkait hal ini, saya mengumpulkan beberapa identifikasi dan beberapa pola yang sering terjadi dari web-seb yang kami tangani:

• Slot tanpa tinggi. Iklan datang, konten terdorong.
• Ukuran iklan beragam. Slot menerima 300×250, 336×280, atau 300×600. Ukuran yang datang berbeda dari perkiraan.
• Slot yang menciut. Tidak ada iklan yang mengisi. Slot dikempiskan. Konten di bawahnya naik.
• Iklan disisipkan di atas konten. Skrip iklan menambah elemen di atas teks yang sedang dibaca.
• Iklan yang di-refresh dengan ukuran berbeda. Tinggi slot berubah di tengah sesi.
• Auto ads. Format otomatis menyisipkan iklan di posisi yang tidak Anda rencanakan.

Prinsip Utama Optimasi CLS untuk Iklan Adalah Mencadangkan Ruang untuk Iklan

Satu prinsip menyelesaikan sebagian besar masalah CLS dari iklan. Beri setiap slot iklan tinggi tetap sebelum iklan dimuat.

.ad-slot {
  min-height: 280px;      /* tinggi iklan terbesar yang umum */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;    /* opsional: penanda area iklan */
}

Lalu pakai di HTML:

<div class="ad-slot" id="div-gpt-ad-artikel-1"></div>

Sekarang ruang sudah ada. Iklan masuk ke ruang kosong. Tidak ada yang terdorong.

Atur Ukuran Berbeda untuk Mobile dan Desktop

Iklan mobile dan desktop punya ukuran berbeda. Jadi ruangnya pun harus dibedakan.

.ad-slot {
  min-height: 280px;   /* mobile: 300x250 atau 336x280 */
}

@media (min-width: 768px) {
  .ad-slot-leaderboard {
    min-height: 90px;  /* desktop: 728x90 */
  }
}

Jika memakai Google Publisher Tag (GPT), samakan dengan size mapping. Slot di mobile tidak boleh meminta ukuran yang tidak muat.

googletag.cmd.push(function () {
  const mapping = googletag.sizeMapping()
    .addSize([768, 0], [[728, 90], [970, 90]])
    .addSize([0, 0], [[300, 250], [336, 280]])
    .build();

  googletag
    .defineSlot('/1234567/artikel-atas', [[300, 250], [336, 280], [728, 90], [970, 90]], 'div-gpt-ad-artikel-1')
    .defineSizeMapping(mapping)
    .addService(googletag.pubads());

  googletag.enableServices();
});

Angka /1234567/artikel-atas hanya contoh. Ganti dengan kode unit iklan Anda.

Slot dengan Banyak Ukuran Harus juga dengan Banyak Strategi

Bagaimana jika satu slot bisa menerima beberapa ukuran? Misalnya 300×250 dan 300×600.

Ada dua pilihan. Keduanya punya risiko.

Panduan Google Ad Manager menyarankan mencadangkan ruang untuk ukuran terbesar. Jika ruang kosongnya terasa mengganggu, pakai ukuran yang paling sering tayang. Cek laporan Ad Manager Anda untuk tahu ukuran mana yang dominan.

Praktik terbaik lainnya yang pernah kami praktikkan adalah dengan menyempitkan daftar ukuran. Semakin sedikit ukuran yang diizinkan, semakin mudah ruangnya diprediksi.

Jangan Mengempiskan Ruang Iklan yang Kosong

Ada opsi di GPT yang mengempiskan slot saat tidak ada iklan. Namanya collapseEmptyDiv.

Secara teknis berguna. Tidak ada kotak kosong di halaman. Tapi kalau slot berada di atas konten yang sedang dibaca, pengempisan itu menarik konten ke atas. Itu CLS.

Aturannya:

• Slot di atas lipatan atau di tengah artikel: jangan dikempiskan.
• Slot jauh di bawah lipatan, yang belum terlihat: boleh dikempiskan. Pergeserannya terjadi di luar layar.

Bahkan di slot yang tidak dikempiskan, isi ruang kosong dengan sesuatu yang rapi. Misalnya tulisan kecil ‘Iklan’ dan latar abu-abu. Hasilnya tetap enak dilihat.

Letakkan Iklan di Posisi yang Aman

Posisi iklan menentukan seberapa parah risikonya.

Hindari menyisipkan iklan di atas konten yang sedang dibaca. Ini penyebab pergeseran terburuk. Sisipkan iklan di bawah elemen yang sudah stabil, dan pastikan slotnya sudah punya tinggi.

Taruh iklan di bawah lipatan dan muat dengan lazy loading. Iklan yang belum terlihat tidak mengganggu apa pun. Tapi tetap cadangkan ruangnya. Google Publisher Tag menyediakan enableLazyLoad untuk ini.

googletag.pubads().enableLazyLoad({
  fetchMarginPercent: 100,   // mulai ambil iklan saat 1 layar lagi akan terlihat
  renderMarginPercent: 50,
  mobileScaling: 2.0
});

Nilai di atas hanya contoh awal. Sesuaikan lewat pengujian.

Gunakan iklan melayang yang posisinya tetap. Iklan anchor atau sticky di tepi layar memakai posisi fixed. Ia tidak mendorong konten. Tapi pastikan footer Anda tidak tertutup. Beri padding bawah secukupnya.

body {
  padding-bottom: 60px; /* sesuaikan dengan tinggi iklan sticky */
}

.sticky-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 50px;
}

Contoh Sebelum dan Sesudah, Slot Iklan di Artikel

Berikut gambaran nyata, disederhanakan.

Sebelum (CLS buruk):

<p>Paragraf pertama artikel...</p>
<div id="iklan-tengah"></div>
<p>Paragraf kedua artikel...</p>

Tidak ada tinggi pada #iklan-tengah. Saat iklan 300×250 tiba, paragraf kedua terdorong 250 piksel. Skor CLS satu kejadian itu bisa mencapai 0,15 atau lebih, tergantung ukuran layar dan lokasi pembaca.

Sesudah (CLS aman):

<p>Paragraf pertama artikel...</p>
<div class="ad-slot" id="iklan-tengah" aria-label="Iklan"></div>
<p>Paragraf kedua artikel...</p>

.ad-slot {
  min-height: 280px;
  margin: 24px 0;
  background: #f4f4f4;
}

Ruang 280 piksel sudah menunggu. Iklan masuk tanpa mendorong apa pun. Pergeseran dari slot ini nyaris nol.

Perlu dicatat: angka skor di atas bersifat ilustrasi. Hasil nyata bergantung pada ukuran viewport dan posisi slot. Selalu verifikasi dengan data lapangan Anda sendiri.

Hati-hati dengan Auto Ads dan Iklan Refresh

• Auto ads. Format otomatis AdSense memutuskan sendiri tempat iklan. Ini praktis. Tapi risiko CLS-nya lebih tinggi karena Anda tidak mengendalikan posisinya. Setelah mengaktifkan, pantau skor CLS di Search Console. Jika naik, kurangi format otomatis atau pindah ke penempatan manual.
• Iklan refresh. Jika slot Anda menyegarkan iklan secara berkala, pastikan ukurannya tetap. Pakai wadah dengan tinggi tetap. Hindari mengganti iklan 300×250 dengan 300×600 di tengah sesi.
• Pihak ketiga yang menyisipkan elemen. Sebagian skrip iklan menambah elemen lain, seperti label atau tombol tutup. Uji semuanya di DevTools.

Daftar Periksa Iklan dan CLS

• Setiap slot punya min-height.
• Tinggi berbeda untuk mobile dan desktop.
• Slot yang berukuran ganda mencadangkan ruang terbesar atau paling umum.
• Slot di atas lipatan tidak dikempiskan.
• Iklan tidak disisipkan di atas konten yang sedang dibaca.
• Iklan di bawah lipatan dimuat lazy.
• Iklan sticky memakai posisi fixed dan padding cadangan.
• Refresh iklan tidak mengubah tinggi wadah.
• CLS diuji lagi setiap menambah jaringan atau format iklan baru.

Mengatasi CLS Core Web Vitals dari Web Font

Web font juga bisa merusak skor CLS. Pola kejadiannya begini.

Browser menampilkan teks dengan font cadangan, misalnya Arial. Beberapa saat kemudian, font web yang asli selesai diunduh. Teks berganti. Lebar huruf dan tinggi baris berubah. Paragraf menjadi lebih panjang atau lebih pendek. Semua yang di bawahnya bergeser.

Tiga langkah untuk mengatasinya.

1. Preload Font Penting

Beri tahu browser agar mengunduh font lebih awal.

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

Atribut crossorigin wajib ada, meskipun fontnya berasal dari domain yang sama.

2. Pilih font-display yang Tepat

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

• swap: teks tampil segera dengan font cadangan, lalu berganti. Risiko CLS ada.
• optional: font dipakai hanya jika sudah siap sangat cepat. Jika tidak, font cadangan tetap dipakai di halaman itu. Tidak ada pergantian, jadi CLS dari font hampir nol.

Pilih optional jika stabilitas lebih penting. Pilih swap jika font merek harus selalu tampil.

3. Samakan Metrik Font Cadangan

Ini teknik tingkat lanjut. Tujuannya membuat font cadangan berukuran hampir sama dengan font asli. Sehingga pergantian nyaris tak terasa.

@font-face {
  font-family: 'Inter Cadangan';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'Inter Cadangan', sans-serif;
}

Nilai persentase di atas hanya ilustrasi. Hitung nilai yang tepat untuk font Anda. Alat seperti Fontaine atau Capsize bisa membantu. Jika memakai Next.js, next/font melakukan penyesuaian ini secara otomatis.

Mengatasi CLS Core Web Vitals dari Konten Dinamis

Konten yang muncul belakangan adalah musuh CLS lainnya. Contohnya banner cookie, kotak newsletter, widget komentar, dan hasil API.

Banner Cookie dan Notifikasi

Banner yang mendorong halaman turun itu bermasalah. Dua solusi.

Solusi 1: buat banner melayang. Pakai position: fixed di bawah layar. Banner menumpuk di atas konten dan tidak mendorongnya.

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

Solusi 2: cadangkan ruang dari awal. Jika banner harus mendorong konten, sediakan ruangnya sejak render pertama. Jangan menyuntikkannya lewat JavaScript setelah halaman tampil.

Jika Konten dari API, Maka Gunakan Skeleton

Saat data dimuat lewat JavaScript, tampilkan kerangka dengan ukuran yang sama dengan hasil akhir.

.kartu-skeleton {
  min-height: 320px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: kilau 1.2s infinite;
}

@keyframes kilau {
  to { background-position: -200% 0; }
}

Setelah data tiba, ganti kerangka dengan kartu asli yang tingginya sama. Pergeseran nyaris hilang.

Tombol ‘Muat Lebih Banyak’

Jika pengguna menekan tombol dan konten baru muncul di bawah tombol, itu aman. Konten tidak mendorong apa pun yang sedang dibaca.

Tapi jika konten disisipkan di atas tombol, posisi tombol bergeser. Ingat juga batas 500 milidetik. Kalau respons server lambat, pergeseran dihitung.

Konten Jauh di Bawah Layar

Untuk halaman panjang, CSS content-visibility: auto mempercepat render. Tapi tanpa ukuran cadangan, bisa memicu CLS saat bagian itu dirender.

.bagian-panjang {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

Nilai 800px adalah perkiraan tinggi. Dengan auto, browser mengingat tinggi aslinya setelah bagian itu pernah dirender.

Mengatasi CLS dari Animasi

Animasi yang mengubah top, left, width, atau height memicu perhitungan layout. Itu bisa menambah CLS.

Gunakan transform. Browser tidak menghitung ulang layout, dan CLS tidak bertambah.

Kurang baik:

.panel {
  transition: top 0.3s;
}
.panel.buka {
  top: 100px;
}

Lebih baik:

.panel {
  transition: transform 0.3s;
}
.panel.buka {
  transform: translateY(100px);
}

Hasil visualnya sama. Dampak ke CLS jauh berbeda. Animasi transform juga lebih mulus.

Tips Mengatasi CLS Core Web Vitals di WordPress dan CMS

Banyak pembaca mengelola situs di WordPress. Berikut langkah praktisnya.

• Periksa tema. Pastikan gambar pilihan dan logo punya atribut width dan height. WordPress modern menambahkannya otomatis untuk gambar dari pustaka media.
• Audit plugin. Plugin slider, popup, dan iklan sering jadi biang CLS. Nonaktifkan satu per satu sambil memantau skor.
• Atur wadah iklan. Bungkus kode iklan dalam div dengan min-height. Banyak plugin penyisip iklan menyediakan kolom CSS khusus.
• Hati-hati dengan caching dan optimasi. Plugin yang menunda CSS atau JavaScript bisa membuat halaman tampil tanpa gaya lalu melompat. Uji setiap perubahan.
• Ukuran logo dan header. Logo yang dimuat tanpa ukuran membuat seluruh halaman turun. Tetapkan ukuran lewat CSS.
• Pantau di Search Console. Laporan Core Web Vitals mengelompokkan URL serupa. Satu perbaikan template bisa memperbaiki ratusan halaman.

Alur Kerja untuk Cara Mengatasi CLS Secara Sistematis

Jangan menebak. Ikuti urutan ini.

1. Cek data lapangan. Buka PageSpeed Insights atau Search Console. Cari tahu apakah masalah ada di mobile, desktop, atau keduanya.
2. Kelompokkan halaman. Biasanya satu template bermasalah. Mulai dari yang trafiknya terbesar.
3. Reproduksi di DevTools. Aktifkan throttling jaringan dan CPU. Buka jalur Layout Shifts di panel Performance.
4. Temukan elemennya. Lihat sources pada setiap pergeseran.
5. Tentukan penyebabnya. Gambar? Iklan? Font? Konten dinamis?
6. Cadangkan ruang atau ubah animasinya. Gunakan teknik di atas.
7. Uji ulang. Cek lagi di DevTools.
8. Tunggu data lapangan. CrUX memakai data 28 hari terakhir. Perbaikan baru terlihat penuh setelah beberapa minggu. Sabar.
9. Pasang pemantauan. Kirim data CLS lewat library web-vitals supaya regresi cepat ketahuan.

Kesalahan Umum Saat Mengatasi CLS Core Web Vitals

Hanya mengandalkan Lighthouse. Skor lab bisa hijau, sementara data lapangan merah. Iklan dan perilaku pengguna sering baru muncul di lapangan.

Menguji hanya di desktop. Penilaian mobile dan desktop terpisah. Mobile biasanya lebih rentan karena layarnya sempit dan pergeseran tampak lebih besar.

Mengira lazy loading menyebabkan CLS. Bukan lazy loading-nya. Yang bermasalah adalah ketiadaan ruang cadangan.

Menghilangkan iklan sebagai solusi. Tidak perlu. Iklan dan CLS yang baik bisa berdampingan, asalkan ruangnya diatur.

Lupa menguji ulang setelah perubahan. Tema baru, plugin baru, jaringan iklan baru, semuanya bisa membawa CLS buruk kembali.

Checklist Akhir Mengatasi CLS Core Web Vitals

Salin daftar ini untuk audit situs Anda.

Gambar dan media

• Semua <img> punya width dan height.
• CSS memakai max-width: 100% dan height: auto.
• Video dan iframe memakai aspect-ratio.

Iklan

• Semua slot punya min-height.
• Ukuran dibedakan untuk mobile dan desktop.
• Slot di atas lipatan tidak dikempiskan.
• Tidak ada iklan yang disisipkan di atas teks yang sedang dibaca.
• Refresh iklan tidak mengubah tinggi wadah.

Font

• Font utama di-preload.
• font-display dipilih dengan sengaja.
• Metrik font cadangan disesuaikan.

Konten dinamis dan animasi

• Banner dan popup memakai posisi fixed atau ruang cadangan.
• Konten API memakai skeleton berukuran tepat.
• Animasi memakai transform, bukan top atau height.

Pemantauan

• Search Console dan PageSpeed Insights dicek rutin.
• Data CLS pengguna nyata dikirim ke analitik.

Kesimpulannya Beritahu Browser Ukuran Elemen Sebelum Ia Tiba

Mengatasi CLS Core Web Vitals pada dasarnya  memberi tahu browser ukuran elemen sebelum elemen itu tiba.

Gambar? Beri width dan height. Video? Pakai aspect-ratio. Iklan? Cadangkan ruang dengan min-height. Font? Preload dan samakan metriknya. Konten dinamis? Pakai skeleton. Animasi? Pakai transform.

Untuk situs beriklan, perhatikan lebih serius. Iklan adalah penyebab CLS yang paling sering terlewat. Atur slot, tentukan ukuran, dan jangan kempiskan slot di area baca.

Target Anda jelas: skor CLS di bawah 0,1 pada persentil ke-75, untuk mobile dan desktop. Capai itu dengan perbaikan kecil yang konsisten. Ukur, perbaiki, ukur lagi.

Halaman yang stabil bukan hanya soal skor. Ia soal rasa hormat pada pembaca. Mereka datang untuk membaca, bukan mengejar tombol yang berlari.

Jika Anda mengalami persoalan Core Web Vitals, Alifbata Digital siap membantu menyelesaikan persoalan tersebut dan meningkatkan performa web Anda melalui Layanan SEO atau Privat SEO.