Banyak Situs Indonesia Gagal di Core Web Vitals — Padahal Ini Sinyal Ranking Resmi
Ada satu pola yang terus berulang: pemilik bisnis sudah buat konten bagus, bangun backlink, optimasi keyword — tapi ranking stagnan. Setelah dicek di Google Search Console, skornya merah semua di bagian Core Web Vitals.
Ini bukan kebetulan. Sejak Google meluncurkan Page Experience Update, Core Web Vitals (CWV) masuk sebagai sinyal ranking resmi. Artinya, dua situs dengan konten setara — situs yang lebih cepat dan responsif akan menang di SERP.
Yang lebih krusial untuk pasar Indonesia: mayoritas pengguna mengakses internet via mobile dengan koneksi 4G yang tidak selalu stabil. Kalau situs Anda lambat di kondisi jaringan rata-rata Indonesia, Anda sudah kalah sebelum konten dibaca.
Artikel ini akan kasih Anda framework audit CWV yang bisa langsung dieksekusi — bukan teori, tapi langkah spesifik dengan tool yang tersedia gratis.
Apa Itu Core Web Vitals dan Mengapa Ini Penting untuk Bisnis Anda
Core Web Vitals terdiri dari tiga metrik utama yang diukur Google dari data pengguna nyata (disebut field data atau Chrome User Experience Report / CrUX):
1. LCP — Largest Contentful Paint Waktu hingga elemen terbesar di halaman (biasanya gambar hero atau blok teks utama) selesai dimuat. Target: di bawah 2,5 detik.
2. INP — Interaction to Next Paint (menggantikan FID sejak Maret 2024) Seberapa cepat halaman merespons interaksi pengguna (klik, tap, ketik). Target: di bawah 200 milidetik.
3. CLS — Cumulative Layout Shift Seberapa banyak elemen halaman bergeser saat loading. Pernah tap tombol tapi yang diklik malah iklan karena layout bergeser? Itu CLS tinggi. Target: di bawah 0,1.
Ketiga metrik ini diukur dari pengalaman pengguna nyata, bukan simulasi. Jadi memperbaikinya bukan sekadar lulus tes — ini benar-benar memperbaiki pengalaman pengunjung situs Anda.
Cara Audit Core Web Vitals Situs Anda (Langkah demi Langkah)
Sebelum perbaiki, Anda harus tahu posisi sekarang. Gunakan dua sumber data ini secara bersamaan:
Tool 1: Google Search Console (Data Field — Prioritas Utama)
- Buka search.google.com/search-console
- Di sidebar kiri, klik Pengalaman → Core Web Vitals
- Lihat dua laporan: Mobile dan Desktop — selalu prioritaskan mobile untuk pasar Indonesia
- Klik "Buka Laporan" untuk melihat URL mana yang masuk kategori Buruk (merah) atau Perlu Perbaikan (kuning)
- Klik salah satu URL → Google akan kasih tahu metrik mana yang bermasalah
Catatan penting: Data di Search Console adalah field data — diambil dari pengguna nyata selama 28 hari terakhir. Ini yang Google pakai untuk ranking. Kalau situs Anda traffic-nya masih kecil, data mungkin belum muncul — gunakan tool berikutnya.
Tool 2: PageSpeed Insights (Data Lab + Field)
- Buka pagespeed.web.dev
- Masukkan URL halaman yang ingin diaudit (mulai dari homepage dan halaman produk/layanan utama)
- Pilih tab Mobile
- Perhatikan dua bagian:
- "Discover what your real users are experiencing" = field data (CrUX)
- "Diagnose performance issues" = lab data dengan rekomendasi spesifik
- Screenshot hasilnya — ini baseline Anda
Tool 3: Chrome DevTools (untuk Debugging INP)
INP sering sulit dilacak karena terjadi saat interaksi. Gunakan:
- Buka situs di Chrome → klik kanan → Inspect
- Masuk ke tab Performance
- Klik rekam → lakukan interaksi (klik menu, isi form, scroll) → stop rekaman
- Cari Long Tasks (blok merah di timeline) — ini penyebab INP tinggi
Checklist Perbaikan Core Web Vitals (Eksekusi Minggu Ini)
✅ Perbaikan LCP (Target: < 2,5 detik)
- Audit gambar hero Anda. Gambar hero yang tidak dioptimasi adalah penyebab LCP buruk nomor satu. Konversi ke format WebP — ukurannya 25–35% lebih kecil dari JPEG dengan kualitas setara. Tool gratis: Squoosh.app
- Tambahkan atribut
fetchpriority="high"pada gambar LCP. Ini kasih sinyal ke browser untuk prioritaskan loading gambar tersebut. Contoh:<img src="hero.webp" fetchpriority="high" alt="..."> - Aktifkan lazy loading untuk gambar di bawah fold — tapi JANGAN lazy load gambar hero. Kesalahan umum: developer apply
loading="lazy"ke semua gambar termasuk hero, yang justru menghambat LCP. - Gunakan CDN untuk aset statis. Untuk bisnis di Indonesia, CDN dengan PoP (Point of Presence) di Jakarta atau Singapura signifikan mempercepat loading. Opsi terjangkau: Cloudflare (gratis), BunnyCDN, atau KeyCDN.
- Aktifkan server-side caching. Kalau pakai WordPress: plugin LiteSpeed Cache atau WP Rocket. Kalau pakai hosting cPanel biasa, minimal aktifkan browser caching via
.htaccess. - Periksa Time to First Byte (TTFB). TTFB > 600ms biasanya masalah hosting, bukan kode. Pertimbangkan upgrade ke hosting dengan SSD NVMe dan server di Indonesia atau Singapura.
✅ Perbaikan INP (Target: < 200ms)
- Identifikasi JavaScript berat yang block main thread. Di PageSpeed Insights, cari rekomendasi "Reduce JavaScript execution time" dan "Avoid long main-thread tasks".
- Defer atau async JavaScript non-kritis. Script analytics, chat widget, dan script iklan sering jadi biang INP tinggi. Tambahkan atribut
deferatau muat secara async. - Audit plugin WordPress Anda. Nonaktifkan plugin satu per satu, lalu ukur ulang INP. Banyak plugin yang inject JavaScript berat tanpa Anda sadari.
- Pertimbangkan Web Workers untuk operasi berat. Kalau situs Anda punya fitur filter produk atau kalkulasi kompleks, pindahkan logikanya ke Web Worker agar tidak block UI thread.
✅ Perbaikan CLS (Target: < 0,1)
- Selalu definisikan dimensi
widthdanheightpada semua elemen<img>dan<video>. Ini mencegah browser mengalokasikan ruang yang salah sebelum media selesai dimuat. - Reserve space untuk iklan dan embed. Iklan yang muncul tiba-tiba adalah penyebab CLS terbesar. Selalu bungkus container iklan dengan ukuran tetap.
- Hindari menyisipkan konten di atas konten yang sudah ada — terutama banner promo, cookie notice, atau pop-up yang muncul terlambat.
- Gunakan
font-display: swapuntuk web fonts. Ini mencegah teks invisible saat font custom loading, sekaligus mengurangi layout shift dari perubahan ukuran font. - Cek animasi CSS Anda. Animasi yang mengubah properti
top,left,margin, ataupaddingmenyebabkan layout shift. Gunakantransformdanopacitysebagai gantinya — keduanya diproses di GPU dan tidak trigger layout.
Contoh Nyata: Situs E-Commerce Lokal Naik dari 68 ke 91 di PageSpeed
Sebuah toko online aksesori fashion di Bandung datang dengan skor PageSpeed mobile 68 dan CLS 0,31 — sangat buruk. Setelah audit, ditemukan tiga masalah utama:
- Gambar produk berformat PNG dengan ukuran rata-rata 800KB per gambar. Setelah konversi ke WebP dan resize ke dimensi yang sesuai, ukuran turun ke rata-rata 95KB.
- Banner promo diinjeksi via JavaScript setelah halaman load — ini yang sebabkan CLS 0,31. Solusinya: pindahkan banner ke HTML statis dengan tinggi tetap.
- Plugin review produk memuat 3 script eksternal yang tidak di-defer. Setelah defer diterapkan, INP turun dari 380ms ke 140ms.
Hasil: skor PageSpeed mobile naik ke 91, CLS turun ke 0,08. Dalam 6 minggu (setelah Google update field data), traffic organic naik 23% untuk halaman produk yang diperbaiki.
Catatan: Perubahan CWV butuh waktu 28–35 hari untuk tercermin di Search Console dan ranking, karena Google pakai rolling window 28 hari untuk field data. Jangan panik kalau tidak langsung berubah.
Tools Tambahan yang Wajib Anda Bookmark
| Tool | Fungsi | Harga |
|---|---|---|
| PageSpeed Insights | Audit CWV + rekomendasi spesifik | Gratis |
| Google Search Console | Field data CWV dari pengguna nyata | Gratis |
| WebPageTest | Test dari server Jakarta, waterfall detail | Gratis |
| Squoosh | Kompresi & konversi gambar ke WebP | Gratis |
| CrUX Dashboard | Pantau tren CWV situs Anda | Gratis |
| Cloudflare | CDN + caching + optimasi aset otomatis | Gratis (plan dasar) |
Tips khusus WebPageTest: Saat test, pilih lokasi "Singapore — EC2" sebagai proxy terdekat untuk simulasi pengguna Indonesia. Ini kasih gambaran lebih realistis dibanding server US.
Kesalahan Umum yang Harus Dihindari
❌ Hanya fokus ke skor lab, bukan field data. Skor PageSpeed (lab) dan data Search Console (field) bisa berbeda signifikan. Google menggunakan field data untuk ranking. Kalau skor lab Anda 90 tapi field data merah, Anda masih punya masalah ranking.
❌ Optimasi desktop, lupa mobile. Untuk pasar Indonesia, >70% traffic datang dari mobile. Selalu prioritaskan skor mobile.
❌ Perbaiki sekali, lupa monitoring. CWV bisa memburuk setelah update plugin, tambah script baru, atau pasang iklan baru. Set reminder bulanan untuk cek Search Console.
❌ Lazy load semua gambar. Lazy loading gambar hero adalah kesalahan klasik yang langsung menghancurkan LCP. Hanya lazy load gambar yang berada di bawah fold.
Prioritas Pertama: Mulai dari Halaman dengan Traffic Tertinggi
Jangan coba perbaiki semua halaman sekaligus. Buka Google Search Console → Performance → filter by page → urutkan berdasarkan Clicks tertinggi. Ambil 5 halaman teratas, audit dengan PageSpeed Insights, dan eksekusi checklist di atas untuk halaman-halaman itu lebih dulu.
Logikanya sederhana: memperbaiki CWV di halaman yang sudah punya traffic akan memberikan dampak ranking dan konversi paling cepat. Setelah 5 halaman itu selesai, baru lanjut ke halaman berikutnya.
Core Web Vitals bukan tren sesaat — ini sudah jadi bagian permanen dari algoritma Google. Semakin cepat Anda eksekusi, semakin besar keunggulan kompetitif Anda di SERP Indonesia.