Core Web Vitals 2025: Checklist Teknis untuk Situs Indonesia

Banyak Situs Indonesia Gagal di Core Web Vitals — Padahal Ini Ranking Factor Nyata

Setelah mengaudit lebih dari 60 situs klien Indonesia sejak 2023, satu pola terus muncul: situs yang stagnan di halaman 2–3 Google hampir selalu punya skor Core Web Vitals yang buruk di data lapangan (field data), bukan hanya lab.

Ini bukan kebetulan. Sejak Google mengintegrasikan Page Experience signals ke dalam algoritma ranking-nya, Core Web Vitals — LCP, INP, dan CLS — menjadi sinyal teknis yang langsung berkontribusi pada posisi Anda di SERP. Bukan faktor minor.

Masalahnya? Sebagian besar tutorial Core Web Vitals ditulis untuk konteks global: server cepat, CDN mahal, dan koneksi pengguna yang stabil. Di Indonesia, realitanya berbeda — pengguna mobile dominan, koneksi bervariasi dari 4G kencang di Jakarta sampai 3G lambat di luar Jawa, dan banyak situs masih hosting di server dengan latency tinggi ke Indonesia.

Artikel ini memberikan checklist teknis yang spesifik untuk kondisi pasar Indonesia, lengkap dengan tool yang bisa Anda gunakan hari 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 nyata di situs Anda:

LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar (biasanya gambar hero atau blok teks utama) muncul di layar. Target: di bawah 2,5 detik.
INP (Interaction to Next Paint): Seberapa responsif situs Anda terhadap klik atau ketukan pengguna. Ini menggantikan FID sejak Maret 2024. Target: di bawah 200ms.
CLS (Cumulative Layout Shift): Seberapa banyak elemen halaman bergeser secara tak terduga saat loading. Target: di bawah 0,1.

Data dari Chrome User Experience Report (CrUX) — yang berbasis pengguna nyata Chrome — adalah yang digunakan Google untuk ranking, bukan skor PageSpeed Insights di lab. Ini penting: situs Anda bisa dapat skor 90+ di PageSpeed tapi tetap "Needs Improvement" di field data jika pengguna nyata mengalami loading lambat.

Untuk bisnis Indonesia, dampaknya konkret: situs e-commerce dengan LCP buruk kehilangan konversi karena pengguna mobile meninggalkan halaman sebelum produk muncul. Situs layanan jasa dengan CLS tinggi membuat pengguna tidak sengaja mengklik tombol yang salah karena konten bergeser.

Cara Membaca Data Core Web Vitals yang Benar

Sebelum memperbaiki, Anda harus tahu kondisi aktual situs Anda dari sudut pandang pengguna Indonesia.

Tool yang digunakan:

Google Search Console → Core Web Vitals Report — Ini sumber paling akurat. Buka GSC, klik "Core Web Vitals" di menu kiri. Lihat tab "Mobile" karena mayoritas traffic Indonesia dari mobile. Perhatikan halaman mana yang berstatus "Poor" (merah) — prioritaskan itu.
PageSpeed Insights (pagespeed.web.dev) — Masukkan URL halaman spesifik, bukan hanya homepage. Scroll ke bagian "Discover what your real users are experiencing" untuk melihat field data. Jika tidak ada data (karena traffic rendah), gunakan data lab sebagai panduan awal.
CrUX Dashboard di Looker Studio — Untuk situs dengan traffic cukup, buat dashboard CrUX gratis di Looker Studio menggunakan template resmi Google. Ini memungkinkan Anda melihat tren historis per bulan.

Kesalahan umum: Banyak pemilik situs hanya cek skor PageSpeed sekali dan puas. Padahal yang relevan adalah field data, dan field data berubah seiring perubahan perilaku pengguna. Cek minimal sebulan sekali.

Checklist Teknis: Perbaiki LCP untuk Pengguna Mobile Indonesia

LCP adalah metrik yang paling sering bermasalah di situs Indonesia. Berikut checklist lengkapnya:

Checklist LCP

Identifikasi elemen LCP Anda. Buka PageSpeed Insights, klik "LCP element" di bagian diagnostics. Biasanya ini gambar hero, banner promo, atau blok teks H1 pertama.
Preload gambar LCP. Tambahkan tag <link rel="preload" as="image" href="/gambar-hero.webp"> di <head>. Ini memberitahu browser untuk mengunduh gambar ini lebih awal.
Konversi semua gambar ke format WebP atau AVIF. Gambar JPEG/PNG biasa bisa 60–80% lebih besar. Gunakan plugin seperti ShortPixel (WordPress) atau Cloudflare Image Resizing jika pakai Cloudflare.
Aktifkan lazy loading HANYA untuk gambar di bawah fold. Jangan pernah pasang loading="lazy" pada gambar LCP — ini justru memperlambat LCP.
Gunakan hosting atau CDN dengan server di Indonesia atau Singapura. Latency dari server Eropa atau Amerika ke Indonesia bisa 200–400ms lebih tinggi. Niagahoster, Dewaweb, atau Cloudflare (Singapura PoP) adalah opsi yang terbukti lebih cepat untuk traffic Indonesia.
Aktifkan server-side caching. Untuk WordPress, gunakan LiteSpeed Cache (jika hosting mendukung LiteSpeed) atau WP Rocket. Pastikan cache dikonfigurasi untuk halaman yang paling sering dikunjungi.
Minimalkan render-blocking resources. Di PageSpeed Insights, cek bagian "Eliminate render-blocking resources". CSS kritis harus di-inline di <head>, sisanya di-defer.
Ukur dengan koneksi 4G simulasi. Di Chrome DevTools → Network → pilih "Fast 4G" lalu reload. Ini mensimulasikan kondisi pengguna Indonesia yang lebih realistis daripada koneksi fiber.

Checklist Teknis: Perbaiki INP (Pengganti FID)

INP sering diabaikan karena lebih sulit diukur daripada LCP. Tapi untuk situs dengan banyak interaksi — form, filter produk, tombol CTA — INP buruk langsung merusak konversi.

Checklist INP

Identifikasi interaksi bermasalah. Gunakan extension Chrome "Web Vitals" dari Google. Klik berbagai elemen di situs Anda dan perhatikan nilai INP yang muncul. Interaksi dengan INP di atas 200ms perlu diperbaiki.
Kurangi JavaScript yang berjalan di main thread. Buka DevTools → Performance → rekam saat mengklik elemen. Cari "Long Tasks" (blok merah di atas 50ms). JavaScript dari plugin analytics, chatbot, atau widget pihak ketiga sering jadi penyebab.
Defer JavaScript non-kritis. Script yang tidak dibutuhkan saat halaman pertama dimuat harus menggunakan atribut defer atau async.
Evaluasi plugin WordPress Anda. Setiap plugin yang aktif berpotensi menambah JavaScript. Nonaktifkan plugin yang tidak digunakan, dan cek apakah plugin aktif menambah script di halaman yang tidak memerlukannya.
Gunakan content-visibility: auto untuk konten panjang. Untuk halaman artikel atau daftar produk panjang, CSS property ini membantu browser skip rendering konten yang belum terlihat.

Checklist Teknis: Perbaiki CLS

CLS tinggi biasanya disebabkan oleh elemen yang muncul belakangan dan menggeser konten — iklan, font web, atau gambar tanpa dimensi.

Checklist CLS

Selalu tentukan width dan height untuk semua gambar. <img src="foto.jpg" width="800" height="600"> — ini memungkinkan browser mereservasi ruang sebelum gambar dimuat.
Hindari menyisipkan konten di atas konten yang sudah ada. Banner cookie, popup, atau iklan yang muncul di atas fold dan mendorong konten ke bawah adalah penyebab CLS terbesar.
Preload font web kritis. Jika menggunakan Google Fonts atau font kustom, tambahkan font-display: swap dan preload font utama. Tanpa ini, teks bisa bergeser saat font web menggantikan system font.
Periksa iklan Google AdSense atau iklan display. Slot iklan harus punya ukuran minimum yang ditetapkan di CSS. Iklan yang muncul tanpa ruang yang dipesan akan menggeser konten.
Test CLS di berbagai ukuran layar. CLS sering hanya muncul di mobile. Gunakan DevTools dengan device emulation untuk layar 360px (ukuran umum Android entry-level di Indonesia).

Tool Gratis yang Bisa Anda Gunakan Sekarang

Berikut toolkit lengkap untuk audit Core Web Vitals tanpa biaya:

Tool	Fungsi	Link
Google Search Console	Field data per halaman	search.google.com/search-console
PageSpeed Insights	Audit lab + field data	pagespeed.web.dev
Chrome DevTools	Debug LCP, INP, CLS secara real-time	Built-in di Chrome
Web Vitals Extension	Monitor CWV saat browsing	Chrome Web Store
GTmetrix	Waterfall chart untuk diagnosa LCP	gtmetrix.com
Cloudflare (Free tier)	CDN + caching dasar	cloudflare.com

Catatan untuk pengguna WordPress: Plugin "Query Monitor" sangat membantu untuk mengidentifikasi query database lambat yang berkontribusi ke TTFB tinggi — yang pada akhirnya mempengaruhi LCP.

Contoh Nyata: Situs Otomotif yang Naik 23 Posisi Setelah Perbaikan CWV

Salah satu klien di niche otomotif (dealer mobil bekas) punya halaman listing kendaraan dengan LCP rata-rata 6,2 detik di mobile dan CLS 0,34 — keduanya kategori "Poor".

Langkah yang diambil:

Migrasi hosting dari shared hosting Jakarta (TTFB 1,2 detik) ke VPS dengan Cloudflare — TTFB turun ke 280ms.
Konversi semua gambar thumbnail mobil ke WebP, tambah dimensi eksplisit — CLS turun ke 0,08.
Preload gambar mobil pertama di setiap listing — LCP turun ke 2,1 detik.
Defer script chatbot pihak ketiga — INP turun dari 380ms ke 140ms.

Hasilnya: dalam 6 minggu setelah field data CrUX diperbarui (CrUX menggunakan data 28 hari rolling), 14 halaman listing naik rata-rata 23 posisi di pencarian mobile. Organic traffic mobile naik 41%.

Waktu total perbaikan teknis: sekitar 12 jam kerja. ROI-nya jauh lebih tinggi dibanding biaya backlink baru.

Prioritas Pertama yang Harus Dikerjakan Hari Ini

Jika Anda hanya punya waktu untuk satu langkah, lakukan ini:

Buka Google Search Console → Core Web Vitals → Mobile → klik "Poor URLs".

Identifikasi 3 halaman dengan status "Poor" yang paling banyak mendapat impressi di Google Search Console (cek di laporan Performance). Halaman dengan impressi tinggi tapi ranking buruk adalah kandidat terbaik — memperbaiki CWV di sana punya dampak bisnis paling besar.

Kemudian jalankan halaman tersebut di PageSpeed Insights dan fokus pada satu metrik yang paling jauh dari target. Biasanya LCP adalah titik mulai yang paling impactful untuk situs Indonesia.

Core Web Vitals bukan pekerjaan sekali selesai. Setiap kali Anda menambah plugin baru, mengganti tema, atau memasang script iklan, metrik ini bisa berubah. Jadwalkan audit bulanan — 30 menit per bulan cukup untuk memastikan situs Anda tidak mundur.

Data lapangan berbicara lebih keras dari argumen mana pun. Mulai dari data, perbaiki yang paling buruk, ukur hasilnya.