Digital Transformation
web-vitals.js
TL;DR: web-vitals.js adalah library resmi dari tim Chrome berukuran sekitar 2 KB yang membaca metrik Core Web Vitals (LCP, INP, CLS) dari API browser dan mengirimkannya ke endpoint analitik apa pun. Library ini menjadi cara paling murah untuk pasang Real User Monitoring (RUM) tanpa berlangganan tool berbayar seperti SpeedCurve atau Datadog.
Apa itu web-vitals.js?
web-vitals.js adalah library JavaScript open-source yang dirilis Google Chrome team. Fungsinya satu, mengukur metrik performa halaman (LCP, INP, CLS, TTFB, FCP) dari pengalaman pengguna nyata, lalu memanggil callback yang ditentukan developer. Library ini tidak mengirim data ke mana pun secara default. Developer bebas mengirimkan ke Google Analytics 4, Supabase, atau endpoint internal.
Bedanya dengan Lab Data seperti Lighthouse: web-vitals.js mengumpulkan Field Data (CrUX) dari device sungguhan, bukan simulasi laboratorium. Angka yang masuk merefleksikan koneksi, perangkat, dan lokasi pengguna sebenarnya.
Cara Kerja
| Metrik | Kapan Direkam | Threshold "Good" |
|---|---|---|
| LCP | Setelah elemen terbesar tampak | < 2,5 detik |
| INP | Pada interaksi pertama pengguna | < 200 ms |
| CLS | Saat halaman akan ditutup atau di-background | < 0,1 |
| FCP | Saat first paint terlihat | < 1,8 detik |
| TTFB | Setelah response header diterima | < 800 ms |
Library memanggil onLCP, onINP, onCLS, onFCP, onTTFB. Setiap callback menerima objek dengan value, id, rating (good, needs-improvement, poor), dan entries. Developer tinggal kirim ke endpoint pilihan via navigator.sendBeacon() agar tidak mengganggu unload halaman.
Kenapa Penting
Tanpa RUM, marketer dan developer di Indonesia hanya melihat skor PageSpeed Insights yang berbasis lab. Padahal mayoritas traffic dari koneksi 4G yang lebih lambat dari simulasi default. web-vitals.js menutup gap ini dengan biaya hampir nol. Berdasarkan praktik tim performance di proyek client Vito Atmo, RUM dari web-vitals.js sering mengungkap masalah yang tidak terdeteksi Lighthouse, terutama INP di halaman dengan banyak interaksi JavaScript.
Untuk dokumentasi resmi, lihat repo web-vitals di GitHub.
Pertanyaan Umum
Apakah web-vitals.js bayar?
Tidak. Library open-source di bawah lisensi Apache 2.0. Yang berpotensi berbayar adalah endpoint tujuan, misal kalau dikirim ke Google Analytics 4 atau database custom yang volume traffic tinggi.
Apakah web-vitals.js bisa di Next.js?
Bisa. Next.js punya hook bawaan useReportWebVitals di App Router yang sudah memakai library ini di balik layar. Tinggal panggil di file app/layout.tsx.