Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

by Bayu Wicaksono
Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

Kesalahan yang Bikin Skor Core Web Vitals Anda Merah Terus

Banyak pemilik bisnis sudah pasang Google Analytics, sudah optimasi keyword, tapi ranking stagnan. Setelah dicek di Google Search Console, skornya merah semua — LCP 6 detik, CLS 0.3. Masalahnya bukan konten, tapi Core Web Vitals yang tidak pernah disentuh.

Core Web Vitals bukan sekadar metrik teknis untuk developer. Sejak Google mengonfirmasi Page Experience sebagai ranking signal di 2021 dan terus memperketat threshold-nya, skor ini langsung memengaruhi posisi Anda di SERP — terutama di mobile, yang menyumbang lebih dari 70% traffic organik di Indonesia.

Artikel ini bukan teori. Anda akan dapat langkah audit konkret, tools yang dipakai, dan urutan perbaikan yang paling berdampak.


Apa Itu Core Web Vitals dan Mengapa Bisnis Anda Harus Peduli

Core Web Vitals terdiri dari tiga metrik utama yang diukur Google langsung dari pengalaman pengguna nyata (disebut field data):

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman — biasanya hero image atau heading utama — muncul. Target: ≤ 2.5 detik.
  • CLS (Cumulative Layout Shift): Seberapa sering layout halaman bergeser tiba-tiba saat loading. Target: ≤ 0.1.
  • INP (Interaction to Next Paint): Pengganti FID sejak Maret 2024. Mengukur responsivitas klik/tap pengguna. Target: ≤ 200ms.

Kalau salah satu metrik ini masuk zona "Poor", Google bisa menurunkan prioritas halaman Anda di ranking — bahkan jika backlink dan konten Anda lebih kuat dari kompetitor.

Studi kasus nyata: Sebuah toko online aksesoris otomotif di Surabaya yang saya tangani punya DA cukup tinggi tapi stuck di halaman 2 untuk keyword utamanya. Setelah audit, LCP-nya 5.8 detik karena hero image 1.2 MB tanpa lazy load. Setelah dikompresi dan dikonversi ke WebP + ditambah fetchpriority="high", LCP turun ke 2.1 detik. Dalam 6 minggu, halaman tersebut naik ke posisi 4–6 halaman 1.


Cara Audit Core Web Vitals Anda Sekarang (Tanpa Bayar)

Sebelum perbaiki, Anda harus tahu kondisi aktual. Gunakan dua sumber data ini:

1. Google Search Console (Field Data)

Ini data paling akurat karena berasal dari pengguna nyata yang mengunjungi situs Anda.

  • Buka search.google.com/search-console
  • Di sidebar kiri, klik "Core Web Vitals"
  • Lihat laporan Mobile dan Desktop secara terpisah
  • Klik "Buka Laporan" untuk melihat URL mana yang bermasalah

Kesalahan umum: Banyak yang hanya cek desktop. Di Indonesia, mayoritas pengguna akses via HP dengan koneksi 4G yang tidak stabil. Selalu prioritaskan perbaikan mobile.

2. PageSpeed Insights (Lab Data)

Untuk diagnosa detail per halaman:

  • Buka pagespeed.web.dev
  • Masukkan URL halaman yang ingin dicek
  • Scroll ke bagian "Diagnostics" — di sini Anda lihat rekomendasi spesifik

Catat: lab data (PageSpeed) dan field data (Search Console) bisa berbeda. Google menggunakan field data untuk ranking. Lab data berguna untuk debugging.


Checklist Perbaikan Core Web Vitals: Urutan Prioritas

Kerjakan dalam urutan ini. Perbaikan LCP biasanya paling berdampak dan paling cepat terlihat hasilnya.

✅ Perbaikan LCP (Target: ≤ 2.5 detik)

  • Identifikasi elemen LCP — di PageSpeed Insights, klik tab "Diagnostics" lalu cari "Largest Contentful Paint element". Biasanya ini hero image atau H1 di atas fold.
  • Kompresi gambar — gunakan Squoosh.app (gratis, browser-based). Konversi PNG/JPG ke WebP. Target ukuran file: di bawah 150KB untuk hero image.
  • Tambahkan fetchpriority="high" pada tag <img> elemen LCP. Ini memberi tahu browser untuk load gambar ini lebih dulu.
    <img src="hero.webp" fetchpriority="high" alt="...">
    
  • Aktifkan lazy loading untuk gambar di bawah fold (bukan elemen LCP): tambahkan loading="lazy".
  • Gunakan CDN — Cloudflare free plan sudah cukup untuk sebagian besar bisnis Indonesia. CDN mempersingkat jarak server ke pengguna.
  • Cek hosting — shared hosting murah sering jadi bottleneck. Kalau TTFB (Time to First Byte) Anda di atas 600ms, pertimbangkan upgrade ke VPS atau hosting dengan server di Singapura/Jakarta.
  • Aktifkan caching — di WordPress, gunakan plugin seperti LiteSpeed Cache atau WP Rocket. Pastikan "Browser Caching" dan "Page Caching" aktif.

✅ Perbaikan CLS (Target: ≤ 0.1)

  • Selalu tentukan dimensi gambar — tambahkan atribut width dan height di semua tag <img>. Ini mencegah layout shift saat gambar load.
    <img src="produk.webp" width="800" height="600" alt="...">
    
  • Audit iklan dan widget — banner iklan yang load belakangan sering mendorong konten ke bawah. Sisipkan placeholder dengan ukuran tetap.
  • Cek font loading — gunakan font-display: swap di CSS agar teks muncul dengan font fallback dulu, tidak menunggu web font download selesai.
  • Hindari konten yang inject dinamis di atas fold — popup, cookie banner, atau chat widget yang muncul tiba-tiba adalah penyebab CLS tinggi yang sering terlewat.

✅ Perbaikan INP (Target: ≤ 200ms)

  • Audit JavaScript pihak ketiga — gunakan tab "Coverage" di Chrome DevTools untuk lihat JS yang tidak terpakai. Script tracking, chat widget, dan social share button sering jadi pelaku utama.
  • Defer atau async JS non-kritis — tambahkan atribut defer pada script yang tidak perlu load di awal.
  • Kurangi long tasks — di Chrome DevTools > Performance tab, rekam interaksi dan cari task yang lebih dari 50ms. Ini yang memperlambat respons klik.

Tools yang Dipakai Praktisi SEO Indonesia

Berikut stack tools yang saya gunakan untuk audit Core Web Vitals klien:

Tool Fungsi Harga
Google Search Console Field data resmi, laporan per URL Gratis
PageSpeed Insights Diagnosa lab data + rekomendasi Gratis
Squoosh.app Kompresi & konversi gambar ke WebP Gratis
Chrome DevTools Audit JS, network, performance Gratis
Cloudflare CDN + caching layer Gratis (plan dasar)
GTmetrix Waterfall chart untuk debug load order Gratis (terbatas)
WebPageTest Test dari lokasi server Indonesia Gratis

Tips: Saat pakai WebPageTest, pilih lokasi test "Singapore - EC2" — ini paling mendekati kondisi pengguna Indonesia dibanding server US atau Eropa.


Berapa Lama Sampai Ranking Naik Setelah Perbaikan?

Ini pertanyaan yang selalu muncul. Jawaban jujurnya: 4–8 minggu untuk melihat pergerakan signifikan.

Alasannya:

  1. Google menggunakan field data yang dikumpulkan selama 28 hari terakhir. Perbaikan hari ini baru tercermin penuh di data setelah 28 hari.
  2. Setelah data terupdate, butuh waktu lagi untuk Google merayapi dan menyesuaikan ranking.
  3. Faktor lain (backlink, konten, kompetitor) tetap berperan.

Yang bisa Anda pantau lebih cepat:

  • Skor PageSpeed Insights naik dalam hitungan jam setelah perbaikan
  • Bounce rate dan durasi sesi di Google Analytics — biasanya membaik dalam 1–2 minggu karena halaman lebih cepat
  • Laporan Core Web Vitals di Search Console mulai berubah setelah 28 hari data terkumpul

Kesalahan Umum yang Harus Dihindari

❌ Hanya optimasi di desktop, lupa mobile. Google menggunakan mobile-first indexing. Skor mobile yang jelek jauh lebih merusak ranking daripada skor desktop.

❌ Pasang plugin caching tapi tidak dikonfigurasi. Plugin seperti W3 Total Cache tidak langsung optimal setelah diinstall. Anda perlu aktifkan page cache, browser cache, dan minifikasi CSS/JS secara manual.

❌ Kompresi gambar tapi lupa gambar baru. Sering terjadi: gambar lama sudah dioptimasi, tapi tim konten terus upload PNG 2MB untuk artikel baru. Buat SOP internal: semua gambar harus dikompresi sebelum upload.

❌ Menganggap skor 90+ di PageSpeed sudah cukup. Skor PageSpeed adalah lab data — tidak sama dengan field data yang dipakai Google. Skor 90 tapi field data masih merah berarti pengguna nyata masih mengalami loading lambat. Selalu cek Search Console.

❌ Abaikan INP karena baru. INP menggantikan FID sejak Maret 2024. Banyak situs Indonesia yang belum pernah audit INP. Ini peluang untuk unggul dari kompetitor yang juga belum bergerak.


Prioritas Pertama yang Harus Dikerjakan Minggu Ini

Kalau Anda hanya punya waktu untuk satu hal, kerjakan ini:

Audit LCP halaman utama dan halaman produk/layanan terpenting Anda di PageSpeed Insights.

Identifikasi elemen LCP-nya. Kalau itu gambar, kompresi ke WebP dan tambahkan fetchpriority="high". Ini satu perubahan teknis yang paling sering menggerakkan skor dari merah ke hijau — dan paling cepat berdampak ke ranking.

Setelah itu, buka Google Search Console dan tandai URL mana yang masuk laporan "Poor" di Core Web Vitals. Buat daftar prioritas berdasarkan traffic — halaman dengan traffic tertinggi yang skornya merah harus diperbaiki lebih dulu.

Core Web Vitals bukan pekerjaan sekali selesai. Jadwalkan audit ulang setiap kuartal, terutama setelah ada update tema, plugin baru, atau penambahan script pihak ketiga. Satu script tracking yang tidak dioptimasi bisa menghancurkan skor INP yang sudah susah payah Anda perbaiki.