seokita.id

SEO teknis, riset keyword, on-page optimization untuk pasar Indonesia

Core Web Vitals 2025: Panduan Teknis untuk Situs Indonesia

by Bayu Wicaksono
Core Web Vitals 2025: Panduan Teknis untuk Situs Indonesia

Banyak Situs Indonesia Gagal di Core Web Vitals — Padahal Fixnya Tidak Selalu Mahal

Dari audit yang saya lakukan terhadap lebih dari 40 situs bisnis lokal sepanjang 2024, satu pola terus berulang: pemilik bisnis sudah rajin produksi konten, sudah pasang backlink, tapi ranking stagnan. Setelah dicek di PageSpeed Insights, skornya merah semua — LCP di atas 4 detik, CLS 0.3+, dan INP yang bahkan tidak pernah mereka dengar sebelumnya.

Core Web Vitals bukan sekadar metrik teknis yang hanya relevan untuk developer. Sejak Google mengintegrasikannya ke dalam Page Experience signal, metrik ini secara langsung memengaruhi bagaimana Googlebot menilai kualitas halaman Anda — dan itu berdampak ke ranking, terutama di niche kompetitif seperti keuangan, properti, dan e-commerce.

Artikel ini bukan penjelasan teori. Ini adalah workflow audit yang bisa Anda jalankan sendiri hari ini, dengan tools yang sebagian besar gratis.

Apa Itu Core Web Vitals dan Mengapa Bisnis Anda Harus Peduli

Core Web Vitals terdiri dari tiga metrik utama yang diukur Google langsung dari data pengguna nyata (disebut field data atau CrUX — Chrome User Experience Report):

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman (biasanya gambar hero atau blok teks besar) muncul. Target: di bawah 2,5 detik.
  • INP (Interaction to Next Paint): Pengganti FID sejak Maret 2024. Mengukur responsivitas halaman saat pengguna klik, tap, atau ketik. Target: di bawah 200 ms.
  • CLS (Cumulative Layout Shift): Seberapa sering elemen halaman bergeser secara tak terduga saat loading. Target: di bawah 0,1.

Yang sering disalahpahami: Google menggunakan field data (dari pengguna Chrome nyata), bukan hanya lab data dari PageSpeed Insights. Artinya, kalau mayoritas pengunjung Anda pakai HP mid-range dengan koneksi 4G di Surabaya atau Medan, itulah yang dihitung — bukan simulasi dari server Google di Amerika.

Implikasinya: situs Anda mungkin terlihat cepat di laptop Anda, tapi lambat di mata Google.

Cara Audit Core Web Vitals: Langkah demi Langkah

Berikut workflow audit yang saya gunakan untuk klien. Tidak butuh budget besar — semua tools di bawah ini gratis atau punya free tier yang cukup.

Langkah 1: Cek Field Data di Google Search Console

Buka Search Console → Core Web Vitals (ada di menu "Experience"). Di sini Anda akan melihat halaman mana yang masuk kategori "Poor", "Needs Improvement", atau "Good" berdasarkan data pengguna nyata.

Kesalahan umum: Banyak pemilik situs langsung lari ke PageSpeed Insights tanpa cek Search Console dulu. Padahal Search Console mengelompokkan URL berdasarkan pola masalah yang sama — jadi Anda tahu mana yang harus diprioritaskan.

Export daftar URL "Poor" dan urutkan berdasarkan traffic tertinggi. Mulai dari sana.

Langkah 2: Diagnosa Detail dengan PageSpeed Insights

Masukkan URL prioritas ke PageSpeed Insights. Perhatikan dua bagian:

  1. Field Data (atas): Ini data nyata dari pengguna Chrome. Kalau tidak ada data, berarti traffic Anda belum cukup untuk masuk CrUX.
  2. Lab Data (bawah): Simulasi. Berguna untuk debugging tapi bukan yang dihitung Google untuk ranking.

Scroll ke bagian "Opportunities" dan "Diagnostics" — di sinilah rekomendasi spesifik muncul.

Langkah 3: Identifikasi Penyebab LCP Lambat

LCP lambat biasanya disebabkan oleh:

  • Gambar hero tidak dioptimasi — masih PNG 2MB, belum pakai format WebP atau AVIF.
  • Tidak ada fetchpriority="high" pada tag <img> untuk gambar LCP.
  • Server response time (TTFB) tinggi — kalau TTFB di atas 600ms, masalahnya di hosting, bukan di gambar.
  • Render-blocking resources — CSS atau JavaScript yang memblokir rendering awal.

Untuk situs WordPress di hosting lokal Indonesia, TTFB sering jadi biang kerok. Coba pindah ke hosting yang punya server di Jakarta (bukan Singapore) dan aktifkan object caching.

Langkah 4: Diagnosa INP

INP adalah metrik yang paling sering diabaikan karena relatif baru. Cara termudah untuk melihat masalah INP:

  1. Buka Chrome DevTools → tab Performance.
  2. Klik "Record", lalu interact dengan halaman (klik menu, isi form, scroll).
  3. Cari "Long Tasks" — blok merah di timeline. Ini JavaScript yang berjalan lebih dari 50ms dan memblokir respons UI.

Penyebab INP tinggi yang paling sering saya temukan di situs Indonesia:

  • Plugin WordPress yang berlebihan — setiap plugin tambah JavaScript. Audit dengan Query Monitor.
  • Google Tag Manager yang tidak dikelola — tag yang ditumpuk tanpa dibersihkan selama bertahun-tahun.
  • Third-party scripts — live chat widget, pixel iklan, widget media sosial yang load synchronously.

Langkah 5: Perbaiki CLS

CLS biasanya muncul karena:

  • Gambar tanpa atribut width dan height — browser tidak tahu berapa ruang yang harus disiapkan.
  • Iklan atau embed yang muncul tiba-tiba dan mendorong konten ke bawah.
  • Font web yang swap terlambat (gunakan font-display: swap dan preload font utama).

Fix paling cepat: tambahkan width dan height ke semua tag <img>. Ini bisa dilakukan tanpa developer kalau Anda pakai WordPress — plugin seperti Autoptimize atau plugin image optimization biasanya punya opsi ini.

Checklist Core Web Vitals untuk Situs Indonesia

Berikut checklist yang bisa Anda eksekusi minggu ini. Centang yang sudah selesai, kerjakan yang belum.

Audit & Monitoring

  • Cek laporan Core Web Vitals di Google Search Console
  • Ekspor daftar URL "Poor" dan urutkan berdasarkan traffic
  • Jalankan PageSpeed Insights untuk 5 URL prioritas (mobile mode)
  • Pasang monitoring berkelanjutan via Treo.sh (gratis, terhubung ke CrUX)

LCP

  • Konversi semua gambar hero ke format WebP atau AVIF
  • Tambahkan fetchpriority="high" dan loading="eager" ke gambar LCP
  • Ukur TTFB — kalau di atas 600ms, pertimbangkan upgrade hosting atau aktifkan CDN
  • Aktifkan full-page caching (WP Rocket, LiteSpeed Cache, atau Nginx FastCGI)
  • Preload font utama di <head>

INP

  • Audit plugin WordPress dengan Query Monitor — nonaktifkan yang tidak krusial
  • Pindahkan semua third-party scripts ke load defer atau async
  • Audit Google Tag Manager — hapus tag yang tidak aktif
  • Gunakan Partytown untuk isolasi third-party scripts (untuk situs Next.js/Gatsby)

CLS

  • Tambahkan width dan height eksplisit ke semua tag <img>
  • Set dimensi tetap untuk container iklan dan embed
  • Tambahkan font-display: swap di CSS font
  • Test CLS di WebPageTest.org dengan throttling 4G (simulasi pengguna Indonesia)

Tools yang Saya Gunakan (dan Rekomendasikan)

Tool Fungsi Harga
Google Search Console Field data, laporan URL bermasalah Gratis
PageSpeed Insights Diagnosa detail per URL Gratis
WebPageTest.org Test dengan lokasi & device spesifik Gratis
Treo.sh Monitoring CrUX historis Gratis (basic)
Chrome DevTools Performance tab Diagnosa INP & long tasks Gratis
Query Monitor (WordPress) Audit plugin & query lambat Gratis

Satu tips: saat test di WebPageTest, pilih lokasi Singapore dan device Moto G4 (atau sejenisnya). Ini paling mendekati kondisi pengguna Indonesia dengan HP mid-range.

Studi Kasus Singkat: Situs E-Commerce Fashion Lokal

Klien saya di niche fashion lokal punya masalah LCP 5,8 detik dan CLS 0,28. Setelah audit, ditemukan tiga masalah utama:

  1. Gambar produk di homepage masih JPG, rata-rata 800KB per gambar.
  2. Slider hero pakai plugin JavaScript berat yang load synchronously.
  3. Tidak ada dimensi eksplisit di gambar produk — setiap kali gambar load, konten di bawahnya bergeser.

Yang kami lakukan:

  • Konversi gambar ke WebP via ShortPixel (biaya sekitar Rp150.000/bulan untuk volume mereka).
  • Ganti slider dengan static hero image — slider hampir selalu buruk untuk LCP.
  • Tambahkan width dan height ke semua gambar produk via filter WordPress.
  • Aktifkan LiteSpeed Cache dengan full-page cache dan object cache.

Hasilnya setelah 6 minggu (field data butuh waktu terakumulasi):

  • LCP turun ke 2,1 detik ✓
  • CLS turun ke 0,07 ✓
  • Organic traffic naik 23% — sebagian karena ranking naik, sebagian karena bounce rate turun (pengguna tidak kabur karena halaman lambat).

Perlu dicatat: 6 minggu adalah waktu yang wajar untuk melihat perubahan di field data. Jangan panik kalau tidak ada perubahan instan di minggu pertama.

Kesalahan Umum yang Harus Dihindari

❌ Hanya fokus ke skor PageSpeed, bukan field data. Skor lab 90+ tidak otomatis berarti field data Anda bagus. Google menilai berdasarkan pengalaman pengguna nyata.

❌ Mengoptimasi desktop tapi mengabaikan mobile. Google menggunakan mobile-first indexing. Prioritaskan skor mobile di PageSpeed Insights.

❌ Fix sekali lalu lupa. Core Web Vitals bisa memburuk setiap kali Anda pasang plugin baru, update tema, atau tambah script iklan. Pasang monitoring rutin.

❌ Menganggap hosting murah cukup. Hosting shared dengan server di luar negeri adalah penyebab TTFB tinggi yang paling sering saya temukan. Ini tidak bisa diperbaiki dengan optimasi gambar saja.

Prioritas Pertama: Mulai dari Search Console Hari Ini

Dari semua langkah di atas, satu yang paling krusial untuk dikerjakan lebih dulu: buka Google Search Console dan lihat laporan Core Web Vitals sekarang.

Banyak pemilik bisnis yang sudah pasang Search Console tapi tidak pernah buka laporan ini. Padahal di sana sudah ada daftar URL mana yang "Poor", dikelompokkan berdasarkan jenis masalah, dan bisa langsung di-export.

Dari situ, Anda punya data untuk memutuskan apakah masalah utama Anda ada di LCP, INP, atau CLS — dan baru eksekusi fix yang relevan. Jangan optimasi secara membabi buta tanpa tahu dulu di mana masalahnya.

Core Web Vitals bukan silver bullet untuk ranking. Tapi di niche yang kompetitif, di mana konten dan backlink dua situs bersaing sudah setara, ini sering jadi pembeda. Dan tidak ada alasan untuk membiarkan masalah teknis yang bisa diperbaiki menghambat konten yang sudah susah payah Anda buat.