Core Web Vitals 2025: Checklist Teknis untuk Situs Indonesia

by Bayu Wicaksono
Core Web Vitals 2025: Checklist Teknis untuk Situs Indonesia

Kesalahan yang Membuat Situs Anda Kalah Sebelum Bersaing

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

Google secara resmi menggunakan Core Web Vitals sebagai sinyal ranking sejak 2021. Di 2025, metrik-nya sudah berubah: INP (Interaction to Next Paint) menggantikan FID sejak Maret 2024. Artinya, banyak situs yang dulu "lulus" sekarang bisa gagal tanpa disadari.

Data dari HTTP Archive menunjukkan bahwa kurang dari 45% situs mobile di Asia Tenggara memenuhi threshold "Good" untuk semua Core Web Vitals. Situs kompetitor Anda yang lambat adalah peluang — tapi kalau situs Anda juga lambat, Anda kehilangan keunggulan itu.

Artikel ini memberikan checklist teknis yang bisa Anda eksekusi minggu ini, bukan teori umum.


Apa Itu Core Web Vitals dan Mengapa Ini Urusan Bisnis Anda

Core Web Vitals adalah tiga metrik yang Google gunakan untuk mengukur pengalaman pengguna nyata (real-user experience) di halaman Anda:

  • LCP (Largest Contentful Paint): Seberapa cepat konten utama (biasanya gambar hero atau blok teks besar) muncul. Target: ≤ 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat pengguna mengklik, mengetuk, atau mengetik. Target: ≤ 200ms.
  • CLS (Cumulative Layout Shift): Seberapa stabil tata letak halaman — apakah elemen bergeser saat dimuat. Target: ≤ 0,1.

Ketiga metrik ini diukur dari data pengguna nyata (field data) via Chrome User Experience Report (CrUX), bukan hanya dari lab. Artinya, pengguna Anda di Surabaya dengan koneksi 4G yang lambat — itulah yang Google ukur.

Untuk bisnis di Indonesia, ini krusial: penetrasi mobile sangat tinggi, koneksi sering tidak stabil, dan banyak pengguna masih memakai perangkat mid-range. Situs yang dioptimasi untuk kondisi ini akan menang.


Cara Audit Core Web Vitals Situs Anda (Mulai di Sini)

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

1. Google Search Console → Core Web Vitals Report Ini adalah field data — data dari pengguna nyata. Masuk ke GSC, klik "Core Web Vitals" di sidebar kiri. Anda akan melihat halaman yang dikategorikan sebagai "Poor", "Needs Improvement", atau "Good".

Kesalahan umum: Banyak yang langsung pakai PageSpeed Insights tanpa cek GSC. Data GSC lebih relevan karena berdasarkan traffic nyata situs Anda, bukan simulasi.

2. PageSpeed Insights (pagespeed.web.dev) Masukkan URL halaman spesifik (bukan hanya homepage). Perhatikan bagian "Field Data" di atas, bukan hanya "Lab Data". Jika field data tidak muncul, berarti halaman tersebut belum punya cukup data CrUX — fokus ke halaman dengan traffic tertinggi dulu.

3. Chrome DevTools → Performance Panel Untuk diagnosis mendalam, buka halaman di Chrome, tekan F12, masuk ke tab "Performance", lalu rekam loading halaman. Ini membantu Anda menemukan script atau resource mana yang memblokir render.


Checklist Perbaikan Core Web Vitals: Eksekusi Minggu Ini

Berikut checklist berdasarkan tiga metrik. Prioritaskan halaman dengan traffic tertinggi dan konversi terbesar.

✅ Memperbaiki LCP (Largest Contentful Paint)

  • Identifikasi elemen LCP. Buka PageSpeed Insights, scroll ke bagian "Diagnostics", cari "Largest Contentful Paint element". Biasanya ini adalah gambar hero atau H1 besar.
  • Preload gambar LCP. Tambahkan tag ini di <head> HTML Anda: <link rel="preload" as="image" href="/gambar-hero.webp"> Ini memberi tahu browser untuk mengunduh gambar tersebut lebih awal.
  • Konversi gambar ke format WebP atau AVIF. Gunakan Squoosh (squoosh.app) untuk konversi manual, atau plugin seperti ShortPixel/Imagify jika pakai WordPress. WebP biasanya 25–35% lebih kecil dari JPEG dengan kualitas sama.
  • Aktifkan CDN. Untuk situs Indonesia, gunakan CDN dengan server di Asia Tenggara — Cloudflare (gratis, ada PoP di Jakarta) atau BunnyCDN. Ini bisa memotong TTFB (Time to First Byte) secara signifikan.
  • Aktifkan server-side caching. Jika pakai WordPress, plugin seperti WP Rocket atau LiteSpeed Cache (gratis untuk server LiteSpeed) sangat efektif. Pastikan caching aktif untuk pengguna yang tidak login.
  • Audit hosting Anda. Shared hosting murah sering menjadi bottleneck utama LCP. Jika TTFB Anda di atas 600ms secara konsisten, pertimbangkan pindah ke VPS atau managed WordPress hosting.

✅ Memperbaiki INP (Interaction to Next Paint)

INP adalah metrik baru yang paling sering diabaikan. Ini mengukur responsivitas — berapa lama halaman merespons setelah pengguna berinteraksi.

  • Identifikasi interaksi lambat. Di Chrome DevTools, buka tab "Performance Insights" (Chrome 102+). Klik "Measure page load" lalu coba klik tombol atau isi form di halaman. DevTools akan menandai interaksi yang lambat.
  • Audit JavaScript pihak ketiga. Script iklan (Google Ads, Meta Pixel), live chat, dan widget media sosial sering menjadi penyebab INP buruk. Gunakan PageSpeed Insights → "Third-party code" untuk melihat kontribusi masing-masing script.
  • Tunda loading script yang tidak kritis. Tambahkan atribut defer atau async pada script yang tidak perlu dijalankan saat halaman pertama dimuat: <script src="analytics.js" defer></script>
  • Pindahkan script ke bawah </body>. Script yang diletakkan di <head> tanpa defer memblokir rendering halaman.
  • Kurangi jumlah plugin WordPress. Setiap plugin menambah JavaScript ke halaman. Audit plugin aktif Anda — nonaktifkan yang tidak digunakan. Target: di bawah 20 plugin aktif untuk situs rata-rata.

✅ Memperbaiki CLS (Cumulative Layout Shift)

CLS yang buruk membuat pengguna frustrasi — bayangkan sedang mau klik tombol "Beli", tapi tiba-tiba iklan muncul dan tombolnya bergeser.

  • Tentukan dimensi gambar secara eksplisit. Selalu tambahkan atribut width dan height pada tag <img>: <img src="produk.webp" width="800" height="600" alt="Produk X"> Ini mencegah browser mengubah tata letak saat gambar selesai dimuat.
  • Reservasi ruang untuk iklan dan embed. Jika halaman Anda menampilkan iklan Google AdSense atau embed YouTube, tentukan ukuran container-nya di CSS sebelum konten dimuat.
  • Audit font web. Font yang dimuat dari Google Fonts atau Adobe Fonts bisa menyebabkan "flash of unstyled text" yang menggeser layout. Tambahkan font-display: swap di CSS, atau unduh font dan host secara lokal.
  • Periksa banner notifikasi dan cookie consent. Banner yang muncul setelah halaman dimuat sering menjadi penyebab CLS tinggi. Pastikan banner ini memiliki ruang yang sudah direservasi, atau muncul sebagai overlay (tidak menggeser konten).

Tools yang Wajib Ada di Toolkit Anda

Berikut tools yang saya gunakan untuk audit Core Web Vitals klien:

Tool Fungsi Harga
Google Search Console Field data, identifikasi halaman bermasalah Gratis
PageSpeed Insights Audit per-URL, lab + field data Gratis
WebPageTest (webpagetest.org) Simulasi dari lokasi Jakarta, waterfall detail Gratis
Screaming Frog Crawl massal, identifikasi gambar tanpa dimensi Gratis s/d 500 URL
GTmetrix Monitoring berkala, alert jika performa turun Freemium

Tips khusus untuk pasar Indonesia: Di WebPageTest, pilih lokasi test "Singapore" atau "Jakarta" (jika tersedia) dan koneksi "4G". Ini mensimulasikan kondisi pengguna Indonesia lebih akurat daripada server US.


Contoh Nyata: Situs E-Commerce Lokal, LCP Turun dari 6,2 Detik ke 2,1 Detik

Salah satu klien di niche fashion lokal punya LCP rata-rata 6,2 detik di mobile. Setelah audit, kami menemukan tiga masalah utama:

  1. Gambar hero berukuran 2,4 MB dalam format PNG — tidak dioptimasi sama sekali.
  2. Tidak ada CDN — semua aset dilayani langsung dari server shared hosting di Jakarta dengan TTFB 1,8 detik.
  3. Tiga plugin WordPress yang memuat jQuery versi berbeda — konflik yang memperlambat eksekusi JavaScript.

Langkah yang diambil:

  • Konversi semua gambar ke WebP via ShortPixel (otomatis untuk gambar baru).
  • Aktifkan Cloudflare free plan dengan cache level "Standard".
  • Nonaktifkan dua plugin redundan, ganti satu plugin form dengan versi yang lebih ringan.

Hasilnya setelah 3 minggu (cukup waktu untuk CrUX ter-update): LCP turun ke 2,1 detik, masuk kategori "Good". Bounce rate mobile turun 18% dalam bulan berikutnya.

Catatan penting: Perubahan Core Web Vitals di field data membutuhkan waktu 28 hari untuk ter-update di GSC, karena Google menggunakan rolling window 28 hari. Jangan panik jika tidak langsung terlihat — ukur dengan PageSpeed Insights (lab data) untuk konfirmasi cepat.


Kesalahan Umum yang Harus Dihindari

  • Hanya mengoptimasi homepage. Google mengukur Core Web Vitals per-URL. Halaman produk dan artikel blog Anda juga dinilai. Prioritaskan halaman dengan traffic dan konversi tertinggi.
  • Mengabaikan mobile. Di Indonesia, mayoritas traffic dari mobile. PageSpeed Insights menampilkan data mobile dan desktop secara terpisah — fokus ke mobile dulu.
  • Menganggap skor 100 di PageSpeed adalah tujuan. Tujuan sebenarnya adalah masuk kategori "Good" di field data GSC. Lab score 100 tapi field data "Poor" = tetap bermasalah di mata Google.
  • Memasang terlalu banyak plugin "speed optimizer" sekaligus. WP Rocket + W3 Total Cache + Autoptimize yang dijalankan bersamaan justru sering konflik dan memperburuk performa.

Prioritas Pertama yang Harus Anda Kerjakan Hari Ini

Jika Anda hanya bisa melakukan satu hal sekarang: buka Google Search Console dan cek laporan Core Web Vitals Anda.

Identifikasi halaman mana yang masuk kategori "Poor" — itu adalah halaman yang paling merugikan ranking Anda saat ini. Kemudian jalankan halaman tersebut di PageSpeed Insights untuk menemukan elemen LCP-nya.

Dalam banyak kasus, memperbaiki LCP satu halaman utama (biasanya homepage atau halaman produk terlaris) sudah memberikan dampak nyata pada traffic organik dalam 4–6 minggu. Mulai dari sana, lalu ekspansi ke halaman lain secara sistematis.

Core Web Vitals bukan proyek sekali jalan — ini adalah monitoring berkelanjutan. Pasang alert di GTmetrix atau gunakan laporan GSC setiap bulan untuk memastikan performa tidak turun setelah update plugin atau perubahan desain.