Studi Kasus Yuanita Sekar: Pakai CWV Attribution untuk Debug LCP yang Salah Tebak di Personal Brand 2026

TL;DR: Di awal 2026, website personal branding Yuanita Sekar mencatat LCP 3,4 detik dan tim mengasumsikan penyebabnya adalah hero image. Setelah memasang Core Web Vitals Attribution, ternyata 1,8 detik dari LCP berasal dari Element Render Delay akibat font web blocking. Solusi font-display swap memangkas LCP ke 1,5 detik dalam satu hari.

Saya pernah salah tebak penyebab Largest Contentful Paint lebih dari sekali. Di website Yuanita Sekar, kasusnya klasik: angka LCP buruk, ada hero image besar, kesimpulan langsung tertuju ke image optimization. Setelah dua minggu eksperimen format gambar dari WebP ke AVIF dan kompresi agresif, angka LCP tidak bergerak signifikan.

Yang akhirnya membuka tabir adalah mode Core Web Vitals Attribution. Dalam dua jam setelah dipasang, kami tahu masalah sebenarnya bukan di gambar.

Diagnosa Awal yang Meleset

Lab data dari Lighthouse menunjukkan LCP 3,4 detik di mobile. Karena Largest Contentful Paint element adalah hero image, tim langsung fokus mengoptimasi gambar. Format diubah AVIF, kualitas turun ke 70%, dimensi disesuaikan untuk srcset. Hasilnya: ukuran turun 64%, LCP turun cuma 0,3 detik. Tidak masuk akal.

Pasang Attribution Build

Saya ganti import { onLCP } from 'web-vitals' menjadi import { onLCP } from 'web-vitals/attribution'. Kirim data ke endpoint internal yang membaca field LCP Sub-parts.

Data 200 sample pertama mengejutkan:

Element Render Delay 1,82 detik artinya: gambar sudah selesai di-download, tapi browser tidak bisa langsung render karena ada sesuatu yang blocking.

Akar Penyebab: Font Web

Dengan field attribution.element dan timing detail, saya cek waterfall network di Chrome DevTools. Hero image siap pada detik 0,9. Tapi font web (Inter dari Google Fonts) baru selesai di detik 2,7 karena di-load via <link rel="stylesheet"> tanpa font-display: swap. Browser menunggu font untuk merender text di atas hero, yang menunda paint elemen LCP.

Ini insight yang tidak terlihat tanpa attribution. Field data dari CrUX cuma kasih angka akhir, tidak kasih timeline sub-part.

Solusi dan Hasil

Tiga perbaikan kecil dalam satu hari:

1. Tambah font-display: swap di CSS font face.
2. Preconnect ke fonts.googleapis.com dan fonts.gstatic.com.
3. Self-host font subset Latin saja, drop file Cyrillic dan Greek.

Hasil setelah 14 hari kumpul RUM baru: LCP median turun dari 3,4 detik ke 1,5 detik. Element Render Delay turun dari 1.820 ms ke 240 ms.

Detail teknis font optimization saya rangkum di panduan font preload Next.js untuk konteks marketer.

Pertanyaan Umum

Apakah saya wajib pakai attribution build di produksi?

Tidak wajib seluruh traffic. Praktik di proyek saya: sample 10% traffic dengan attribution build, sisanya pakai build standar. Ini menjaga payload tetap kecil.

Berapa biaya tambahan untuk attribution build?

Sekitar 1,5-2 KB gzipped dibanding build standar. Tidak signifikan untuk dampaknya.

Bagaimana cara mulai jika belum punya RUM internal?

Mulai dari kirim data ke Google Analytics 4 sebagai custom event. Cukup untuk menemukan pola di 1-2 minggu pertama.

Apakah masalah font yang sama bisa terjadi di e-commerce?

Sangat sering. Di proyek Nalesha (e-commerce parfum), pola serupa ditemukan di halaman produk. Polanya: angka LCP buruk, tapi gambar bukan biangnya.

Insight Praktis

Jangan asumsikan elemen LCP terbesar adalah biang kerok. Pasang attribution sebelum eksperimen optimasi gambar yang mahal waktu. Dua jam diagnosa lebih hemat daripada dua minggu coba-coba.

Sumber teknis: dokumentasi web-vitals attribution dan web.dev: LCP.