Digital Transformation
web-vitals (Library JavaScript)
TL;DR: web-vitals adalah library JavaScript dari Google Chrome team yang mengukur LCP, INP, dan CLS langsung di browser pengguna nyata, lalu mengirim hasilnya ke endpoint analytics pilihan Anda. Library ini menjadi standar industri untuk Real User Monitoring (RUM) Core Web Vitals di 2026.
Apa itu web-vitals Library?
web-vitals adalah package npm ringan, sekitar 1,5 KB gzipped, yang dikelola tim Chrome. Library ini menyediakan fungsi onLCP, onINP, onCLS, onFCP, dan onTTFB yang otomatis mengukur metrik Core Web Vitals saat halaman dimuat dan saat pengguna berinteraksi.
Berbeda dengan Lighthouse yang mengukur lab data (kondisi simulasi), web-vitals mengumpulkan field data langsung dari pengguna nyata. Hasil ukurannya bisa dikirim ke Google Analytics 4, Vercel Speed Insights, atau endpoint custom.
Cara Kerja
| Fungsi | Metrik | Trigger |
|---|---|---|
onLCP(cb) | Largest Contentful Paint | Saat elemen LCP final terdeteksi |
onINP(cb) | Interaction to Next Paint | Saat tab di-hide atau page-unload |
onCLS(cb) | Cumulative Layout Shift | Saat tab di-hide atau page-unload |
onFCP(cb) | First Contentful Paint | Saat first paint elemen konten |
onTTFB(cb) | Time to First Byte | Saat response header diterima |
Setiap callback menerima objek berisi value, rating (good/needs-improvement/poor), dan attribution (data debug seperti elemen LCP atau script penyebab long task).
Kenapa Penting?
Per April 2026, INP sudah menjadi metrik resmi Core Web Vitals selama 16 bulan. Tanpa library web-vitals, marketer dan developer harus menulis PerformanceObserver manual untuk setiap metrik, dan rentan miss event seperti page-unload atau visibility-change. Library ini menangani edge case tersebut dan menghasilkan angka yang konsisten dengan apa yang dilihat Google di CrUX.
Pertanyaan Umum
Apakah web-vitals sama dengan PageSpeed Insights?
Tidak. PageSpeed Insights menggabungkan lab data dari Lighthouse dan field data dari CrUX. web-vitals adalah library yang Anda pasang sendiri untuk mengukur field data dari pengguna spesifik di situs Anda.
Bagaimana cara mengirim hasil ke Google Analytics 4?
Di callback, panggil gtag('event', metric.name, {value: metric.value, metric_rating: metric.rating}). GA4 akan menampilkannya di laporan custom event.
Istilah Terkait