Core Web Vitals Secara Praktis: Mengukur LCP, INP, dan Stabilitas Halaman
Performa web bukan hanya soal seberapa cepat event load selesai. Pengguna merasakan apakah konten utama segera muncul, tombol merespons, dan layout tidak bergeser saat halaman digunakan. Karena itu, pengukuran perlu menggabungkan data laboratorium dan data pengguna nyata.
Tiga sudut pandang utama
- LCP: kapan konten terbesar yang terlihat selesai dirender.
- INP: seberapa cepat halaman merespons interaksi pengguna.
- CLS: seberapa stabil posisi elemen selama pemuatan dan interaksi.
Metrik harus dibaca bersama konteks perangkat, jaringan, template halaman, dan jenis interaksi. Satu skor agregat tidak boleh menggantikan diagnosis terhadap halaman yang bermasalah.
Ukur di browser
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.startTime, entry.duration)
}
})
observer.observe({ type: 'measure', buffered: true })PerformanceObserver memberi notifikasi ketika entry performa tersedia. Dalam implementasi produksi, kirim data terpilih ke endpoint analitik setelah menghapus informasi sensitif dan menambahkan versi aplikasi.
Perbaikan yang biasanya berdampak
Prioritaskan gambar hero dengan ukuran yang tepat, preload hanya resource penting, kurangi JavaScript yang tidak dibutuhkan saat awal, pecah bundle berdasarkan rute, dan tetapkan dimensi media agar layout tidak bergeser. Untuk INP, cari event handler berat, pekerjaan sinkron panjang, serta render berulang yang memblokir main thread.
Lab dan field harus berdampingan
Lab berguna untuk reproduksi dan regresi sebelum rilis. Field atau Real User Monitoring menunjukkan variasi perangkat dan jaringan yang benar-benar dialami pengguna. Jika keduanya berbeda, jangan langsung menyimpulkan alat salah; periksa segmentasi trafik dan kondisi pengujian.
Kesimpulan
Performa yang baik dimulai dari pengukuran yang relevan dengan pengalaman pengguna. Pantau tren per rute dan perangkat, tetapkan budget performa, lalu verifikasi perbaikan setelah deployment.
Sumber: web.dev — User-centric performance metrics; MDN — Performance APIs; MDN — PerformanceObserver
Transparansi: Artikel ini disusun bersama Codekop AI berdasarkan sumber yang tercantum, lalu ditinjau dan disunting oleh Fauzan Falah. AI dapat keliru, jadi silakan cek kembali sumber asli.
