seokita.id

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

Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

by Bayu Wicaksono
Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

Banyak Situs Indonesia Gagal Core Web Vitals — dan Pemiliknya Tidak Tahu

Coba buka PageSpeed Insights dan masukkan URL situs Anda sekarang. Kalau skor mobile di bawah 50 untuk LCP atau ada tanda merah di CLS, Anda tidak sendirian — tapi juga tidak boleh santai.

Dari audit yang saya lakukan terhadap 40+ situs bisnis Indonesia sepanjang 2024, lebih dari 70% gagal di metrik Largest Contentful Paint (LCP) pada perangkat mobile. Penyebab terbesar: gambar hero yang tidak dioptimasi, hosting lokal yang lambat, dan tema WordPress "premium" yang justru membebani browser.

Masalahnya bukan sekadar skor. Google secara resmi menggunakan Core Web Vitals sebagai page experience signal dalam algoritma ranking sejak 2021, dan bobotnya makin relevan di 2025 — terutama untuk keyword kompetitif di niche keuangan, properti, dan e-commerce.

Artikel ini bukan teori. Ini checklist teknis yang bisa Anda eksekusi minggu ini.

Apa Itu Core Web Vitals dan Mengapa Bisnis Anda Harus Peduli

Core Web Vitals terdiri dari tiga metrik utama yang diukur Google dari data pengguna nyata (field data via Chrome UX Report):

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman muncul. Target: ≤ 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat diklik atau diketuk. Target: ≤ 200ms. (INP resmi menggantikan FID sejak Maret 2024.)
  • CLS (Cumulative Layout Shift): Seberapa stabil tata letak halaman — apakah elemen "loncat" saat dimuat. Target: ≤ 0,1.

Kalau ketiga metrik ini masuk zona hijau, halaman Anda mendapat label "Good" di PageSpeed Insights. Kalau tidak, Google bisa memprioritaskan kompetitor yang skornya lebih baik — bahkan dengan konten yang lebih tipis.

Satu studi kasus nyata: situs klien saya di niche asuransi kendaraan punya konten yang lebih lengkap dari kompetitor, tapi stuck di posisi 8–12 selama 3 bulan. Setelah LCP diperbaiki dari 6,2 detik ke 2,1 detik, halaman naik ke posisi 3–5 dalam 6 minggu — tanpa tambahan backlink.

Cara Diagnosis Core Web Vitals Situs Anda

Sebelum perbaiki, Anda harus tahu persis di mana masalahnya. Gunakan tiga tool ini secara berurutan:

1. PageSpeed Insights (Data Field + Lab)

URL: pagespeed.web.dev

  • Lihat tab "Field Data" dulu — ini data nyata dari pengguna Chrome di situs Anda.
  • Kalau field data kosong (situs baru atau traffic kecil), lihat "Lab Data" sebagai estimasi.
  • Perhatikan kolom Mobile — bukan Desktop. Google pakai mobile-first indexing.

2. Google Search Console → Core Web Vitals Report

  • Masuk ke GSC → pilih "Core Web Vitals" di sidebar kiri.
  • Lihat halaman mana yang berstatus "Poor" atau "Needs Improvement".
  • Ini data field yang paling akurat karena spesifik per-URL.

3. Chrome DevTools → Lighthouse

  • Buka situs di Chrome, klik kanan → Inspect → tab Lighthouse.
  • Pilih "Mobile" dan centang "Performance".
  • Klik "Analyze page load" — hasilnya kasih tahu elemen spesifik yang jadi penyebab LCP.

Checklist Perbaikan LCP: Dari yang Paling Berdampak

LCP adalah metrik yang paling sering jadi biang masalah, dan juga yang paling berdampak kalau diperbaiki. Urutan ini berdasarkan dampak vs. kesulitan implementasi:

✅ 1. Identifikasi elemen LCP Anda Buka PageSpeed Insights → scroll ke bagian "Diagnostics" → cari "Largest Contentful Paint element". Biasanya berupa gambar hero, foto produk, atau blok teks besar.

✅ 2. Optimasi gambar LCP

  • Konversi ke format WebP (ukuran 25–35% lebih kecil dari JPEG tanpa kehilangan kualitas visual).
  • Gunakan plugin Imagify atau ShortPixel di WordPress untuk konversi otomatis.
  • Tambahkan atribut fetchpriority="high" pada tag <img> elemen LCP — ini sinyal ke browser untuk load gambar ini duluan.
  • Jangan pakai lazy loading pada gambar LCP. Lazy loading bagus untuk gambar di bawah fold, tapi fatal kalau diterapkan ke gambar hero.

✅ 3. Aktifkan caching dan CDN

  • Pakai plugin WP Rocket atau LiteSpeed Cache untuk WordPress.
  • Untuk CDN, Cloudflare (gratis) sudah cukup untuk sebagian besar situs Indonesia. Aktifkan fitur "Polish" untuk kompresi gambar otomatis.
  • Kalau hosting Anda di Indonesia (Niagahoster, Dewaweb, IDCloudHost), pastikan pilih server Jakarta — bukan Singapore — untuk audiens lokal.

✅ 4. Kurangi render-blocking resources

  • Di PageSpeed Insights, cek bagian "Eliminate render-blocking resources".
  • CSS dan JavaScript yang diload di <head> tanpa async atau defer akan blokir rendering halaman.
  • Di WP Rocket: aktifkan "Load JS Deferred" dan "Optimize CSS Delivery".
  • Hati-hati: beberapa plugin form atau slider rusak kalau JS-nya di-defer. Test dulu di staging.

✅ 5. Upgrade hosting kalau TTFB > 600ms

  • TTFB (Time to First Byte) yang tinggi adalah tanda server lambat merespons.
  • Cek TTFB di PageSpeed Insights → "Server response time".
  • Kalau TTFB konsisten di atas 600ms, pertimbangkan beli domain dan hosting sekaligus terbaik dengan SSD NVMe dan PHP 8.x. Perbedaan TTFB antara shared hosting lama vs. cloud hosting bisa 400–800ms.

Checklist Perbaikan CLS: Hentikan Elemen yang "Loncat"

CLS tinggi biasanya disebabkan elemen yang ukurannya tidak dideklarasikan di HTML/CSS, sehingga browser harus "recalculate" tata letak saat elemen itu muncul.

✅ 1. Deklarasikan width dan height semua gambar Tambahkan atribut width dan height pada setiap tag <img>. Ini kasih tahu browser berapa ruang yang harus disiapkan sebelum gambar dimuat.

<img src="produk.webp" width="800" height="600" alt="Produk X">

Di WordPress, gambar yang diupload melalui media library biasanya sudah otomatis dapat atribut ini — tapi gambar dari page builder (Elementor, Divi) sering tidak.

✅ 2. Tetapkan dimensi untuk embed dan iframe Video YouTube yang di-embed tanpa wrapper CSS sering jadi penyebab CLS. Gunakan teknik responsive embed:

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

✅ 3. Hindari iklan atau banner yang muncul di atas konten Iklan yang diload setelah halaman muncul (lazy-loaded ads) adalah penyebab CLS paling umum di situs publisher. Kalau Anda pakai Google AdSense, gunakan auto ads dengan hati-hati — atau set placeholder dengan ukuran tetap sebelum iklan muncul.

✅ 4. Periksa font loading Font yang dimuat dari Google Fonts tanpa font-display: swap bisa sebabkan FOUT (Flash of Unstyled Text) yang geser layout. Tambahkan &display=swap di URL Google Fonts Anda:

https://fonts.googleapis.com/css2?family=Inter&display=swap

Perbaikan INP: Responsivitas yang Sering Diabaikan

INP mengukur waktu dari interaksi pengguna (klik, tap, ketik) sampai browser menampilkan perubahan visual. Ini yang paling teknis di antara tiga metrik.

Penyebab INP tinggi yang paling umum di situs WordPress Indonesia:

  • JavaScript pihak ketiga yang berat: live chat widget, popup tool, pixel tracking yang berlebihan.
  • Event listener yang tidak dioptimasi di tema atau plugin.

Langkah praktis:

  • Audit JavaScript pihak ketiga. Buka Chrome DevTools → tab Performance → rekam interaksi → lihat "Long Tasks" (blok merah di timeline).
  • Tunda load script pihak ketiga yang tidak kritis. Misalnya, live chat widget bisa diload setelah pengguna pertama kali scroll (intersection observer) alih-alih saat halaman pertama muncul.
  • Kurangi jumlah plugin WordPress. Setiap plugin aktif berpotensi tambah JavaScript. Audit dengan Query Monitor untuk lihat plugin mana yang paling berat.

Tools Tambahan untuk Monitoring Berkelanjutan

Perbaikan Core Web Vitals bukan one-time task. Situs yang skornya bagus hari ini bisa turun bulan depan karena update plugin atau tambah widget baru.

Tool Fungsi Harga
Google Search Console Monitor CWV per-URL, data field Gratis
PageSpeed Insights Audit cepat + rekomendasi Gratis
WebPageTest.org Waterfall detail, test dari lokasi Jakarta Gratis
Screaming Frog Crawl + cek redirect chain yang nambah TTFB Gratis s/d 500 URL
WP Rocket Optimasi performa WordPress all-in-one ~$59/tahun

Tips monitoring: Set reminder bulanan untuk cek GSC Core Web Vitals report. Kalau ada halaman yang tiba-tiba masuk "Poor", investigasi segera — biasanya ada plugin baru atau gambar besar yang baru diupload.

Kesalahan Umum yang Harus Dihindari

❌ Optimasi Desktop, Bukan Mobile Google pakai mobile-first indexing. Skor desktop 90+ tidak relevan kalau mobile Anda 40. Selalu prioritaskan mobile.

❌ Pakai Lazy Loading di Gambar Hero Lazy loading (loading="lazy") pada elemen LCP justru memperlambat LCP. Atribut ini hanya untuk gambar di bawah fold.

❌ Anggap Skor Lab = Skor Field Skor Lighthouse di laptop Anda bisa 85, tapi field data dari pengguna nyata di HP mid-range dengan koneksi 4G bisa jauh lebih rendah. Field data di GSC adalah yang paling relevan untuk ranking.

❌ Perbaiki Sekali, Tidak Monitor Update WordPress, Elementor, atau plugin bisa reset performa Anda. Monitor rutin adalah bagian dari strategi, bukan opsional.

Prioritas Pertama yang Harus Anda Kerjakan Sekarang

Kalau Anda hanya punya waktu untuk satu langkah minggu ini, lakukan ini:

Buka PageSpeed Insights → masukkan URL halaman utama atau halaman produk terpenting Anda → identifikasi elemen LCP → optimasi gambar tersebut ke WebP dan tambahkan fetchpriority="high".

Ini satu perubahan dengan dampak terbesar terhadap LCP, dan LCP adalah metrik Core Web Vitals yang paling sering jadi pembeda ranking di halaman hasil pencarian Google Indonesia.

Setelah itu, baru lanjut ke CLS, lalu INP. Tapi mulai dari LCP dulu — dan mulai dari halaman yang paling penting untuk bisnis Anda, bukan halaman mana pun secara acak.

Core Web Vitals bukan tren SEO sesaat. Ini infrastruktur teknis yang menentukan apakah konten bagus Anda benar-benar bisa bersaing di halaman pertama Google.