seokita.id

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

Core Web Vitals 2025: Panduan Teknis untuk Bisnis Indonesia

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

Kesalahan yang Membuat Situs Anda Kalah Sebelum Bersaing

Banyak pemilik bisnis sudah rajin riset keyword, menulis konten panjang, dan membangun backlink — tapi ranking tetap stagnan di halaman dua atau tiga. Salah satu penyebab yang paling sering terlewat: Core Web Vitals yang buruk.

Google secara resmi menggunakan Core Web Vitals sebagai sinyal ranking sejak 2021, dan bobot sinyal ini terus meningkat. Di 2025, dengan digantinya metrik FID oleh INP (Interaction to Next Paint), banyak situs Indonesia yang sebelumnya "lolos" kini masuk zona merah lagi — tanpa pemiliknya sadar.

Dampaknya nyata: situs dengan Core Web Vitals buruk kehilangan potensi organic traffic hingga 15–20% dibanding kompetitor dengan performa serupa di faktor lain. Ini bukan teori — ini pola yang konsisten terlihat di Google Search Console klien-klien yang penah kami audit.

Artikel ini akan membawa Anda dari audit awal sampai perbaikan teknis yang bisa dieksekusi minggu ini.

Apa Itu Core Web Vitals dan Mengapa Bisnis Anda Harus Peduli

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

Metrik Singkatan Apa yang Diukur Target "Good"
Largest Contentful Paint LCP Kecepatan loading elemen terbesar ≤ 2.5 detik
Interaction to Next Paint INP Responsivitas klik/tap pengguna ≤ 200 ms
Cumulative Layout Shift CLS Stabilitas visual halaman ≤ 0.1

Yang penting dipahami: Google tidak menggunakan data lab (PageSpeed Insights saja) untuk ranking. Mereka menggunakan data dari pengguna Chrome sungguhan selama 28 hari terakhir. Artinya, perbaikan yang Anda lakukan hari ini baru tercermin di ranking sekitar 4 minggu kemudian.

Untuk pasar Indonesia, ada tantangan tambahan: mayoritas pengguna mengakses situs via smartphone dengan koneksi 4G yang tidak stabil, terutama di luar Jawa. Situs yang dioptimasi hanya untuk WiFi desktop akan gagal di field data.

Cara Audit Core Web Vitals Situs Anda (Langkah Demi Langkah)

Sebelum memperbaiki apapun, Anda perlu tahu kondisi aktual situs. Gunakan tiga sumber data ini secara berurutan:

1. Google Search Console → Core Web Vitals Report

Ini adalah sumber paling akurat karena menggunakan field data CrUX.

  • Buka search.google.com/search-console
  • Di sidebar kiri, klik "Pengalaman" → "Core Web Vitals"
  • Lihat laporan terpisah untuk Mobile dan Desktop
  • Klik "Buka Laporan" dan perhatikan URL mana yang masuk kategori "Perlu Perbaikan" atau "Buruk"

Kesalahan Umum: Banyak yang hanya melihat laporan Desktop dan mengabaikan Mobile. Di Indonesia, >70% traffic organik datang dari perangkat mobile. Prioritaskan laporan Mobile.

2. PageSpeed Insights untuk Diagnosis Detail

Setelah tahu URL mana yang bermasalah, masukkan URL tersebut ke pagespeed.web.dev.

Perhatikan dua bagian:

  • "Data Lapangan" (atas): ini field data aktual, relevan untuk ranking
  • "Peluang" dan "Diagnostik" (bawah): ini rekomendasi teknis dari data lab

3. Chrome DevTools untuk Debug Lokal

Buka situs Anda di Chrome, tekan F12, pilih tab "Performance", lalu klik record dan refresh halaman. Ini berguna untuk mengidentifikasi script atau resource mana yang memblokir rendering.

Checklist Perbaikan Core Web Vitals: LCP, INP, dan CLS

Berikut checklist teknis yang bisa langsung Anda eksekusi atau delegasikan ke developer:

✅ Perbaikan LCP (Largest Contentful Paint)

LCP biasanya adalah hero image, foto produk, atau blok teks besar di atas fold.

  • Identifikasi elemen LCP menggunakan PageSpeed Insights — lihat di bagian "Diagnostik", cari "Largest Contentful Paint element"
  • Gunakan format gambar WebP atau AVIF — ukurannya 30–50% lebih kecil dari JPEG/PNG tanpa kehilangan kualitas visual yang signifikan. Plugin seperti ShortPixel atau Imagify bisa otomasi ini di WordPress
  • Tambahkan atribut fetchpriority="high" pada tag <img> elemen LCP. Ini memberi tahu browser untuk memprioritaskan download gambar tersebut
  • Aktifkan preload untuk elemen LCP: tambahkan <link rel="preload" as="image" href="/path/hero.webp"> di <head> halaman
  • Gunakan CDN — untuk pasar Indonesia, pertimbangkan CDN dengan edge node di Singapura atau Jakarta. Cloudflare (gratis) sudah cukup untuk kebanyakan bisnis
  • Aktifkan server-side caching — jika pakai WordPress, plugin seperti WP Rocket atau LiteSpeed Cache (gratis, untuk server LiteSpeed) bisa memangkas Time to First Byte (TTFB) secara signifikan
  • Hindari lazy-load pada elemen LCP — ini kesalahan klasik. Lazy-load bagus untuk gambar di bawah fold, tapi fatal jika diterapkan ke hero image

✅ Perbaikan INP (Interaction to Next Paint)

INP mengukur seberapa cepat halaman merespons setelah pengguna klik atau tap. Ini yang paling teknis dan sering membutuhkan developer.

  • Identifikasi interaksi lambat menggunakan Web Vitals Chrome Extension — install dari Chrome Web Store, lalu klik-klik di halaman Anda dan lihat INP yang tercatat
  • Audit JavaScript pihak ketiga — skrip iklan, live chat, pixel tracking, dan popup sering menjadi biang keladi INP buruk. Gunakan tab "Coverage" di Chrome DevTools untuk melihat JS mana yang tidak terpakai
  • Defer atau async JavaScript yang tidak kritis — tambahkan atribut defer atau async pada tag <script> yang tidak perlu dieksekusi saat halaman pertama load
  • Pisahkan tugas JavaScript panjang (Long Tasks) — tugas JS yang berjalan lebih dari 50ms memblokir main thread. Jika Anda punya developer, minta mereka menggunakan setTimeout atau scheduler.yield() untuk memecah long tasks
  • Kurangi jumlah plugin WordPress — setiap plugin aktif berpotensi menambah JS. Audit plugin yang tidak aktif digunakan dan nonaktifkan

✅ Perbaikan CLS (Cumulative Layout Shift)

CLS terjadi ketika elemen di halaman bergeser saat loading — misalnya teks tiba-tiba turun karena gambar atau iklan di atasnya baru muncul.

  • Selalu tentukan dimensi width dan height pada semua tag <img> — ini memungkinkan browser mereservasi ruang sebelum gambar selesai didownload
  • Reservasi ruang untuk iklan dan embed — jika Anda menampilkan banner iklan Google AdSense atau embed YouTube, tentukan ukuran container-nya secara eksplisit di CSS
  • Hindari menyisipkan konten di atas konten yang sudah ada — popup, banner cookies, atau notifikasi yang muncul di atas halaman tanpa reservasi ruang adalah penyebab CLS umum
  • Gunakan font-display: swap di CSS untuk web fonts — ini mencegah teks tak terlihat (FOIT) dan layout shift saat font kustom selesai dimuat
  • Audit animasi CSS — animasi yang mengubah properti top, left, margin, atau padding bisa menyebabkan CLS. Gunakan transform dan opacity sebagai gantinya

Tools yang Direkomendasikan (Dengan Konteks Penggunaan)

Jangan pakai semua tools sekaligus — pilih berdasarkan kebutuhan:

Untuk monitoring rutin:

  • Google Search Console — wajib, gratis, data paling relevan untuk ranking
  • Google Analytics 4 — pantau bounce rate dan engagement rate per halaman sebagai sinyal tidak langsung

Untuk diagnosis teknis:

  • PageSpeed Insights — audit URL spesifik, gratis
  • GTmetrix — alternatif dengan waterfall chart yang lebih mudah dibaca, ada versi gratis
  • WebPageTest.org — paling detail, bisa simulasi koneksi 4G dari lokasi Singapura (paling relevan untuk pengguna Indonesia)

Untuk implementasi di WordPress:

  • WP Rocket (berbayar, ~$59/tahun) — solusi all-in-one terbaik untuk LCP dan CLS
  • LiteSpeed Cache (gratis) — jika hosting Anda menggunakan LiteSpeed web server
  • ShortPixel atau Imagify — optimasi gambar otomatis ke WebP

Catatan penting: Jika situs Anda bukan WordPress (misalnya custom PHP, Laravel, atau platform lain), perbaikan harus dilakukan di level kode. Minta developer Anda untuk mengacu pada web.dev/vitals sebagai referensi teknis resmi Google.

Studi Kasus: Situs E-Commerce yang LCP-nya Turun dari 6.2 Detik ke 2.1 Detik

Klien kami di niche fashion lokal memiliki situs WooCommerce dengan LCP rata-rata 6.2 detik di mobile (data dari Search Console). Ranking untuk keyword utama mereka stuck di posisi 8–12 selama 3 bulan meski konten dan backlink sudah diperkuat.

Tiga perubahan yang dilakukan dalam satu sprint (2 minggu):

  1. Migrasi gambar ke WebP menggunakan ShortPixel — ukuran hero image turun dari rata-rata 380KB ke 87KB
  2. Aktifkan LiteSpeed Cache dengan konfigurasi object cache dan browser cache — TTFB turun dari 1.8 detik ke 0.4 detik
  3. Tambahkan fetchpriority="high" dan preload pada hero image di template halaman produk

Hasilnya setelah 6 minggu (ada lag 4 minggu untuk field data terupdate):

  • LCP mobile: 6.2 detik → 2.1 detik (masuk zona "Good")
  • Ranking keyword utama: posisi 9 → posisi 4
  • Organic traffic: naik 34% dibanding periode yang sama bulan sebelumnya

Perubahan konten atau backlink? Nol. Hanya perbaikan teknis Core Web Vitals.

Prioritas Pertama: Mulai dari Laporan Mobile di Search Console

Jika Anda belum pernah audit Core Web Vitals sebelumnya, satu langkah yang harus dikerjakan hari ini adalah:

Buka Google Search Console → Core Web Vitals → Laporan Mobile → Sortir URL berdasarkan status "Buruk" → Ambil 5 URL dengan traffic tertinggi → Masukkan satu per satu ke PageSpeed Insights.

Dari sana, Anda akan punya daftar masalah konkret yang bisa didelegasikan ke developer atau dieksekusi sendiri menggunakan checklist di atas.

Jangan mencoba memperbaiki semua halaman sekaligus. Fokus pada 5 halaman dengan traffic organik tertinggi dulu — dampaknya paling besar, dan Anda akan bisa melihat hasilnya lebih cepat.

Core Web Vitals bukan satu-satunya faktor ranking, tapi ini adalah faktor teknis yang paling sering diabaikan oleh bisnis Indonesia — dan justru di situlah peluang terbesar Anda untuk mendahului kompetitor yang masih fokus hanya pada konten dan backlink.