seokita.id

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

Core Web Vitals 2025: Perbaiki LCP & CLS di Situs Indonesia

by Bayu Wicaksono
Core Web Vitals 2025: Perbaiki LCP & CLS di Situs Indonesia

Banyak Situs Indonesia Gagal di Core Web Vitals — Padahal Kontennya Bagus

Ini skenario yang sering saya temui: sebuah toko online di Shopify atau WordPress lokal punya artikel produk yang lengkap, keyword-nya tepat, backlink-nya ada — tapi rankingnya stagnan di halaman 2–3. Setelah saya cek PageSpeed Insights, skornya merah semua. LCP 6,2 detik. CLS 0,31. INP di atas 400ms.

Google sudah resmi memasukkan Core Web Vitals sebagai ranking signal sejak 2021, dan bobotnya makin besar di 2024–2025. Bukan berarti situs lambat tidak bisa ranking — tapi di kompetisi yang ketat, skor CWV yang buruk jadi pembeda antara halaman 1 dan halaman 2.

Masalahnya, sebagian besar tutorial Core Web Vitals ditulis untuk kondisi hosting luar negeri. Padahal bisnis Indonesia punya tantangan unik: hosting lokal dengan TTFB tinggi, gambar produk yang di-upload tanpa kompresi, dan tema WordPress premium yang berat. Artikel ini fokus ke kondisi itu.

Kenapa Core Web Vitals Penting untuk Bisnis Anda

Sebelum masuk ke teknis, saya ingin luruskan satu hal: Core Web Vitals bukan sekadar metrik kecepatan. Ini adalah proxy Google untuk mengukur pengalaman pengguna nyata — bukan di lab, tapi di perangkat pengguna Anda yang sesungguhnya.

Google menggunakan data CrUX (Chrome User Experience Report) — data nyata dari pengguna Chrome di seluruh dunia — untuk menilai situs Anda. Artinya, kalau mayoritas pengunjung Anda pakai HP mid-range dengan koneksi 4G di Jakarta atau Surabaya, itulah kondisi yang dinilai Google.

Tiga metrik utama yang harus Anda pahami:

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman (biasanya gambar hero atau heading utama) muncul. Target: ≤ 2,5 detik.
  • CLS (Cumulative Layout Shift): Seberapa sering elemen halaman bergeser tiba-tiba saat loading. Target: ≤ 0,1.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat diklik atau diketuk. Target: ≤ 200ms. (INP menggantikan FID sejak Maret 2024.)

Dampak bisnis langsung: situs dengan LCP buruk rata-rata punya bounce rate lebih tinggi 32% dibanding situs dengan LCP baik (data Google/Deloitte). Untuk toko online, itu berarti calon pembeli pergi sebelum melihat produk Anda.

Audit Core Web Vitals: Mulai dari Data Field, Bukan Lab

Kesalahan umum pertama: hanya menggunakan skor PageSpeed Insights versi desktop dan mengabaikan data mobile. Padahal lebih dari 70% traffic organik di Indonesia datang dari mobile.

Langkah audit yang benar:

  1. Buka PageSpeed Insights → masukkan URL halaman terpenting Anda (bukan homepage saja — cek juga halaman kategori dan produk terlaris).
  2. Scroll ke bagian "Discover what your real users are experiencing" — ini data CrUX (field data). Kalau situs Anda belum punya cukup traffic, bagian ini kosong. Gunakan data lab sebagai fallback.
  3. Buka Google Search Console → pilih menu "Core Web Vitals" di sidebar kiri. Di sini Anda bisa lihat halaman mana yang masuk kategori "Poor", "Needs Improvement", atau "Good" berdasarkan data pengguna nyata.
  4. Gunakan CrUX Dashboard di Looker Studio — gratis, dan bisa di-filter per device dan per bulan untuk melihat tren.

Kesalahan umum: Mengoptimasi berdasarkan skor lab (Lighthouse) saja tanpa cek field data. Skor lab bisa 90+, tapi field data tetap merah kalau server Anda lambat untuk pengguna Indonesia.

Checklist Perbaikan LCP untuk Situs Indonesia

LCP adalah metrik yang paling sering bermasalah dan paling berdampak ke ranking. Berikut checklist yang bisa Anda eksekusi minggu ini:

✅ 1. Identifikasi Elemen LCP Anda

Buka Chrome DevTools (F12) → tab Performance → record loading halaman → cari label "LCP" di timeline. Atau gunakan PageSpeed Insights — di bagian diagnostik akan tertulis elemen mana yang jadi LCP (biasanya <img> hero atau <h1>).

✅ 2. Kompresi dan Format Gambar

Jika elemen LCP adalah gambar:

  • Konversi ke format WebP (ukuran 25–35% lebih kecil dari JPEG dengan kualitas sama). Gunakan plugin Imagify atau ShortPixel untuk WordPress.
  • Untuk gambar hero, targetkan ukuran file di bawah 100KB.
  • Tambahkan atribut fetchpriority="high" pada tag <img> elemen LCP. Ini memberi sinyal ke browser untuk prioritaskan loading gambar itu.
<img src="hero-produk.webp" fetchpriority="high" alt="Deskripsi produk" width="1200" height="630">

✅ 3. Preload Gambar LCP

Tambahkan tag <link rel="preload"> di <head> untuk gambar LCP:

<link rel="preload" as="image" href="/images/hero-produk.webp">

Untuk WordPress, ini bisa ditambahkan via plugin WP Rocket (fitur Preload) atau manual di functions.php.

✅ 4. Pilih Hosting dengan TTFB Rendah

Ini titik kritis untuk Indonesia. TTFB (Time to First Byte) tinggi langsung menunda LCP. Benchmark yang saya gunakan: TTFB ≤ 600ms untuk pengguna Indonesia.

Hosting lokal yang perlu dipertimbangkan: Niagahoster (server Semarang), Dewaweb (Jakarta), atau gunakan CDN Cloudflare (gratis) di depan hosting Anda untuk cache konten statis. Cloudflare punya data center di Jakarta — ini signifikan untuk TTFB.

✅ 5. Hindari Render-Blocking Resources

Script dan CSS yang di-load di <head> menunda rendering. Cek di PageSpeed Insights bagian "Eliminate render-blocking resources". Solusi:

  • Tambahkan defer atau async pada script non-kritis.
  • Gunakan Critical CSS — load CSS above-the-fold secara inline, sisanya di-defer.

Checklist Perbaikan CLS

CLS sering diabaikan karena tidak terasa saat development — tapi pengguna mobile merasakannya: tombol bergeser, teks loncat, gambar muncul tiba-tiba.

✅ 1. Selalu Tentukan Width & Height pada Gambar

Browser perlu tahu ukuran gambar sebelum loading agar bisa reservasi ruang. Tanpa ini, layout akan shift saat gambar muncul.

<!-- Buruk -->
<img src="produk.webp" alt="Produk">

<!-- Benar -->
<img src="produk.webp" alt="Produk" width="800" height="600">

✅ 2. Hindari Konten yang Muncul Tiba-tiba

Iklan, banner promo, atau popup yang di-inject via JavaScript setelah halaman load adalah penyebab CLS terbesar. Kalau Anda menggunakan Google AdSense, reservasi ruang untuk iklan dengan CSS:

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

✅ 3. Pastikan Web Font Tidak Menyebabkan Layout Shift

Font custom yang lambat load menyebabkan FOUT (Flash of Unstyled Text) dan CLS. Gunakan font-display: swap dan preload font utama:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

✅ 4. Audit dengan Chrome DevTools Layout Shift Regions

Buka Chrome DevTools → tab Rendering (klik tiga titik → More Tools → Rendering) → centang Layout Shift Regions. Area yang shift akan di-highlight merah saat halaman di-scroll.

Tools yang Saya Gunakan untuk Monitor CWV Klien

Berikut stack monitoring yang praktis dan mayoritas gratis:

Tool Fungsi Harga
Google Search Console Field data CWV per halaman Gratis
PageSpeed Insights Audit on-demand + rekomendasi Gratis
CrUX Dashboard (Looker Studio) Tren historis CWV Gratis
WebPageTest.org Waterfall detail, test dari lokasi Jakarta Gratis
Screaming Frog + LH Crawl + Lighthouse audit massal Freemium

Satu tips yang jarang disebut: WebPageTest.org punya opsi test dari lokasi Singapore dan bisa simulasi koneksi 4G mobile — ini paling mendekati kondisi nyata pengguna Indonesia.

Studi Kasus Singkat: Toko Online Fashion Lokal

Klien saya — toko fashion lokal di Bandung — punya LCP 7,1 detik dan CLS 0,28 di halaman kategori produk. Setelah audit, penyebabnya:

  1. Gambar hero 2,3MB format PNG, tidak ada width/height, tidak ada preload.
  2. Slider produk pakai plugin jQuery berat yang load di <head>.
  3. Hosting shared dengan TTFB 1,8 detik.

Tindakan yang dilakukan dalam 2 minggu:

  • Konversi semua gambar ke WebP via ShortPixel → ukuran turun 68%.
  • Tambah fetchpriority="high" dan preload pada gambar hero.
  • Ganti slider dengan implementasi CSS-only sederhana.
  • Aktifkan Cloudflare (gratis) → TTFB turun ke 480ms.

Hasil setelah 6 minggu (CrUX butuh waktu update):

  • LCP: 7,1 detik → 2,3 detik ✅
  • CLS: 0,28 → 0,08 ✅
  • Posisi rata-rata keyword utama naik dari 18,4 ke 11,2 (data GSC).

Bukan satu-satunya faktor, tapi CWV yang baik membuka "bottleneck" yang selama ini menahan ranking.

Kesalahan Umum yang Harus Dihindari

❌ Hanya optimasi homepage. Google menilai CWV per halaman. Halaman kategori dan produk biasanya lebih bermasalah dan lebih penting secara komersial.

❌ Install terlalu banyak plugin caching sekaligus. WP Rocket + W3 Total Cache + LiteSpeed Cache aktif bersamaan justru konflik dan memperlambat situs.

❌ Mengabaikan INP. Setelah LCP dan CLS diperbaiki, banyak yang lupa INP. Cek interaktivitas tombol "Tambah ke Keranjang" — kalau lambat merespons, itu INP buruk.

❌ Menganggap skor 90+ di desktop sudah cukup. Google menggunakan data mobile untuk ranking. Skor desktop irrelevant kalau mobile masih merah.

Prioritas Pertama yang Harus Dikerjakan Sekarang

Kalau Anda hanya punya waktu untuk satu hal minggu ini: audit LCP di halaman yang paling penting untuk bisnis Anda — bukan homepage, tapi halaman kategori atau produk terlaris.

Buka PageSpeed Insights, masukkan URL halaman itu, identifikasi elemen LCP-nya, lalu eksekusi dua langkah ini:

  1. Konversi gambar LCP ke WebP dan tambahkan fetchpriority="high".
  2. Aktifkan Cloudflare di depan hosting Anda.

Dua langkah ini saja sudah bisa memangkas LCP 30–50% untuk mayoritas situs WordPress Indonesia. Setelah itu, baru tackle CLS dan INP.

Core Web Vitals bukan proyek satu kali — ini monitoring berkelanjutan. Tapi perbaikan pertama yang tepat sasaran akan langsung terlihat di data GSC dalam 4–6 minggu.