Web Performance 101: Core Web Vitals yang Wajib Developer Pahami

Kenapa Core Web Vitals Penting?

Sejak 2021, Google menggunakan Core Web Vitals sebagai salah satu faktor ranking. Tapi lebih dari sekedar SEO — metrik ini mencerminkan pengalaman nyata pengguna. Website yang buruk di CWV adalah website yang terasa lambat dan menjengkelkan.

1. LCP — Largest Contentful Paint

Apa ini? Waktu yang dibutuhkan untuk merender elemen konten terbesar di viewport (biasanya hero image atau heading utama).

Target: < 2.5 detik.

Cara improve:

• Preload hero image: <link rel="preload" as="image" href="/hero.webp">
• Gunakan format WebP atau AVIF.
• Sediakan server response yang cepat (TTFB < 200ms).

2. CLS — Cumulative Layout Shift

Apa ini? Mengukur seberapa sering elemen halaman bergeser secara tak terduga saat loading (misalnya teks tiba-tiba turun karena gambar di atasnya baru dimuat).

Target: < 0.1.

Cara improve:

• Selalu set atribut width dan height di tag <img>.
• Hindari menyisipkan konten di atas konten yang sudah ada (misalnya banner iklan yang muncul tiba-tiba).

3. INP — Interaction to Next Paint

Apa ini? Menggantikan FID sejak Maret 2024. Mengukur responsivitas UI terhadap interaksi pengguna secara menyeluruh — bukan hanya interaksi pertama.

Target: < 200ms.

Cara improve:

• Hindari long task JavaScript (>50ms). Pecah menjadi chunk kecil dengan setTimeout atau scheduler.yield().
• Defer non-critical JS.

Tool untuk Mengukur

• PageSpeed Insights — data lapangan (real user) + lab.
• Chrome DevTools Performance panel — untuk debug detail.
• web-vitals npm package — ukur di aplikasi sendiri secara programatik.