Banyak Situs Indonesia Gagal di Core Web Vitals — Padahal Ini Ranking Factor
Coba buka PageSpeed Insights dan masukkan URL situs Anda sekarang. Jika skornya di bawah 70 untuk mobile, Anda tidak sendirian — tapi juga tidak aman.
Dari audit yang saya lakukan terhadap 40+ situs bisnis lokal Indonesia sepanjang 2024, lebih dari 65% gagal di minimal satu metrik Core Web Vitals pada perangkat mobile. Yang paling sering bermasalah: LCP (Largest Contentful Paint) lambat karena hosting murah + gambar tidak dioptimasi, dan CLS (Cumulative Layout Shift) tinggi karena iklan atau font loading yang tidak dikontrol.
Google menggunakan data Core Web Vitals dari Chrome User Experience Report (CrUX) sebagai sinyal ranking sejak 2021. Di 2025, metrik INP (Interaction to Next Paint) sudah menggantikan FID secara penuh. Banyak situs yang belum menyesuaikan diri.
Artikel ini bukan teori. Ini checklist yang bisa Anda eksekusi minggu ini.
Kenapa Core Web Vitals Kritis untuk Bisnis di Indonesia
Pengguna internet Indonesia mayoritas mengakses lewat smartphone dengan koneksi 4G yang tidak stabil — terutama di luar Jawa. Situs yang lambat di kondisi ini langsung ditinggal.
Data dari Google Think Indonesia menunjukkan bahwa 53% pengguna mobile meninggalkan halaman yang butuh lebih dari 3 detik untuk dimuat. Untuk bisnis e-commerce atau landing page iklan, ini langsung berdampak ke konversi, bukan hanya ranking.
Dua dampak nyata yang saya lihat di klien:
- Situs properti di Surabaya: Setelah memperbaiki LCP dari 6,2 detik ke 2,1 detik, organic traffic naik 34% dalam 8 minggu. Tidak ada perubahan konten, hanya optimasi teknis.
- Toko online fashion Bandung: CLS yang tinggi (0,31) menyebabkan tombol "Beli Sekarang" bergeser saat halaman dimuat — bounce rate turun 18% setelah CLS diperbaiki ke 0,04.
Ini bukan kebetulan. Core Web Vitals yang buruk menyakiti bisnis dari dua arah: ranking turun dan konversi iklan berbayar juga ikut turun.
Memahami Tiga Metrik Utama Core Web Vitals 2025
Sebelum masuk ke checklist, pahami target angka yang harus Anda capai:
| Metrik | Target "Good" | Perlu Perbaikan | Buruk |
|---|---|---|---|
| LCP (loading) | ≤ 2,5 detik | 2,5–4,0 detik | > 4,0 detik |
| INP (interaktivitas) | ≤ 200ms | 200–500ms | > 500ms |
| CLS (stabilitas visual) | ≤ 0,1 | 0,1–0,25 | > 0,25 |
LCP mengukur seberapa cepat elemen terbesar di halaman (biasanya gambar hero atau blok teks besar) muncul di layar.
INP menggantikan FID sejak Maret 2024. INP mengukur responsivitas halaman terhadap semua interaksi pengguna — klik, tap, ketikan — bukan hanya interaksi pertama. Ini lebih ketat dan banyak situs yang belum sadar skornya turun.
CLS mengukur seberapa banyak elemen halaman bergeser secara tak terduga saat dimuat.
Checklist Perbaikan Core Web Vitals: Eksekusi Minggu Ini
Perbaikan LCP (Target: ≤ 2,5 detik)
□ Identifikasi elemen LCP Anda Buka Chrome DevTools → tab Performance → rekam loading halaman. Atau gunakan PageSpeed Insights — scroll ke bagian "Diagnostics" dan cari "Largest Contentful Paint element".
□ Gunakan fetchpriority="high" pada gambar hero
Jika elemen LCP adalah gambar, tambahkan atribut ini:
<img src="hero.webp" fetchpriority="high" alt="...">
Ini memberi tahu browser untuk memprioritaskan download gambar ini sebelum resource lain.
□ Konversi semua gambar ke format WebP atau AVIF WebP rata-rata 30% lebih kecil dari JPEG dengan kualitas setara. Gunakan plugin Imagify atau ShortPixel jika pakai WordPress. Untuk non-WordPress, gunakan Squoosh.app untuk konversi manual.
□ Aktifkan preload untuk font kritis
Font yang di-load dari Google Fonts sering jadi bottleneck. Tambahkan di <head>:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
□ Pindah ke hosting yang lebih cepat atau aktifkan CDN Hosting shared murah di Indonesia sering punya TTFB (Time to First Byte) di atas 800ms. Target TTFB Anda adalah di bawah 200ms. Pertimbangkan Cloudflare (gratis) sebagai CDN, atau upgrade ke hosting dengan server NVMe seperti Niagahoster Business atau IDCloudHost.
□ Aktifkan caching server-side Untuk WordPress: plugin WP Rocket atau LiteSpeed Cache (gratis, jika hosting pakai LiteSpeed). Konfigurasi page cache, browser cache, dan GZIP/Brotli compression.
Perbaikan INP (Target: ≤ 200ms)
Ini metrik yang paling banyak diabaikan karena tidak terlihat secara visual, tapi Google mengukurnya dari data pengguna nyata.
□ Audit JavaScript yang berjalan di main thread Buka Chrome DevTools → tab Performance → rekam saat Anda klik sesuatu di halaman. Lihat apakah ada "Long Tasks" (blok merah/kuning) yang melebihi 50ms. Long tasks ini yang membuat halaman terasa "lag" saat diklik.
□ Defer atau hapus JavaScript yang tidak kritis
Script analytics pihak ketiga, chat widget, dan script iklan sering jadi penyebab INP buruk. Tambahkan atribut defer atau async:
<script src="analytics.js" defer></script>
□ Audit plugin WordPress Anda Setiap plugin menambah JavaScript. Gunakan Query Monitor (plugin gratis) untuk melihat script mana yang di-load di setiap halaman. Nonaktifkan plugin yang tidak digunakan di halaman tertentu dengan plugin Asset CleanUp.
□ Gunakan content-visibility: auto untuk konten di bawah fold
CSS property ini memberi tahu browser untuk tidak me-render konten yang belum terlihat pengguna:
.below-fold-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
Perbaikan CLS (Target: ≤ 0,1)
□ Selalu tentukan dimensi gambar secara eksplisit
Kesalahan paling umum. Jika gambar tidak punya width dan height, browser tidak tahu berapa ruang yang harus disiapkan, sehingga konten di bawahnya bergeser saat gambar muncul.
<img src="produk.webp" width="800" height="600" alt="...">
□ Reservasi ruang untuk iklan dan embed Jika halaman Anda punya slot iklan Google AdSense atau embed YouTube, tentukan ukuran container-nya terlebih dahulu:
.ad-container {
min-height: 250px;
width: 300px;
}
□ Gunakan font-display: swap untuk web font
Tanpa ini, teks akan muncul terlambat dan menyebabkan layout shift. Tambahkan di CSS:
@font-face {
font-family: 'NamaFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
□ Hindari menyisipkan konten di atas konten yang sudah ada Banner notifikasi, cookie consent, atau promo bar yang muncul di bagian atas halaman setelah konten dimuat adalah penyebab CLS klasik. Pastikan elemen ini sudah disiapkan ruangnya sejak awal, atau muncul di bagian bawah layar.
Tools yang Saya Gunakan untuk Audit Core Web Vitals
Berikut stack tools yang saya pakai, semuanya bisa diakses gratis:
1. PageSpeed Insights — pagespeed.web.dev Data lab (simulasi) + data lapangan dari CrUX. Mulai selalu dari sini. Perhatikan tab "Mobile" — lebih penting dari Desktop untuk situs Indonesia.
2. Google Search Console → Core Web Vitals Report Ini menampilkan data pengguna nyata, bukan simulasi. Buka GSC → Experience → Core Web Vitals. Jika ada URL yang masuk kategori "Poor", prioritaskan perbaikan di sana.
3. WebPageTest — webpagetest.org Untuk analisis mendalam. Pilih lokasi server Jakarta dan koneksi 4G untuk simulasi pengguna Indonesia yang realistis.
4. Chrome DevTools — Panel Performance dan Lighthouse Untuk debugging spesifik. Tekan F12 → tab Lighthouse → Generate report.
5. CrUX Dashboard di Looker Studio Google menyediakan template gratis di Looker Studio yang menampilkan tren Core Web Vitals situs Anda dari waktu ke waktu. Cari "CrUX Dashboard" di Looker Studio Gallery.
Kesalahan Umum yang Sering Saya Temukan
⚠ Kesalahan #1: Hanya mengoptimasi versi Desktop PageSpeed Insights Desktop bisa hijau semua, tapi Mobile tetap merah. Google menggunakan mobile-first indexing. Fokus ke skor Mobile.
⚠ Kesalahan #2: Mengira skor lab = pengalaman pengguna nyata Skor PageSpeed adalah simulasi. Yang benar-benar mempengaruhi ranking adalah data CrUX (pengguna nyata). Cek Google Search Console untuk data lapangan.
⚠ Kesalahan #3: Menginstall banyak plugin "speed" sekaligus WP Rocket + W3 Total Cache + Autoptimize aktif bersamaan justru konflik dan memperlambat situs. Pilih satu plugin caching utama.
⚠ Kesalahan #4: Mengabaikan INP setelah FID "sudah bagus" FID sudah tidak digunakan sejak Maret 2024. INP jauh lebih ketat. Situs yang dulu skornya bagus di FID bisa buruk di INP.
Prioritas Pertama: Mulai dari LCP
Jika Anda baru akan mulai dan tidak tahu harus dari mana, fokus ke LCP terlebih dahulu.
Alasannya sederhana: LCP punya dampak terbesar yang terukur terhadap ranking dan konversi. Perbaikan LCP juga sering otomatis memperbaiki persepsi kecepatan situs secara keseluruhan.
Langkah pertama yang harus Anda lakukan hari ini:
- Buka PageSpeed Insights, masukkan URL halaman utama dan satu halaman produk/layanan Anda.
- Catat angka LCP mobile dan identifikasi elemen LCP-nya.
- Jika elemen LCP adalah gambar, konversi ke WebP dan tambahkan
fetchpriority="high". - Ukur ulang setelah perubahan di-deploy.
Perbaikan teknis seperti ini tidak butuh konten baru atau backlink. Hasilnya bisa terlihat dalam 4–8 minggu di Google Search Console setelah Google merekrawl dan memperbarui data CrUX situs Anda.
Core Web Vitals bukan tren sesaat — ini infrastruktur SEO jangka panjang. Situs yang cepat dan stabil memberi Google alasan untuk mempercayai situs Anda lebih dari pesaing.