Cara Marketer Indonesia Pasang web-vitals.js untuk RUM Gratis di Next.js Tanpa Tool Berbayar 2026

TL;DR: Pasang web-vitals.js di Next.js cukup tiga langkah: install library, panggil di useReportWebVitals hook, kirim data ke endpoint Supabase pakai navigator.sendBeacon. Hasilnya Real User Monitoring penuh untuk LCP, INP, CLS yang biasa Anda bayar 50 USD per bulan ke SpeedCurve atau Calibre, kini gratis dan punya data sendiri.

Selama 2024-2025, tool RUM komersial seperti SpeedCurve, Calibre, dan Datadog RUM jadi pilihan standar untuk memantau performa website. Masalahnya, semua berlangganan dolar, mulai 30 USD per bulan untuk satu situs. Untuk bisnis lokal dengan margin tipis, biaya itu sulit dijustifikasi cuma untuk pantau tiga angka.

Library web-vitals.js dari tim Chrome menutup gap ini. Ukurannya 2 KB, lisensi Apache 2.0, dan sudah dipakai di balik layar oleh Next.js sendiri. Tinggal hubungkan ke endpoint analitik, Anda dapat data field Core Web Vitals dari pengguna nyata.

Kenapa RUM Lebih Akurat dari Lighthouse

Lab Data seperti Lighthouse memakai simulasi: device emulated, koneksi throttled 4G simulasi, lokasi server lab. Realitanya, pengunjung dari Indonesia bisa pakai Vivo Y17 di koneksi Indosat 3G di Madura, latency 350 ms. Lighthouse tidak menangkap itu. Field Data (CrUX) menangkap, tapi datanya agregat 28 hari, tidak per halaman, dan minimal 75th percentile.

RUM dari web-vitals.js memberi yang tidak bisa dikasih Lighthouse atau CrUX: data per request, per URL, per device, real-time.

Setup di Next.js 15 dalam 3 Langkah

1. Install Library

npm install web-vitals

2. Buat Reporter di app/layout.tsx

"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitalsReporter() {
  useReportWebVitals((metric) => {
    const body = JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      id: metric.id,
      path: window.location.pathname,
    });
    navigator.sendBeacon("/api/vitals", body);
  });
  return null;
}

3. Endpoint Supabase

Buat route app/api/vitals/route.ts yang nge-insert ke tabel web_vitals_log. Pakai navigator.sendBeacon agar tidak menahan unload event.

Studi Kasus: Atmo LMS Pakai Setup Ini

Saat membangun Atmo LMS, kami sempat berlangganan SpeedCurve 50 USD per bulan selama 6 bulan. Setelah migrasi ke web-vitals.js + Supabase, biaya turun ke nol (Supabase free tier cukup untuk 10 ribu event per hari). Yang lebih penting, kami akhirnya bisa filter per halaman pricing yang traffic tinggi, sesuatu yang di SpeedCurve hanya tersedia di plan 100 USD per bulan.

Salah satu temuan: INP halaman pricing buruk (380 ms) hanya di Android low-end. Lighthouse tidak menangkap karena emulasi default-nya Moto G4. Setelah identifikasi, tim optimize event handler tombol pilih paket, INP turun ke 140 ms.

Frekuensi Sampling untuk Volume Tinggi

Kalau traffic harian Anda di atas 50 ribu, mengirim semua event akan boros bandwidth dan baris database. Praktik standar: sampling 10%. Tinggal pasang Math.random() < 0.1 sebelum kirim. Untuk panduan resmi sampling, lihat Web Vitals best practices di web.dev.

Visualisasi: Bikin Dashboard Sendiri

Setelah data masuk Supabase, query dasar untuk dashboard:

SELECT path, name, percentile_cont(0.75) WITHIN GROUP (ORDER BY value)
FROM web_vitals_log
WHERE created_at > NOW() - INTERVAL '7 days'
GROUP BY path, name
ORDER BY path;

Render di Next.js pakai chart library favorit Anda. Total waktu setup: kurang dari 2 jam untuk developer Next.js menengah.

Pertanyaan Umum

Apakah web-vitals.js mengirim data ke Google?

Tidak. Library hanya membaca metrik dari browser API. Tidak ada koneksi otomatis ke server Google. Developer 100% kontrol mau kirim ke mana.

Berapa biaya Supabase untuk simpan data ini?

Free tier Supabase (500 MB database, 2 GB egress) cukup untuk situs dengan 50-100 ribu pageview per bulan jika sampling 10%. Untuk traffic lebih besar, plan Pro 25 USD per bulan tetap lebih murah dari SpeedCurve.

Apakah ini bisa untuk WordPress atau non-Next.js?

Bisa. Library web-vitals murni browser-side, jalan di WordPress, Astro, Vue, atau HTML statis. Yang berbeda hanya cara load script-nya.

Apa risiko privacy untuk visitor?

Minimal. Data yang dikirim hanya angka metrik, URL halaman, dan ID acak per session. Tidak ada IP, cookie, atau identifier persisten. Tetap pasang notice di privacy policy untuk transparansi.

Apakah perlu CMP (consent management) untuk RUM ini?

Bergantung yurisdiksi. Di Indonesia, UU PDP belum eksplisit mensyaratkan consent untuk performance metric anonim. Praktik konservatif: sebut di privacy policy, tidak perlu cookie banner.

Penutup

RUM bukan barang mewah lagi. Library 2 KB plus Supabase free tier cukup untuk dapat visibility performa setara tool 50 USD per bulan. Investasi awalnya 1-2 jam coding, return-nya keputusan optimasi yang berbasis data nyata bukan tebakan dari Lighthouse.