Digital Transformation
Web Vitals Attribution API
TL;DR: Web Vitals Attribution API adalah ekstensi resmi library web-vitals.js dari Google yang menambahkan informasi detail pada laporan LCP, INP, dan CLS. Bukan sekadar nilai metrik, API ini menunjukkan elemen DOM, event, atau script yang menjadi penyebab. Tim engineering bisa langsung tahu titik perbaikan tanpa harus reproduksi manual di Lighthouse.
Apa itu Web Vitals Attribution API?
Standar [Core Web Vitals](/glosarium/core-web-vitals) memberi angka tunggal per metrik. Masalahnya, angka tersebut tidak menjelaskan akar penyebab. Misalnya skor LCP 4,2 detik tidak memberitahu apakah pelakunya gambar hero, font web, atau script pihak ketiga. Web Vitals Attribution API mengisi celah ini dengan field attribution di setiap event yang dilaporkan, berisi metadata diagnostik yang bisa langsung diteruskan ke tools observability.
Detail yang Dilaporkan per Metrik
| Metrik | Field Atribusi Penting |
|---|---|
| LCP | element (selector), url (sumber gambar/font), timeToFirstByte, resourceLoadDelay, elementRenderDelay |
| INP | interactionTarget (selector elemen), inputDelay, processingDuration, presentationDelay, loadState |
| CLS | largestShiftTarget (elemen yang bergeser), largestShiftTime, largestShiftSource |
Dengan tiga sub-fase pada LCP, developer bisa membedakan apakah masalah ada di server (TTFB), jaringan (resource load delay), atau render (element render delay). Pendekatan ini selaras dengan rekomendasi resmi Google di web.dev: optimize LCP.
Kenapa Penting?
Tim Indonesia yang memakai Real User Monitoring sering kesulitan reproduksi insiden CWV karena kondisi pengguna berbeda dari lab. Dengan attribution data yang ikut dikirim ke GA4, Sentry, atau dashboard internal, prioritas perbaikan menjadi berbasis data nyata, bukan tebakan. Skala produksi besar membuat tiap detik LCP dan tiap milidetik INP bisa diterjemahkan menjadi konversi yang hilang.
Pertanyaan Umum
Apa bedanya dengan PageSpeed Insights?
PageSpeed Insights memberi diagnosa berdasarkan satu kali load di lab Lighthouse. Web Vitals Attribution API mengumpulkan data dari pengguna nyata di lapangan, sehingga lebih representatif untuk traffic produksi.
Apakah ringan dipakai di produksi?
Ya. Library web-vitals/attribution hanya menambah sekitar 2 KB gzipped dibanding versi inti. Cukup ringan untuk dipasang di semua halaman tanpa khawatir performa.
Istilah Terkait