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

Kesalahan yang Bikin Situs Anda Kalah Ranking Tanpa Disadari

Banyak pemilik bisnis sudah rajin bikin konten, bangun backlink, dan optimasi keyword — tapi ranking tetap stagnan. Salah satu penyebab yang paling sering terlewat: Core Web Vitals situs Anda merah semua di Google Search Console, dan Anda tidak tahu cara membacanya.

Ini bukan teori. Data dari Ahrefs (2024) menunjukkan bahwa halaman dengan skor Core Web Vitals "Good" memiliki rata-rata posisi 1,5 poin lebih tinggi dibanding halaman dengan skor "Poor" pada keyword kompetitif. Di niche keuangan dan otomotif — dua pasar yang saya tangani langsung — perbedaan ini terasa nyata ketika kompetitor teknis lebih rapi.

Sejak Maret 2024, Google mengganti FID (First Input Delay) dengan INP (Interaction to Next Paint) sebagai metrik resmi. Banyak situs Indonesia yang sudah "lulus" FID ternyata gagal di INP. Artikel ini akan menunjukkan cara audit dan perbaikan yang bisa Anda eksekusi minggu ini.

Apa Itu Core Web Vitals dan Mengapa Bisnis Anda Harus Peduli

Core Web Vitals adalah tiga metrik yang digunakan Google untuk mengukur pengalaman pengguna secara teknis:

  • LCP (Largest Contentful Paint): Seberapa cepat konten utama halaman muncul. Target: ≤ 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat pengguna klik atau tap. Target: ≤ 200ms.
  • CLS (Cumulative Layout Shift): Seberapa stabil layout halaman saat loading. Target: ≤ 0,1.

Untuk pasar Indonesia, konteks ini penting: mayoritas pengguna mengakses situs lewat smartphone dengan koneksi 4G yang tidak stabil. Situs yang lambat di desktop bisa terasa seperti bata di HP pengguna Anda di Surabaya atau Medan.

Google menggunakan data CrUX (Chrome User Experience Report) — data nyata dari pengguna Chrome, bukan simulasi lab. Artinya, yang dinilai adalah pengalaman pengguna Anda yang sebenarnya, bukan hasil PageSpeed Insights di kantor Anda dengan WiFi 100 Mbps.

Cara Audit Core Web Vitals Situs Anda (Tools Gratis)

Sebelum memperbaiki, Anda harus tahu posisi sekarang. Gunakan tiga tools ini secara berurutan:

1. Google Search Console → Core Web Vitals Report Ini data lapangan (field data) paling akurat. Buka Search Console → pilih "Core Web Vitals" di sidebar kiri. Anda akan melihat URL mana yang "Poor", "Needs Improvement", atau "Good" berdasarkan data pengguna nyata.

Catatan penting: URL hanya muncul di laporan ini jika sudah ada cukup data CrUX (minimal ~75 kunjungan dari Chrome dalam 28 hari). Situs baru atau halaman dengan traffic rendah tidak akan muncul.

2. PageSpeed Insights (pagespeed.web.dev) Masukkan URL spesifik. Scroll ke bawah untuk melihat "Diagnose Performance Issues" — di sini Anda akan menemukan elemen mana yang menyebabkan LCP lambat, INP tinggi, atau CLS.

3. Chrome DevTools → Lighthouse Untuk debugging lebih dalam. Buka Chrome, klik kanan → Inspect → tab "Lighthouse". Jalankan audit untuk mobile. Ini data lab, jadi gunakan sebagai panduan perbaikan, bukan angka final.

Checklist Perbaikan Core Web Vitals: 7 Langkah yang Bisa Dikerjakan Minggu Ini

Berikut urutan prioritas berdasarkan dampak terbesar ke skor:

✅ Langkah 1: Identifikasi Elemen LCP

Di PageSpeed Insights, cari bagian "LCP element". Biasanya ini adalah gambar hero, foto produk, atau teks heading besar. Screenshot dan catat URL-nya.

✅ Langkah 2: Optimalkan Gambar LCP

  • Konversi ke format WebP (gunakan Squoosh.app — gratis, tidak perlu install).
  • Tambahkan atribut fetchpriority="high" pada tag <img> elemen LCP.
  • Pastikan gambar di-preload di <head>: <link rel="preload" as="image" href="hero.webp">.
  • Jangan lazy-load gambar LCP. Ini kesalahan paling umum yang saya temukan di situs klien.

✅ Langkah 3: Aktifkan Caching dan Compression

  • Aktifkan Gzip atau Brotli compression di server/hosting Anda.
  • Set cache headers untuk aset statis (CSS, JS, gambar) minimal 1 tahun.
  • Jika pakai WordPress: plugin WP Rocket atau LiteSpeed Cache mengurus ini otomatis.

✅ Langkah 4: Perbaiki INP — Kurangi JavaScript Berat

INP adalah metrik baru yang paling sering gagal. Penyebab utama: terlalu banyak JavaScript yang berjalan di main thread.

  • Di PageSpeed Insights, cari "Reduce JavaScript execution time" dan "Avoid long main-thread tasks".
  • Audit plugin WordPress Anda. Gunakan Query Monitor untuk melihat plugin mana yang load JS paling berat.
  • Pertimbangkan mengganti Google Tag Manager dengan implementasi langsung jika GTM menjadi bottleneck.
  • Defer semua JavaScript non-kritis: tambahkan atribut defer atau async pada tag <script>.

✅ Langkah 5: Perbaiki CLS — Stabilkan Layout

CLS tinggi biasanya disebabkan oleh:

  • Gambar tanpa dimensi: Selalu tambahkan width dan height pada tag <img>.
  • Iklan atau embed yang muncul tiba-tiba: Reservasi ruang dengan CSS min-height sebelum konten load.
  • Font web yang menyebabkan FOUT: Tambahkan font-display: swap di CSS dan preload font kritis.

✅ Langkah 6: Gunakan CDN untuk Pengguna Indonesia

Jika server Anda di Singapura atau US, latensi ke pengguna di Kalimantan atau Sulawesi bisa signifikan. CDN seperti Cloudflare (gratis) atau BunnyCDN menempatkan aset statis lebih dekat ke pengguna.

  • Daftar Cloudflare → arahkan nameserver domain Anda → aktifkan proxy (ikon awan oranye) untuk semua aset.
  • Aktifkan fitur "Speed → Optimization → Auto Minify" untuk CSS dan JavaScript.

✅ Langkah 7: Validasi Perbaikan di Search Console

Setelah perubahan live, kembali ke Search Console → Core Web Vitals → klik "Validate Fix" pada URL yang sudah diperbaiki. Google butuh waktu 28 hari untuk mengumpulkan data lapangan baru. Jangan panik jika skor tidak langsung berubah.

Studi Kasus: Situs Dealer Otomotif, LCP Turun dari 6,2 Detik ke 2,1 Detik

Salah satu klien saya adalah dealer otomotif di Jawa Tengah. Situs mereka punya konten bagus dan backlink dari media otomotif nasional, tapi halaman listing mobil stagnan di posisi 8–12.

Hasil audit PageSpeed Insights menunjukkan:

  • LCP: 6,2 detik — penyebab: gambar mobil berukuran 2MB+ di-load tanpa WebP, tanpa preload.
  • CLS: 0,38 — penyebab: banner iklan leasing yang muncul setelah halaman load.
  • INP: 340ms — penyebab: slider JavaScript pihak ketiga yang load di main thread.

Perbaikan yang dilakukan dalam 2 minggu:

  1. Konversi semua gambar listing ke WebP (rata-rata ukuran turun 68%).
  2. Tambah fetchpriority="high" dan preload pada gambar pertama setiap listing.
  3. Ganti slider JS berat dengan CSS-only carousel.
  4. Reservasi ruang banner iklan dengan min-height: 250px sebelum iklan load.

Hasil setelah 35 hari (satu siklus data CrUX penuh):

  • LCP turun ke 2,1 detik (dari 6,2 detik)
  • CLS turun ke 0,08 (dari 0,38)
  • INP turun ke 180ms (dari 340ms)
  • 4 halaman listing masuk halaman pertama, 2 di antaranya posisi 4–5 untuk keyword "[merek] bekas [kota]".

Ranking tidak naik semalam. Tapi setelah data lapangan terkumpul dan Google memvalidasi perbaikan, pergerakannya konsisten.

Kesalahan Umum yang Harus Dihindari

⚠️ Kesalahan #1: Mengoptimasi berdasarkan skor lab, bukan field data. Skor PageSpeed Insights di bagian "Lab Data" (Lighthouse) bisa berbeda jauh dari data lapangan CrUX. Yang dihitung Google untuk ranking adalah field data. Selalu prioritaskan laporan Search Console.

⚠️ Kesalahan #2: Lazy-load pada gambar LCP. Banyak tema WordPress mengaktifkan lazy-load untuk semua gambar secara default. Gambar LCP justru harus di-load secepat mungkin — bukan di-delay.

⚠️ Kesalahan #3: Menganggap Core Web Vitals hanya masalah developer. Keputusan konten juga memengaruhi skor. Memasang video YouTube embed di atas fold, menambah widget chat yang berat, atau menggunakan gambar resolusi tinggi tanpa kompresi — semua ini keputusan yang bisa Anda kendalikan tanpa coding.

⚠️ Kesalahan #4: Hanya mengoptimasi homepage. Google menilai Core Web Vitals per-URL. Halaman produk, halaman artikel, dan halaman kategori masing-masing punya skor sendiri. Audit semua URL yang penting secara komersial.

Tools Ringkasan untuk Audit Core Web Vitals

Tool Fungsi Biaya
Google Search Console Field data resmi, laporan per-URL Gratis
PageSpeed Insights Diagnosis detail per-URL Gratis
Chrome DevTools Lighthouse Debugging lab Gratis
Squoosh.app Kompresi dan konversi WebP Gratis
Cloudflare CDN dan optimasi aset Gratis (plan dasar)
WP Rocket Optimasi WordPress all-in-one Berbayar (~$59/tahun)
WebPageTest.org Audit mendalam dengan filmstrip Gratis

Prioritas Pertama yang Harus Anda Kerjakan Sekarang

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

Buka Google Search Console → Core Web Vitals → identifikasi URL dengan status "Poor" yang paling banyak mendapat traffic organik → buka URL tersebut di PageSpeed Insights → screenshot bagian "LCP element" → kirim ke developer atau desainer Anda dengan instruksi: konversi gambar ke WebP, tambah fetchpriority="high", dan hapus lazy-load dari elemen ini. Cara pindah hosting ke Cloudflare Pages gratis juga bisa menjadi opsi jika Anda ingin memanfaatkan infrastruktur edge computing untuk performa lebih optimal.

Satu perbaikan pada satu halaman penting lebih bernilai daripada audit menyeluruh yang tidak pernah dieksekusi. Core Web Vitals bukan proyek sekali jalan — ini monitoring berkelanjutan. Tapi mulai dari URL dengan traffic tertinggi dan masalah paling jelas adalah cara tercepat untuk melihat dampak nyata pada ranking Anda.