seokita.id

SEO teknis, riset keyword, on-page optimization untuk pasar Indonesia

Core Web Vitals: Audit & Perbaikan untuk Situs Indonesia

by Bayu Wicaksono
Core Web Vitals: Audit & Perbaikan untuk Situs Indonesia

Banyak Situs Indonesia Gagal di Core Web Vitals—Tanpa Sadar

Coba buka PageSpeed Insights dan masukkan URL situs bisnis Anda sekarang. Lebih dari 60% situs Indonesia yang pernah saya audit mendapat label merah atau kuning di bagian Core Web Vitals. Yang lebih mengejutkan: pemiliknya tidak tahu, karena traffic terlihat "baik-baik saja" di permukaan.

Masalahnya, Google menggunakan data Core Web Vitals dari Chrome User Experience Report (CrUX) sebagai sinyal ranking sejak 2021. Artinya, situs Anda bisa kalah dari kompetitor bukan karena backlink lebih sedikit, tapi karena halaman Anda lambat 1,2 detik di jaringan 4G Telkomsel.

Artikel ini fokus ke tiga metrik utama—LCP, INP, dan CLS—plus checklist perbaikan yang bisa Anda eksekusi minggu ini tanpa harus jadi developer.

Apa Itu Core Web Vitals dan Kenapa Bisnis Anda Harus Peduli

Core Web Vitals adalah tiga metrik yang mengukur pengalaman nyata pengguna di halaman Anda:

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman muncul. Target: di bawah 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat diklik atau diketuk. Target: di bawah 200 milidetik. INP menggantikan FID sejak Maret 2024.
  • CLS (Cumulative Layout Shift): Seberapa stabil tata letak halaman—apakah tombol atau teks tiba-tiba bergeser saat loading. Target: di bawah 0,1.

Kenapa ini penting untuk bisnis di Indonesia? Dua alasan konkret:

  1. Mayoritas pengguna Indonesia browsing lewat HP dengan koneksi yang bervariasi. Situs yang lambat di 4G biasa akan kehilangan pengunjung sebelum halaman selesai load. Bounce rate naik, konversi turun.
  2. Google mengonfirmasi Core Web Vitals sebagai ranking signal. Situs dengan skor "Good" di semua tiga metrik mendapat keunggulan kecil tapi nyata dibanding situs dengan skor "Poor"—terutama di niche kompetitif seperti properti, keuangan, dan e-commerce.

Kesalahan umum: Mengukur Core Web Vitals hanya dari laptop kantor dengan WiFi cepat. Data yang relevan adalah data field dari pengguna nyata, bukan data lab. Pastikan Anda selalu cek tab "Field Data" di PageSpeed Insights.

Cara Audit Core Web Vitals Situs Anda (Gratis, 15 Menit)

Sebelum memperbaiki, Anda perlu tahu di mana masalahnya. Gunakan tiga tools ini secara berurutan:

1. PageSpeed Insights

URL: pagespeed.web.dev

  • Masukkan URL halaman utama dan satu halaman produk/layanan.
  • Lihat bagian "Field Data" dulu (data dari pengguna nyata). Jika tidak ada data field, berarti traffic Anda belum cukup untuk CrUX—gunakan data lab sebagai proxy.
  • Catat skor LCP, INP, dan CLS untuk mobile.

2. Google Search Console

  • Buka menu Experience → Core Web Vitals.
  • Google akan mengelompokkan URL situs Anda ke dalam tiga kategori: Good, Needs Improvement, Poor.
  • Klik laporan "Poor" untuk melihat halaman mana yang paling bermasalah. Prioritaskan halaman dengan traffic tertinggi.

3. CrUX Dashboard (Looker Studio)

  • Cari "CrUX Dashboard" di Looker Studio Gallery.
  • Masukkan domain Anda untuk melihat tren Core Web Vitals selama 6 bulan terakhir.
  • Berguna untuk membuktikan ke klien atau atasan bahwa perbaikan yang dilakukan benar-benar berdampak.

Checklist Perbaikan Core Web Vitals: Eksekusi Minggu Ini

Berikut checklist berdasarkan urutan dampak terbesar. Centang satu per satu.

Perbaikan LCP (Target: < 2,5 detik)

  • Identifikasi elemen LCP Anda. Di PageSpeed Insights, scroll ke bagian "Diagnostics" dan klik "Largest Contentful Paint element". Biasanya berupa gambar hero atau heading H1.
  • Kompres gambar hero ke format WebP. Gunakan Squoosh.app (gratis). Gambar JPG 800KB bisa turun ke 120KB WebP tanpa kehilangan kualitas visual yang signifikan.
  • Tambahkan fetchpriority="high" pada tag <img> elemen LCP. Ini memberi tahu browser untuk mendahulukan download gambar tersebut. Satu atribut HTML, dampak bisa 0,3–0,8 detik.
  • Aktifkan caching di server. Jika pakai WordPress, plugin seperti WP Rocket atau LiteSpeed Cache bisa mengaktifkan browser caching dan object caching dalam beberapa klik.
  • Gunakan CDN. Untuk situs yang target audiensnya di Indonesia, Cloudflare (gratis) sudah cukup. Cloudflare punya edge server di Jakarta yang mengurangi latency secara signifikan.
  • Periksa Time to First Byte (TTFB). Jika TTFB di atas 600ms, masalahnya ada di server/hosting, bukan di sisi frontend. Pertimbangkan upgrade ke hosting SSD dengan server di Indonesia (misalnya Niagahoster Business atau Dewaweb).

Perbaikan INP (Target: < 200ms)

  • Audit JavaScript pihak ketiga. Buka tab Network di Chrome DevTools, filter "JS", dan lihat script mana yang paling besar. Script live chat, widget media sosial, dan pixel iklan sering jadi biang keladi INP buruk.
  • Tunda loading script yang tidak kritis. Tambahkan atribut defer atau async pada tag <script> yang tidak perlu dijalankan saat halaman pertama kali load.
  • Gunakan Google Tag Manager dengan bijak. Jangan masukkan semua tag sekaligus. Audit tag di GTM dan nonaktifkan yang tidak aktif digunakan.
  • Pertimbangkan lazy load untuk komponen berat. Jika menggunakan page builder seperti Elementor atau Divi, cek apakah ada opsi "Load scripts only when needed" di pengaturan performa.

Perbaikan CLS (Target: < 0,1)

  • Selalu tentukan dimensi width dan height pada semua tag <img>. Ini mencegah browser mengubah layout saat gambar selesai diunduh. Contoh: <img src="produk.webp" width="800" height="600" alt="...">.
  • Hindari menyisipkan konten di atas konten yang sudah ada. Banner promo, cookie consent, atau iklan yang muncul di bagian atas halaman setelah load sering menyebabkan CLS tinggi.
  • Reservasi ruang untuk iklan dan embed. Jika menggunakan Google AdSense atau embed YouTube, tentukan ukuran container-nya di CSS sebelum konten iklan/embed diload.
  • Audit font loading. Gunakan font-display: swap di CSS untuk mencegah teks bergeser saat web font selesai diunduh.

Contoh Nyata: Situs Toko Online Surabaya

Salah satu klien saya menjalankan toko online produk perawatan kulit di Surabaya. Saat audit awal:

  • LCP: 5,8 detik (Poor) — penyebab: gambar banner 2,4MB format PNG
  • INP: 380ms (Poor) — penyebab: 11 script pihak ketiga termasuk 3 pixel iklan yang overlap
  • CLS: 0,28 (Poor) — penyebab: banner promo yang muncul setelah 2 detik di bagian atas

Setelah tiga minggu perbaikan:

  • Semua gambar dikonversi ke WebP, rata-rata ukuran turun 74%
  • Script pihak ketiga dikurangi dari 11 menjadi 5, sisanya diberi defer
  • Banner promo dipindah ke bawah fold, bukan di atas header
  • Hasil: LCP 2,1 detik, INP 140ms, CLS 0,04 — semua Good

Dampak ke ranking: dalam 6 minggu setelah perbaikan, 14 keyword halaman produk naik rata-rata 4,2 posisi. Bukan satu-satunya faktor, tapi Core Web Vitals yang baik menghilangkan "handicap" yang selama ini menahan ranking mereka.

Tools Tambahan yang Perlu Anda Tahu

Tool Fungsi Harga
PageSpeed Insights Audit LCP, INP, CLS + rekomendasi Gratis
WebPageTest.org Analisis waterfall detail, test dari server Jakarta Gratis
Lighthouse (Chrome DevTools) Audit lab lokal, cocok untuk development Gratis
Cloudflare CDN + caching otomatis Gratis (plan dasar)
WP Rocket Plugin performa WordPress all-in-one ~$59/tahun
Squoosh.app Kompresi gambar ke WebP/AVIF Gratis

Satu tips: saat menggunakan WebPageTest, pilih lokasi test "Jakarta, Indonesia - EC2" dan koneksi "4G (9 Mbps, 170ms RTT)". Ini mensimulasikan kondisi nyata pengguna Indonesia, bukan kondisi server AS.

Pertanyaan yang Sering Muncul

"Skor PageSpeed saya 90+, tapi Core Web Vitals masih merah. Kenapa?"

Skor PageSpeed (0–100) adalah data lab—diukur dari server Google di kondisi ideal. Core Web Vitals di bagian Field Data diambil dari Chrome pengguna nyata selama 28 hari terakhir. Keduanya berbeda. Yang dilihat Google untuk ranking adalah data field, bukan skor lab. Fokus ke field data.

"Apakah Core Web Vitals lebih penting dari konten dan backlink?"

Tidak. Konten yang relevan dan backlink berkualitas tetap faktor dominan. Core Web Vitals adalah tiebreaker—ketika dua situs setara dari sisi konten dan otoritas, situs dengan Core Web Vitals lebih baik cenderung menang. Tapi jangan abaikan metrik ini hanya karena bukan faktor #1.

"Berapa lama setelah perbaikan Google akan update ranking saya?"

Google mengupdate data CrUX setiap 28 hari. Artinya, bahkan setelah Anda memperbaiki semua masalah hari ini, butuh sekitar 4–8 minggu sebelum data field baru tercermin di Google Search Console dan berpotensi memengaruhi ranking. Sabar, tapi mulai sekarang.

Prioritas Pertama yang Harus Anda Kerjakan Hari Ini

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

Buka PageSpeed Insights → masukkan URL halaman terpenting bisnis Anda (halaman produk atau layanan dengan traffic tertinggi) → cek tab Field Data → identifikasi metrik mana yang merah.

Jika LCP merah, mulai dari sana: kompres dan konversi gambar hero ke WebP, lalu tambahkan fetchpriority="high". Ini perubahan paling cepat dengan dampak paling besar untuk mayoritas situs Indonesia. Untuk informasi lebih lanjut tentang optimasi caching, Anda bisa membaca WordPress object cache yang membahas Redis vs Memcached.

Core Web Vitals bukan proyek satu kali—ini monitoring berkelanjutan. Jadwalkan audit bulanan di Google Search Console, dan Anda sudah selangkah lebih maju dari sebagian besar kompetitor yang masih mengabaikannya.