Tiga Metrik Utama yang Perlu Dipahami
Core Web Vitals adalah kumpulan metrik dari Google untuk mengukur seberapa nyaman sebuah halaman saat diakses pengunjung asli, baik dari kecepatan tampil, kestabilan tata letak, maupun responsivitas saat tombol diklik.
LCP (Largest Contentful Paint)
Mengukur waktu elemen terbesar di layar selesai dimuat. Target ideal berada di bawah 2.5 detik.
INP (Interaction to Next Paint)
Mengukur seberapa cepat antarmuka merespons klik atau ketukan pengguna. Target ideal di bawah 200 milidetik.
CLS (Cumulative Layout Shift)
Mengukur kestabilan tata letak agar konten tidak tiba-tiba bergeser saat aset masih dimuat. Target ideal di bawah 0.1.
Quick Wins Optimasi di Next.js
- Gunakan komponen gambar bawaan (
next/image) lengkap dengan dimensi eksplisit dan flagpriorityhanya untuk visual utama di atas lipatan. - Kurangi ukuran JavaScript klien dengan menjaga komponen statis tetap menjadi Server Components, sementara animasi interaktif dibatasi pada elemen kecil yang membutuhkannya.
- Manfaatkan static rendering atau caching untuk halaman artikel dan portofolio agar TTFB tetap rendah.