seokita.id

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

Core Web Vitals 2025: Panduan Teknis untuk Situs Indonesia

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

Kesalahan yang Membuat Situs Indonesia Kehilangan Traffic Organik

Banyak pemilik bisnis sudah repot-repot membuat konten berkualitas, membangun backlink, dan mengoptimasi keyword — tapi ranking tetap stagnan. Setelah saya audit lebih dari 40 situs klien sepanjang 2024, satu pola yang terus muncul adalah: Core Web Vitals yang buruk membatalkan semua pekerjaan on-page yang sudah dilakukan.

Google menggunakan sinyal Page Experience sebagai tiebreaker. Artinya, jika konten Anda setara dengan kompetitor, situs yang lebih cepat dan stabil secara visual akan menang. Di pasar Indonesia, masalah ini lebih kritis karena mayoritas pengguna mengakses lewat jaringan 4G yang tidak stabil, dengan perangkat mid-range.

Artikel ini bukan teori. Ini checklist teknis yang bisa Anda mulai kerjakan 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 secara teknis:

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman (biasanya gambar hero atau blok teks utama) muncul. Target: di bawah 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat pengguna klik atau tap. Ini menggantikan FID sejak Maret 2024. Target: di bawah 200ms.
  • CLS (Cumulative Layout Shift): Seberapa stabil tata letak halaman — apakah elemen bergeser saat dimuat. Target: di bawah 0,1.

Data dari Chrome User Experience Report (CrUX) menunjukkan bahwa situs e-commerce Indonesia rata-rata gagal di LCP dan CLS. LCP sering di atas 4 detik karena gambar produk yang tidak dioptimasi, sementara CLS tinggi karena iklan dan widget yang dimuat belakangan.

Dampak bisnis langsung: Studi internal Google menunjukkan setiap 100ms peningkatan kecepatan halaman berkorelasi dengan peningkatan konversi 1–2%. Untuk toko online dengan omzet Rp 500 juta/bulan, ini bukan angka kecil.

Cara Audit Core Web Vitals Situs Anda (Langkah Demi Langkah)

Sebelum memperbaiki, Anda harus tahu kondisi aktual situs. Gunakan dua sumber data yang berbeda:

1. Data Lab vs Data Field

  • Data Lab = simulasi (PageSpeed Insights, Lighthouse). Cepat, tapi tidak mencerminkan kondisi pengguna nyata.
  • Data Field = data pengguna sungguhan dari Chrome (CrUX). Ini yang digunakan Google untuk ranking.

Prioritaskan perbaikan berdasarkan data field, bukan hanya skor Lighthouse.

2. Tools yang Wajib Digunakan

Tool Fungsi Gratis?
PageSpeed Insights Audit LCP, INP, CLS per URL Ya
Google Search Console Laporan Core Web Vitals per grup URL Ya
CrUX Dashboard (Looker Studio) Tren historis data field Ya
WebPageTest.org Waterfall detail, filmstrip loading Ya
Screaming Frog Audit massal seluruh situs Berbayar (ada versi gratis 500 URL)

Langkah audit:

  1. Buka search.google.com/search-console
  2. Klik "Core Web Vitals" di sidebar kiri
  3. Lihat URL yang masuk kategori "Perlu Perbaikan" (merah) dan "Perlu Ditingkatkan" (kuning)
  4. Klik grup URL untuk melihat halaman spesifik yang bermasalah
  5. Salin URL tersebut ke PageSpeed Insights untuk diagnosis detail

Checklist Perbaikan LCP: Elemen Terbesar Harus Muncul Cepat

LCP adalah metrik yang paling sering gagal di situs Indonesia. Berikut checklist teknisnya:

☐ Identifikasi elemen LCP Buka PageSpeed Insights, scroll ke bagian "Diagnostics". Akan terlihat elemen mana yang menjadi LCP (biasanya gambar hero, banner promo, atau thumbnail artikel).

☐ Optimalkan gambar dengan format modern Konversi gambar ke format WebP atau AVIF. Di WordPress, gunakan plugin ShortPixel atau Imagify. Untuk situs custom, gunakan library Sharp (Node.js) atau Pillow (Python) di pipeline build.

# Contoh konversi via CLI dengan cwebp
cwebp -q 80 banner-promo.jpg -o banner-promo.webp

☐ Tambahkan atribut fetchpriority="high" pada gambar LCP Ini sinyal eksplisit ke browser bahwa gambar ini harus diunduh lebih dulu.

<img src="banner-promo.webp" fetchpriority="high" alt="Promo Ramadan 2025">

☐ Aktifkan preload untuk gambar LCP Tambahkan tag ini di <head> halaman:

<link rel="preload" as="image" href="banner-promo.webp">

☐ Pindahkan CSS kritis ke inline CSS yang dimuat dari file eksternal memblokir rendering. Identifikasi CSS yang digunakan above-the-fold dan pindahkan ke <style> di <head>. Tool: Critical CSS Generator.

☐ Aktifkan server-side caching dan CDN Untuk pasar Indonesia, gunakan CDN dengan PoP (Point of Presence) di Jakarta. Pilihan: Cloudflare (gratis), BunnyCDN (berbayar, lebih murah untuk Asia), atau Fastly.

Kesalahan umum: Menggunakan gambar hero dari slider/carousel. Carousel adalah pembunuh LCP karena browser tidak tahu gambar mana yang akan muncul pertama. Ganti dengan gambar statis tunggal.

Checklist Perbaikan INP: Halaman Harus Responsif Saat Diklik

INP menggantikan FID sejak Maret 2024, dan ini lebih ketat. INP mengukur semua interaksi selama sesi, bukan hanya yang pertama.

☐ Audit JavaScript yang berat Buka Chrome DevTools → tab Performance → rekam saat klik tombol atau elemen interaktif. Cari "Long Tasks" (blok merah di atas 50ms). Ini adalah JavaScript yang memblokir thread utama.

☐ Defer JavaScript non-kritis Semua script analytics, chatbot, dan widget media sosial harus dimuat dengan defer atau async:

<!-- Jangan -->
<script src="analytics.js"></script>

<!-- Lakukan ini -->
<script src="analytics.js" defer></script>

☐ Audit dan kurangi third-party scripts Ini sumber terbesar masalah INP di situs Indonesia. Cek berapa banyak script pihak ketiga yang dimuat: Google Tag Manager, pixel Facebook, Tawk.to, Hotjar, dll. Setiap script tambahan menambah beban thread utama.

Gunakan Request Map Generator untuk visualisasi semua third-party request.

☐ Gunakan Web Workers untuk komputasi berat Jika situs Anda punya fitur filter produk, kalkulasi harga, atau pencarian client-side — pindahkan logika ini ke Web Worker agar tidak memblokir thread utama.

☐ Optimalkan event handler Pastikan event listener (onClick, onInput) tidak melakukan pekerjaan berat secara sinkron. Gunakan teknik debounce untuk input pencarian.

Kesalahan umum: Mengaktifkan semua fitur Google Tag Manager tanpa audit. GTM bisa memuat 15–20 script sekaligus jika tidak dikontrol. Lakukan audit tag GTM setiap kuartal.

Checklist Perbaikan CLS: Tata Letak Tidak Boleh Bergeser

CLS tinggi membuat pengguna frustrasi — bayangkan sedang mau klik tombol "Beli", tiba-tiba ada banner iklan yang muncul dan tombolnya bergeser ke bawah.

☐ Tentukan dimensi eksplisit untuk semua gambar dan video Selalu tambahkan atribut width dan height:

<!-- Menyebabkan CLS -->
<img src="produk.webp" alt="Sepatu Lari">

<!-- Tidak menyebabkan CLS -->
<img src="produk.webp" width="800" height="600" alt="Sepatu Lari">

☐ Reservasi ruang untuk iklan dan embed Jika menggunakan Google AdSense atau iklan display, tentukan ukuran container sebelum iklan dimuat:

.ad-container {
  min-height: 250px;
  width: 300px;
}

☐ Hindari menyisipkan konten di atas konten yang ada Banner cookie consent, notifikasi promo, atau popup yang muncul di atas halaman dan mendorong konten ke bawah adalah penyebab CLS yang sering terlewat.

☐ Gunakan font-display: swap untuk web font Jika menggunakan Google Fonts atau font kustom, tambahkan font-display: swap agar teks tampil dengan font fallback dulu, lalu diganti — bukan teks yang menghilang lalu muncul lagi (yang menyebabkan layout shift).

@font-face {
  font-family: 'Poppins';
  src: url('poppins.woff2') format('woff2');
  font-display: swap;
}

☐ Preload web font kritis

<link rel="preload" href="poppins-regular.woff2" as="font" type="font/woff2" crossorigin>

Kesalahan umum: Menggunakan plugin "lazy load" yang juga me-lazy-load gambar above-the-fold. Lazy load hanya untuk gambar di bawah viewport. Gambar yang langsung terlihat saat halaman dibuka harus dimuat normal.

Monitoring Berkelanjutan: Jangan Audit Sekali Lalu Lupa

Core Web Vitals bukan pekerjaan satu kali. Update plugin, tema baru, atau script iklan baru bisa merusak skor yang sudah bagus.

Setup monitoring otomatis:

  1. Google Search Console Alert: Aktifkan notifikasi email di GSC. Google akan mengirim email jika ada penurunan signifikan pada Core Web Vitals.

  2. Uptime Robot + PageSpeed API: Buat monitoring terjadwal menggunakan PageSpeed Insights API (gratis, 25.000 request/hari). Jalankan via cron job setiap minggu dan simpan hasilnya ke spreadsheet.

  3. Sentry atau Datadog RUM: Untuk situs dengan traffic tinggi, gunakan Real User Monitoring untuk melihat INP dan CLS dari pengguna nyata, bukan simulasi.

Jadwal audit yang realistis:

  • Setiap kali deploy update besar: audit manual dengan PageSpeed Insights
  • Bulanan: cek laporan GSC Core Web Vitals
  • Kuartalan: audit menyeluruh dengan WebPageTest dan review third-party scripts

Studi Kasus Singkat: Situs Properti yang Naik dari Halaman 3 ke Halaman 1

Klien saya — sebuah agen properti di Surabaya — punya konten yang bagus dan backlink yang cukup, tapi stuck di halaman 3 untuk keyword utama mereka.

Setelah audit, masalahnya jelas:

  • LCP: 6,2 detik (gambar listing properti tidak dioptimasi, tidak ada CDN)
  • CLS: 0,38 (banner iklan tanpa dimensi tetap, font Google dimuat tanpa preload)
  • INP: 380ms (Tawk.to, Hotjar, dan 3 pixel iklan dimuat sekaligus)

Yang kami lakukan dalam 3 minggu:

  1. Konversi semua gambar listing ke WebP, tambah fetchpriority="high" pada gambar pertama
  2. Aktifkan Cloudflare dengan cache agresif
  3. Hapus Hotjar (diganti dengan Microsoft Clarity yang lebih ringan), defer semua pixel iklan
  4. Tambah dimensi eksplisit pada semua gambar, reservasi ruang untuk iklan sidebar
  5. Preload font Poppins yang digunakan di heading

Hasilnya setelah 6 minggu (butuh waktu karena Google perlu mengumpulkan data field baru):

  • LCP turun ke 2,1 detik
  • CLS turun ke 0,06
  • INP turun ke 180ms
  • Ranking keyword utama naik dari posisi 28 ke posisi 7

Ini bukan kebetulan. Konten dan backlink sudah ada — Core Web Vitals yang buruk yang menahan mereka.

Prioritas Pertama yang Harus Anda Kerjakan Sekarang

Jika Anda hanya punya waktu untuk satu hal minggu ini: buka Google Search Console, cek laporan Core Web Vitals, dan identifikasi URL dengan status "Perlu Perbaikan".

Fokus dulu pada halaman yang paling banyak mendapat traffic organik. Perbaiki LCP terlebih dahulu karena ini metrik dengan dampak ranking paling besar dan solusinya paling terukur — biasanya cukup dengan optimasi gambar dan CDN. Jika Anda ingin memperdalam pemahaman tentang optimasi performa, this guide on WordPress object cache dapat membantu Anda memahami strategi caching yang lebih advanced.

Jangan tunggu situs "sempurna" dulu. Perbaikan bertahap yang konsisten lebih efektif daripada renovasi total yang tidak pernah selesai.