Web Vitals Attribution: Cara Debug Konversi Melalui Metrik Performa 2026

TL;DR: Web Vitals Attribution adalah API browser yang memberi tahu elemen DOM mana yang menyebabkan LCP lambat, INP tersendat, atau CLS bergeser. Bagi marketer Indonesia, data ini menjadi peta debug konversi yang lebih akurat daripada hanya melihat skor agregat. Mulai dengan kirim atribusi ke GTM atau analitik internal, lalu segmentasikan per halaman konversi penting.

Saat membangun ulang dashboard Atmo (platform LMS milik internal), saya mengalami kasus klasik. Skor LCP terlihat baik di laporan PageSpeed, namun tingkat konversi di halaman daftar kursus jatuh. Setelah dipasang Web Vitals Attribution, baru terlihat ada satu hero image yang lambat di koneksi 4G Indonesia, sementara di koneksi tim dev semuanya kencang. Data agregat menyembunyikan masalah lokal.

Apa Itu Web Vitals Attribution

Konsep ini dibangun di atas tiga metrik utama Core Web Vitals. Yang membedakan Attribution dari skor biasa adalah ia menambahkan informasi terkait elemen DOM, sumber daya, atau interaksi yang menjadi biang masalah. Penjelasan teknis lengkap tersedia di Web Vitals Attribution. Praktiknya, Attribution membuat Anda berhenti menebak.

Tanpa Attribution, Anda hanya tahu skor. Dengan Attribution, Anda tahu apa yang harus diperbaiki.

Setup Praktis

Library web-vitals-attribution dari tim Chrome menjadi pilihan paling umum. Berikut kerangka implementasi yang saya pakai di proyek Next.js.

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

const send = (metric) => {
  const attr = metric.attribution || {};
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      element: attr.element,
      eventType: attr.eventType,
      largestShiftTarget: attr.largestShiftTarget
    })
  });
};

onLCP(send);
onINP(send);
onCLS(send);

Hasil dikirim ke endpoint internal, lalu disimpan di database untuk dianalisis. Praktik standar di industri adalah memetakan setiap event ke session ID dan halaman. Tim bisa menjawab pertanyaan seperti, halaman mana yang INP-nya naik minggu ini, dan elemen apa pemicunya.

Studi Kasus Dari Praktik

Saat membantu Vetmo, platform pet care, men-debug penurunan konversi formulir booking, data atribusi menunjukkan hal mengejutkan. Skor CLS rata-rata hanya 0,08 yang masih dalam zona baik. Namun di 18 persen sesi, CLS spike sampai 0,4 karena banner promo lazy-load yang dirender belakangan tanpa reservasi tinggi. Banner itu tidak terlihat di lab testing karena hanya muncul di kondisi konektivitas tertentu.

Setelah memberi reservasi aspect-ratio ke banner dan menerapkan content-visibility, CLS rata-rata turun ke 0,03, dan completion rate formulir naik 14 persen dalam dua minggu. Angka ini berasal dari satu klien dan ukuran sample relatif kecil, bukan klaim universal. Tapi pola observasinya konsisten: masalah konversi yang sulit dilacak sering berakar di Web Vitals di kelompok pengguna tertentu, bukan di rata-rata.

Apa Yang Harus Dilakukan Tim Marketing

Tiga hal yang bisa langsung dieksekusi minggu ini.

Pertama, pasang Attribution di halaman konversi utama. Bukan semua halaman, fokuskan dulu di landing page kampanye dan halaman checkout. Lihat juga panduan KPI website 3 bulan pertama untuk konteks metriknya.

Kedua, buat segmentasi per device dan koneksi. Pengguna 4G Indonesia, terutama di luar Jakarta, sering punya pengalaman jauh berbeda dari pengguna kantor. Data atribusi membantu mengkonfirmasi apakah penurunan konversi datang dari kelompok ini.

Ketiga, hubungkan ke CrUX sebagai referensi industri. Data field dari CrUX menunjukkan distribusi nyata di publik, sementara atribusi memberi konteks teknisnya.

Untuk panduan setup lebih lengkap, dokumentasi resmi dari Chrome di web.dev menjelaskan flow end-to-end termasuk debugging field data. Saya juga sering merujuk ke PerformanceObserver API di MDN untuk implementasi custom.

Pertanyaan Umum

Apakah Attribution memperlambat halaman?

Tidak signifikan. Library Web Vitals Attribution ukurannya kecil, sekitar 2 hingga 3 KB gzip, dan eksekusinya non-blocking. Pengukuran umumnya menambah latency di bawah 1 ms per event.

Bisa dipakai untuk single page application?

Bisa. Pastikan memanggil ulang observer setelah route change agar data per halaman tetap akurat. Di Next.js App Router, ini bisa dipasang di komponen layout dengan effect yang ter-trigger setiap navigasi.

Apakah harus pakai library Chrome?

Tidak wajib. Anda bisa memakai PerformanceObserver browser native. Library Chrome hanya memberikan abstraksi yang lebih nyaman dan menambahkan logika atribusi yang sudah teruji.

Bagaimana cara visualisasi datanya?

Mulai sederhana saja, dashboard Looker Studio atau Metabase dengan tabel session-level sudah cukup di tahap awal. Saat data tumbuh, baru pertimbangkan pipeline yang lebih kompleks.

Apakah data ini sensitif privasi?

Sebagian. Element selector seperti hero-image atau cta-button umumnya aman. Tapi data input pengguna jangan sampai ikut terkirim. Pastikan implementasi mengabaikan content sensitif sesuai panduan privasi internal.

Penutup Aplikatif

Web Vitals Attribution menutup celah antara metrik dan tindakan. Skor tanpa atribusi hanya memberi tahu ada masalah. Skor dengan atribusi memberi tahu elemen mana yang harus diperbaiki, di kondisi mana, oleh siapa. Bagi tim marketing yang ingin berbicara satu bahasa dengan tim engineering, data atribusi adalah jembatan yang paling cepat dipasang minggu ini.