Cara Marketer Indonesia Monitor Field Data CrUX di Next.js untuk Validasi Skor Core Web Vitals Pengguna Nyata 2026

TL;DR: Lighthouse di laptop developer sering menampilkan skor Core Web Vitals 95+, tapi pengguna nyata Indonesia dengan Android mid-range dan jaringan 4G fluktuatif mungkin mengalami skor jauh lebih rendah. Solusinya: pasang monitoring field data dari Chrome User Experience Report (CrUX) plus web-vitals.js di Next.js. Setup ini gratis, butuh 2 jam, dan memberikan data yang benar-benar dipakai Google untuk ranking.

Skenario ini terjadi berulang di proyek-proyek terakhir saya. Tim marketing mendorong launch landing page baru. Developer test pakai Lighthouse di laptop M-series, skor 96. Tiga minggu kemudian Google Search Console memperingatkan: "URLs need improvement" untuk LCP. Apa yang salah?

Yang salah adalah marketer dan developer melihat skor yang beda dari yang Google pakai. Lighthouse menampilkan lab data, data simulasi terkendali. Google ranking pakai field data, data dari pengguna nyata.

Kenapa Field Data Berbeda dengan Lab Data

Praktik standar di industri menunjukkan gap 20-40% antara skor Lighthouse dan field data, terutama untuk audiens Indonesia. Penyebabnya kombinasi tiga hal: perangkat (Android mid-range punya CPU 4-6x lebih lambat dari MacBook), jaringan (4G di Jakarta seringkali throttle saat jam sibuk), dan perilaku (pengguna nyata berinteraksi cepat, bukan menunggu halaman selesai load).

Sebagai contoh dari proyek Atmo LMS, Lighthouse melaporkan LCP 1,8 detik. Setelah pasang monitoring field data, LCP p75 pengguna nyata ternyata 3,4 detik, melebihi threshold "Good" Google yang 2,5 detik.

Setup di Next.js: Dua Layer

Saya rekomendasikan dua layer monitoring yang saling melengkapi.

Layer 1: web-vitals.js untuk Granular Per-URL

Install dulu:

npm install web-vitals

Buat file lib/vitals.ts:

import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';

export function reportVitals(url: string) {
  const send = (metric: any) => {
    const body = JSON.stringify({
      url,
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      id: metric.id,
      ts: Date.now(),
    });
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/vitals', body);
    } else {
      fetch('/api/vitals', { body, method: 'POST', keepalive: true });
    }
  };
  onCLS(send); onINP(send); onLCP(send); onFCP(send); onTTFB(send);
}

Panggil di app/layout.tsx lewat client component. Endpoint /api/vitals simpan ke Supabase atau tabel analytics sendiri. Setup ini mirip dengan yang sudah dijelaskan di panduan web-vitals.js untuk RUM gratis, bedanya di sini fokus ke validasi terhadap field data CrUX.

Layer 2: CrUX API untuk Validasi Origin-Level

CrUX API memberikan data agregat 28 hari. Untuk dashboard mingguan, pakai endpoint origin level:

const CRUX_API = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord';

export async function fetchCrUX(origin: string) {
  const res = await fetch(`${CRUX_API}?key=${process.env.CRUX_API_KEY}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      origin,
      metrics: ['largest_contentful_paint', 'interaction_to_next_paint', 'cumulative_layout_shift'],
      formFactor: 'PHONE',
    }),
  });
  return res.json();
}

API key gratis dari Google Cloud Console. Rate limit 150 query per menit, cukup untuk monitoring harian beberapa website.

Membaca Hasilnya

Saat membangun dashboard CrUX untuk Vetmo, kami menampilkan 3 angka per metrik: p75 mobile, p75 desktop, dan persentase "Good". Yang dipakai Google sebagai sinyal ranking adalah p75, artinya nilai yang dialami 75% pengguna. Jika p75 LCP di atas 2,5 detik, halaman dianggap "Needs improvement" oleh Google, sekalipun rata-rata terlihat bagus.

Untuk Vetmo, kombinasi web-vitals.js per URL plus CrUX API origin-level mengungkap bahwa masalah LCP terkonsentrasi di halaman profil dokter hewan yang punya foto besar. Setelah optimasi pakai next/image dengan priority dan ukuran responsive, p75 LCP turun dari 3,1 ke 1,9 detik dalam 4 minggu, dan persentase "Good" naik dari 58% ke 84%.

Pertanyaan Umum

Apakah pasang web-vitals.js memperlambat website?

Library ini ringan, sekitar 1,7 KB minified. Pengiriman data via Beacon API tidak memblokir rendering. Dampak performa praktis nol.

Berapa lama field data CrUX muncul untuk website baru?

Umumnya 14-28 hari trafik konsisten. CrUX butuh sample size minimum yang tidak diumumkan publik, tapi pengalaman saya: di bawah 1.000 unique mobile visitor per bulan biasanya tidak akan muncul di CrUX.

Apakah perlu monitor field data kalau website kecil dengan trafik rendah?

Untuk situs di bawah 500 sesi per bulan, prioritaskan dulu pakai PageSpeed Insights manual seminggu sekali. Setup monitoring otomatis baru worth it saat trafik konsisten di atas 1.000 sesi per bulan.

Bisa pakai Google Analytics 4 untuk monitor Core Web Vitals?

Bisa lewat web-vitals.js + gtag, tapi GA4 sampling bisa mendistorsi p75. Lebih akurat kirim ke database sendiri (Supabase, BigQuery) untuk analisis tanpa sampling.

Penutup: Validasi Sebelum Ekspansi

Sebelum tim marketing meluncurkan kampanye akuisisi besar, validasi dulu field data Core Web Vitals di halaman tujuan. Trafik berbayar yang masuk ke halaman dengan LCP buruk akan punya bounce rate tinggi dan conversion rate rendah, berapapun bagus copy iklannya. Field data adalah cermin yang jujur, jangan dilewati.

Referensi tambahan: Dokumentasi resmi CrUX dari Chrome team untuk pemahaman dasar dan limit teknis.