Optimasi Core Web Vitals dan Skor Lighthouse untuk Website Statis

Oleh Sugeng 18 Sep 2026

Pengertian

Core Web Vitals adalah tiga metrik yang dipakai Google untuk menilai pengalaman nyata pengguna saat membuka halaman:

  • LCP (Largest Contentful Paint) — waktu elemen terbesar (biasanya gambar atau judul hero) selesai tampil.
  • INP (Interaction to Next Paint) — seberapa responsif halaman terhadap interaksi pengguna (menggantikan FID).
  • CLS (Cumulative Layout Shift) — seberapa banyak tata letak bergeser tanpa diduga.

Lighthouse adalah alat audit yang memberi skor 0-100 untuk Performa, Aksesibilitas, Best Practices, dan SEO, sekaligus menyarankan perbaikan.

Ambang Batas

MetrikBaikPerlu ditingkatkanBuruk
LCP≤ 2,5 s2,5-4,0 s> 4,0 s
INP≤ 200 ms200-500 ms> 500 ms
CLS≤ 0,10,1-0,25> 0,25

Website statis yang dipra-render biasanya unggul di LCP dan CLS; tantangan tersisa ada di INP bila terlalu banyak JavaScript.

Kelebihan

  • HTML statis cepat: tanpa query database, LCP rendah secara alami.
  • Perbaikan terukur: Lighthouse/RUM memberi angka sebelum-sesudah.
  • SEO dan UX sekaligus: metrik baik menurunkan bounce dan menaikkan peringkat.
  • Gratis diaudit: PageSpeed Insights dan DevTools tersedia tanpa biaya.

Kekurangan

  • Skor lab ≠ data lapangan: Lighthouse di mesin cepat bisa berbeda dari CrUX pengguna nyata.
  • Optimasi bisa menambah kompleksitas build (critical CSS, inline, preload).
  • INP bergantung perangkat: HP kelas bawah jadi penentu.
  • Skor bukan tujuan akhir: mengejar angka tanpa memperbaiki UX bisa salah arah.
Catatan penting: Utamakan data lapangan (CrUX/RUM) dibanding skor Lighthouse sesaat. Lighthouse berguna sebagai indikator cepat, tetapi keputusan optimasi idealnya berbasis pengguna nyata.

Cara Mengukur

  • Chrome DevTools → Lighthouse untuk audit cepat halaman tunggal.
  • PageSpeed Insights untuk melihat skor lab sekaligus data lapangan.
  • web-vitals untuk mengumpulkan metrik dari pengguna nyata:
html
<script type="module">
  import { onLCP, onINP, onCLS } from 'https://unpkg.com/web-vitals@4?module';
  onLCP((m) => navigator.sendBeacon('/analytics', JSON.stringify({ name: m.name, value: m.value })));
  onINP((m) => navigator.sendBeacon('/analytics', JSON.stringify({ name: m.name, value: m.value })));
  onCLS((m) => navigator.sendBeacon('/analytics', JSON.stringify({ name: m.name, value: m.value })));
</script>

Optimasi LCP

  1. Preload gambar hero dan beri dimensi eksplisit:
    html
    <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<img src="/hero.webp" width="1200" height="630" alt="" />
  2. Font tanpa render-blocking: preconnect dan display=swap:
    html
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap" />
  3. CSS kritis di inline, sisanya ditunda:
    html
    <style>/* CSS kecil untuk area di atas lipatan */</style>
<link rel="preload" as="style" href="/styles.css?v=2" onload="this.rel='stylesheet'" />
  4. Kompresi gambar: sajikan WebP/AVIF dengan ukuran tepat (lihat panduan Sharp).
  5. Kurangi server response time: pada statis ini biasanya sudah baik berkat CDN.

Optimasi INP

  • Kurangi JavaScript di jalur kritis: muat skrip non-esensial dengan defer atau async.
  • Pecah tugas panjang: gunakan requestIdleCallback atau scheduler.yield untuk pekerjaan berat.
  • Hindari handler berat pada event scroll/input; gunakan debounce.
  • Rendering hemat: batasi manipulasi DOM besar sekaligus.
javascript
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
// Alih-alih loop mahal pada setiap event scroll.

Optimasi CLS

  • Selalu isi width/height gambar dan <iframe> agar ruang dipesan sejak awal.
  • Sediakan ruang untuk elemen dinamis (banner, iklan, kotak pencarian) sebelum dimuat.
  • Gunakan font-display: swap dan ukuran font cadangan yang mirip agar teks tidak menggeser tata letak.
  • Hindari menyisipkan konten di atas elemen yang sedang dibaca.
css
.hero img { aspect-ratio: 1200 / 630; width: 100%; height: auto; }

Optimasi Ukuran Aset

AsetTindakan
CSSMinifikasi, buang aturan tak terpakai, inline CSS kritis
JSMinifikasi, code splitting, defer
GambarWebP/AVIF, dimensi eksplisit, lazy-load di bawah lipatan
FontSubset, woff2, preconnect, display=swap
HTMLPra-render (hindari konten via JS)

Menjadikan Audit Bagian dari Alur Kerja

bash
npm run build
npx lighthouse http://localhost:8080 --view --preset=desktop

Jalankan juga pada mode mobile (bawaan) karena INP dan CLS paling terasa di perangkat lambat.

Troubleshooting

  • Skor Lighthouse bagus, CrUX buruk: fokus pada perangkat/jaringan lambat; turunkan ukuran JS dan gambar.
  • LCP tinggi karena font: gunakan font-display: swap dan preload font utama.
  • CLS muncul walau gambar punya dimensi: periksa banner cookie, font swap, atau elemen yang di-inject JavaScript setelah render.
  • INP jelek setelah menambah skrip: tunda skrip analitik/pencarian sampai idle.
  • Skor fluktuatif: jalankan beberapa kali, gunakan mode --preset=desktop vs mobile, dan bandingkan median.

Kesimpulan

Optimasi Core Web Vitals pada website statis bertumpu pada tiga hal: sajikan LCP secepat mungkin, jaga interaksi tetap ringan untuk INP, dan pesan ruang agar CLS stabil. Kombinasikan audit Lighthouse untuk iterasi cepat dengan data lapangan untuk keputusan akhir.

Artikel Terkait