Website Bisnis

Cara Marketer Indonesia Pasang Core Web Vitals Attribution di Next.js untuk Debug Performa Tanpa Tim Performance 2026

Vito Atmo·25 Mei 2026·0 kali dibaca·3 min baca

Cara Marketer Indonesia Pasang Core Web Vitals Attribution di Next.js untuk Debug Performa Tanpa Tim Performance 2026

TL;DR: Core Web Vitals Attribution adalah varian library web-vitals Google yang melampirkan akar penyebab pada metrik LCP, INP, dan CLS. Dengan pasang attribution di Next.js dan kirim datanya ke Google Analytics 4, marketer Indonesia dapat menemukan akar masalah performa dalam hitungan jam tanpa perlu tim performance khusus.

Banyak marketer Indonesia yang saya temui memiliki angka Core Web Vitals merah, tapi tidak tahu harus mulai dari mana. Saran umum seperti "kompres gambar" atau "kurangi JavaScript" sering tidak menjawab masalah sebenarnya. Dalam beberapa proyek terakhir, CWV Attribution terbukti memangkas waktu diagnosa dari minggu ke jam.

Kenapa Tebak-tebakan Mahal

Saat angka LCP buruk, tim biasa mengasumsikan gambar adalah penyebab. Eksperimen kompresi dan format butuh waktu beberapa hari. Kalau ternyata penyebab sebenarnya adalah font web atau CSS blocking, eksperimen itu cuma menambah utang waktu.

Patokan dari praktik di proyek Atmo, Vetmo, dan Yuanita Sekar: rata-rata 60-70% asumsi awal penyebab LCP buruk meleset. Tanpa attribution, biaya error besar.

Apa yang Dibutuhkan

Stack minimum:

Next.js 13 atau lebih baru (App Router atau Pages Router).
Akses ke Google Analytics 4 yang sudah terpasang.
Skill terminal dasar untuk npm install.

Tidak perlu RUM berbayar di tahap awal. GA4 cukup untuk menemukan pola di dua minggu pertama.

Langkah Pasang di Next.js

Pertama, install library:

bash

npm install web-vitals

Kedua, buat file lib/report-vitals.ts:

import { onLCP, onINP, onCLS } from 'web-vitals/attribution';

export function reportVitals(metric: any) {
  const body = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    attribution: metric.attribution,
  };
  if ('sendBeacon' in navigator) {
    navigator.sendBeacon('/api/vitals', JSON.stringify(body));
  }
  if (typeof window.gtag === 'function') {
    window.gtag('event', metric.name, {
      value: Math.round(metric.value),
      metric_id: metric.id,
      metric_rating: metric.rating,
      debug_target: metric.attribution?.element || metric.attribution?.largestShiftSource,
    });
  }
}

export function initVitals() {
  onLCP(reportVitals);
  onINP(reportVitals);
  onCLS(reportVitals);
}

Ketiga, panggil di root layout (app/layout.tsx):

tsx

'use client';
import { useEffect } from 'react';
import { initVitals } from '@/lib/report-vitals';

export function VitalsClient() {
  useEffect(() => { initVitals(); }, []);
  return null;
}

Mount <VitalsClient /> di <body> layout.

Baca Hasil di GA4

Buka GA4, Reports, Events, cari event LCP, INP, CLS. Buat custom dimension untuk debug_target dari parameter event. Setelah 3-5 hari, akan terlihat pola, misalnya:

debug_target	Jumlah Event	LCP Median
`#hero-image`	1.240	2,8 detik
`.product-title`	820	3,4 detik
`nav` (font swap)	640	4,1 detik

Pola ini langsung menunjuk akar masalah. Di kasus tabel di atas, font swap di nav adalah penyebab utama, bukan hero image.

Contoh Nyata dari Proyek

Saat membangun Atmo LMS, pasang attribution memakan waktu 90 menit. Hasilnya, dalam tiga hari kami tahu bahwa Element Render Delay menyumbang 1,3 detik LCP karena CSS modal yang lazy-load tapi blocking. Detail teknis di studi kasus Atmo Resource Hints.

Di proyek Yuanita Sekar, polanya berbeda: font web adalah biang kerok, bukan gambar. Detail di studi kasus Yuanita CWV Attribution.

Pertanyaan Umum

Apakah ini perlu izin developer?

Tidak. Marketer dengan akses repo dan kemampuan terminal dasar bisa pasang sendiri. Kalau ragu, minta developer review pull request.

Berapa lama sampai data berguna?

Pola mulai kelihatan setelah 1.000-2.000 event, atau sekitar 3-5 hari untuk traffic 200-500 visitor harian.

Bagaimana kalau tidak pakai Next.js?

Pola sama untuk React, Vue, atau static site. Cukup import dari web-vitals/attribution dan kirim ke GA4 atau endpoint custom.

Apakah ini menggantikan Lighthouse?

Tidak. Lighthouse adalah Lab Data, attribution adalah Field Data dari pengguna asli. Keduanya saling melengkapi.

Apakah sampling 100% traffic aman?

Untuk traffic di bawah 10.000 visitor harian, aman. Untuk traffic lebih besar, sampling 10-25% sudah cukup.

Insight Praktis

Pasang attribution sebelum melakukan eksperimen optimasi performa berbiaya tinggi. Dua jam investasi awal menyelamatkan minggu eksperimen yang salah arah. Untuk marketer Indonesia yang tidak punya tim performance, ini cara paling murah masuk ke level diagnosa yang biasanya hanya dimiliki tim besar.

Sumber: Google web.dev: Debug Web Vitals dan repo resmi web-vitals.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang