seokita.id

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

Core Web Vitals Indonesia: Panduan Teknis 2025

by Bayu Wicaksono
Core Web Vitals Indonesia: Panduan Teknis 2025

Kesalahan yang Membuat Skor CWV Anda Merah Terus

Banyak pemilik bisnis Indonesia sudah pasang Google Analytics, sudah riset keyword, sudah nulis artikel—tapi rankingnya jalan di tempat. Setelah dicek di Google Search Console, tab Core Web Vitals penuh warna merah dan oranye.

Masalahnya bukan konten. Masalahnya adalah sinyal teknis yang Google pakai sejak 2021 sebagai ranking factor resmi: Core Web Vitals (CWV).

Yang lebih menyebalkan: mayoritas template WordPress murah yang populer di Indonesia—termasuk yang dijual di Themeforest dengan label "SEO Friendly"—secara default menghasilkan skor CWV buruk di mobile. Sementara 78% traffic organik Indonesia datang dari perangkat mobile (data Statcounter Q1 2025).

Artikel ini bukan teori. Ini workflow audit CWV yang saya pakai untuk klien di niche keuangan dan otomotif, lengkap dengan tools gratis dan urutan prioritas perbaikan.

Apa Itu Core Web Vitals dan Kenapa Bisnis Anda Harus Peduli

Core Web Vitals adalah tiga metrik yang Google gunakan untuk mengukur pengalaman pengguna nyata di halaman Anda:

  • LCP (Largest Contentful Paint) — Seberapa cepat elemen terbesar di halaman (biasanya gambar hero atau heading utama) muncul. Target: ≤ 2.5 detik.
  • INP (Interaction to Next Paint) — Seberapa responsif halaman saat pengguna klik atau tap. Ini menggantikan FID sejak Maret 2024. Target: ≤ 200ms.
  • CLS (Cumulative Layout Shift) — Seberapa stabil layout halaman saat loading. Pernah mau klik tombol tapi tiba-tiba bergeser? Itu CLS tinggi. Target: ≤ 0.1.

Google menggunakan data field data (pengalaman pengguna nyata yang dikumpulkan Chrome) bukan hanya lab data. Artinya, meski PageSpeed Insights Anda hijau semua di desktop, kalau pengguna Chrome di Indonesia mengalami loading lambat, skor field data Anda tetap merah.

Dampak bisnis konkret: Sebuah studi internal yang saya lakukan pada 12 situs e-commerce Indonesia (2024) menunjukkan bahwa situs dengan LCP > 4 detik rata-rata memiliki bounce rate 23% lebih tinggi dibanding kompetitor dengan LCP < 2.5 detik untuk keyword yang sama. Bounce rate tinggi = Google menganggap halaman Anda tidak relevan = ranking turun.

Cara Audit Core Web Vitals: Langkah demi Langkah

Sebelum memperbaiki, Anda harus tahu kondisi aktual. Jangan langsung percaya skor PageSpeed Insights—itu lab data, bukan field data.

Tools yang Dibutuhkan (Semua Gratis)

  1. Google Search Console → Tab Experience → Core Web Vitals
  2. PageSpeed Insights (pagespeed.web.dev) — untuk diagnosis per halaman
  3. Chrome DevTools → Tab Performance → rekam sesi loading
  4. CrUX Dashboard (lookerstudio.google.com) — untuk tren historis field data
  5. WebPageTest.org — untuk waterfall chart detail, pilih lokasi server Jakarta

Checklist Audit CWV (Urutan Eksekusi)

  • Buka Google Search Console → Experience → Core Web Vitals → catat halaman mana yang berstatus "Poor" (merah). Prioritaskan halaman dengan impression tinggi di tab Performance.
  • Jalankan PageSpeed Insights untuk 3 URL terburuk. Catat nilai LCP, INP, CLS di bagian Field Data (bukan Lab Data).
  • Identifikasi elemen LCP di bagian Opportunities dan Diagnostics. PageSpeed Insights akan menunjukkan elemen spesifik yang menjadi LCP (misalnya: <img class="wp-post-image">)
  • Cek CLS dengan Chrome DevTools: buka halaman → F12 → tab Performance → klik rekam → refresh halaman → cari Layout Shift di timeline.
  • Cek INP dengan ekstensi Chrome Web Vitals (pasang dari Chrome Web Store) → buka halaman → klik beberapa elemen → lihat nilai INP real-time.
  • Ekspor laporan dari Search Console ke spreadsheet. Kelompokkan URL berdasarkan template (homepage, artikel, halaman produk) karena satu fix sering berlaku untuk semua halaman dengan template sama.

Perbaikan LCP: Gambar Hero Adalah Tersangka Utama

Dari pengalaman audit 40+ situs Indonesia, 80% masalah LCP bersumber dari gambar hero yang tidak dioptimasi. Ini urutannya:

1. Konversi Gambar ke Format WebP

JPEG dan PNG masih dominan di situs Indonesia. WebP rata-rata 30–50% lebih kecil dengan kualitas visual yang sama.

Cara di WordPress: Pasang plugin Imagify atau ShortPixel. Setting: konversi otomatis ke WebP, kompresi lossy 80%. Jangan pakai plugin konversi lebih dari satu sekaligus—konflik plugin adalah penyebab CLS tersembunyi.

2. Tambahkan fetchpriority="high" pada Gambar LCP

Ini trik yang sering terlewat. Tambahkan atribut ini langsung di tag <img> gambar hero Anda:

<img src="hero.webp" fetchpriority="high" alt="Deskripsi gambar" width="1200" height="630">

Atribut ini memberi sinyal ke browser untuk mendahulukan download gambar ini sebelum resource lain. Dampaknya bisa signifikan—pada satu klien otomotif saya, LCP turun dari 3.8 detik ke 2.1 detik hanya dengan penambahan atribut ini.

3. Aktifkan Preload untuk Font Kustom

Font Google seperti Poppins atau Montserrat populer di situs Indonesia. Kalau tidak di-preload, font ini memblokir rendering dan menaikkan LCP.

Tambahkan di <head>:

<link rel="preload" href="/fonts/poppins-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Perbaikan CLS: Stop Layout Bergeser Saat Loading

CLS tinggi biasanya disebabkan tiga hal:

1. Gambar tanpa dimensi eksplisit Selalu tambahkan width dan height di tag <img>. Browser perlu tahu ukuran gambar sebelum gambar selesai diunduh agar bisa menyiapkan ruang yang tepat.

2. Iklan atau embed yang muncul tiba-tiba Kalau Anda pakai Google AdSense atau embed media sosial, reservasi ruang untuk elemen ini dengan CSS:

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

3. Font flash (FOUT/FOIT) Gunakan font-display: swap di CSS font Anda. Ini mencegah layout shift saat font kustom menggantikan fallback font.

Perbaikan INP: JavaScript Adalah Biang Kerok

INP adalah metrik paling teknis dan paling sering diabaikan. Nilai INP buruk (> 200ms) artinya halaman Anda terasa "lemot" saat diklik—terutama di HP mid-range yang dominan di Indonesia.

Checklist Perbaikan INP

  • Audit JavaScript pihak ketiga: Buka Chrome DevTools → tab Network → filter JS → sort by Size. Script dari live chat, popup marketing, dan pixel tracking sering menjadi beban terbesar.
  • Tunda script tidak kritis dengan atribut defer atau async: 
    <script src="analytics.js" defer></script>
  • Gunakan WordPress plugin caching dengan JS defer: WP Rocket atau LiteSpeed Cache punya fitur ini di pengaturan File Optimization. Aktifkan "Delay JavaScript Execution".
  • Hapus plugin yang tidak aktif digunakan: Setiap plugin WordPress menambah JavaScript ke frontend. Plugin yang tidak aktif tapi tidak dihapus tetap bisa loading script.
  • Cek Long Tasks di Chrome DevTools → tab Performance → cari blok merah berlabel Long Task (> 50ms). Ini adalah JavaScript yang memblokir main thread.

Studi Kasus: Situs Finansial Naik dari Posisi 8 ke Posisi 3

Klien saya di niche pinjaman online (traffic organik ~15.000/bulan) punya konten bagus tapi stuck di halaman 1 posisi 7–9 untuk keyword utama mereka.

Kondisi awal (November 2024):

  • LCP: 4.2 detik (Poor)
  • INP: 340ms (Poor)
  • CLS: 0.28 (Poor)

Yang dikerjakan dalam 3 minggu:

  1. Konversi semua gambar ke WebP via ShortPixel
  2. Tambah fetchpriority="high" di gambar hero
  3. Aktifkan LiteSpeed Cache dengan JS defer
  4. Hapus 4 plugin live chat dan popup yang tidak aktif
  5. Tambahkan dimensi eksplisit di semua <img> via fungsi WordPress

Hasil setelah 6 minggu (menunggu Google re-crawl dan update field data):

  • LCP: 2.1 detik (Good)
  • INP: 145ms (Good)
  • CLS: 0.08 (Good)
  • Posisi keyword utama: naik dari rata-rata posisi 8.2 ke posisi 3.1
  • CTR naik 41% (karena posisi lebih tinggi)

Perlu dicatat: ranking tidak naik instan. Field data CWV butuh 28 hari untuk diperbarui Google. Jangan panik kalau tidak ada perubahan di minggu pertama.

Kesalahan Umum yang Harus Dihindari

❌ Mengandalkan skor Lab Data saja PageSpeed Insights Lab Data diukur dari server Google di Amerika dengan koneksi 4G simulasi. Field Data mencerminkan pengguna nyata Anda di Indonesia dengan berbagai kondisi jaringan. Selalu prioritaskan Field Data.

❌ Mengoptimasi desktop saja Google menggunakan mobile-first indexing. Skor CWV yang dihitung untuk ranking adalah skor mobile Anda. Selalu test di mode mobile.

❌ Memperbaiki semua halaman sekaligus Fokus dulu pada halaman dengan impression tertinggi di Search Console. Satu halaman landing utama yang diperbaiki dampaknya lebih besar dari 50 halaman blog yang jarang dikunjungi.

❌ Lupa re-submit sitemap setelah perbaikan Setelah perbaikan teknis, minta Google crawl ulang via Search Console → URL Inspection → Request Indexing untuk halaman prioritas.

Prioritas Pertama: Mulai dari LCP Halaman Utama Anda

Kalau Anda hanya punya waktu satu jam minggu ini, lakukan ini:

  1. Buka PageSpeed Insights → masukkan URL homepage atau landing page utama Anda.
  2. Scroll ke bagian Field Data. Kalau LCP merah atau oranye, itu prioritas nomor satu.
  3. Lihat elemen LCP yang ditunjukkan di bagian Diagnostics.
  4. Kalau elemen LCP adalah gambar: konversi ke WebP dan tambahkan fetchpriority="high".
  5. Kalau elemen LCP adalah teks/heading: cek apakah ada font kustom yang memblokir rendering.

Core Web Vitals bukan sprint—ini marathon. Tapi bisnis yang mulai sekarang akan memiliki keunggulan teknis yang semakin sulit dikejar kompetitor yang masih mengabaikannya. Untuk infrastruktur server yang solid, pertimbangkan best VPS hardening practices agar performa situs Anda tetap optimal dan aman.

Satu perbaikan LCP hari ini bisa mengubah posisi ranking Anda dalam 6–8 minggu ke depan.