Core Web Vitals

Definisi

Core Web Vitals (CWV) adalah 3 metric dari Google untuk mengukur kualitas user experience sebuah website. Jadi ranking factor sejak 2021.

3 metric utama:

Note: INP menggantikan FID per Maret 2024.

LCP — Largest Contentful Paint

Berapa lama element terbesar di viewport (biasanya hero image atau heading) selesai render.

Penyebab LCP lambat

• Server response lambat (TTFB tinggi)
• Render-blocking JavaScript / CSS
• Gambar besar tidak optimize
• Client-side rendering tanpa SSR

Cara optimasi

• SSR / SSG (bukan full CSR)
• Image optimization (WebP, AVIF, lazy load dengan priority untuk LCP image)
• Preload critical resource
• CDN
• Minify CSS/JS

INP — Interaction to Next Paint

Berapa lama browser respon setelah user interaksi (klik, type, scroll).

Penyebab INP tinggi

• Main thread ke-block dengan JS heavy
• Third-party scripts (analytics, chat widget)
• Unoptimized event handlers
• Large React re-renders

Cara optimasi

• Code splitting
• Defer / async non-critical scripts
• Web workers untuk heavy computation
• React useMemo / useCallback untuk expensive operations
• Minimize third-party bloat

CLS — Cumulative Layout Shift

Berapa banyak element tiba-tiba bergeser saat page load (sangat annoying).

Penyebab CLS tinggi

• Gambar tanpa width/height attribute
• Iklan yang inject belakangan
• Font swap (FOUT/FOIT)
• Content injection dinamis (recommendation, notification)

Cara optimasi

• Always set width + height di <img> (atau aspect-ratio)
• Reserve space untuk iklan sebelum load
• font-display: optional atau preload font
• Hindari insert konten di atas visible area setelah page loaded

Cara Ukur CWV

Lab data (simulasi)

• Lighthouse (built-in Chrome DevTools)
• PageSpeed Insights (pagespeed.web.dev)

Field data (real user)

• Chrome User Experience Report (CrUX) — data agregat dari Chrome user
• Google Search Console → Core Web Vitals report
• Vercel Analytics / web-vitals library — track di production

Impact SEO

CWV mempengaruhi ranking, tapi:

• Content quality tetap primary factor
• CWV tie-breaker antar halaman dengan konten serupa
• Fail di mobile + desktop = penalty

Target untuk Next.js

App Router + optimizations Next.js bawaan biasanya udah lulus CWV. Focus:

• Pakai <Image> component (auto optimize + aspect ratio)
• Pakai <Link> component (prefetch otomatis)
• Font via next/font (auto preload + swap)
• SSR/SSG untuk page critical