Studi Kasus Felicia Tan: Pakai web-vitals Library Pulihkan INP Halaman Konsultasi dari 412 ke 168 ms dalam 21 Hari di 2026

TL;DR: Halaman konsultasi Felicia Tan punya lab data Lighthouse hijau, tapi INP lapangan 412 ms (poor). Setelah pasang web-vitals library dan kirim attribution data ke Google Analytics 4, kami identifikasi 1 script third-party penyebab utama. Setelah lazy-load script tersebut, INP turun ke 168 ms dalam 21 hari. Konversi form naik 22 persen.

Awal April 2026, Felicia Tan menghubungi kami dengan keluhan yang sering muncul: "Lighthouse skor 96, tapi konversi form konsultasi turun 18 persen bulan lalu". Lab data dari Lighthouse memang hijau, tapi dia lupa satu hal penting. Lighthouse mengukur lab data, bukan apa yang dialami pengguna nyata di lapangan.

Cerita ini sering terulang di proyek-proyek terakhir. Marketer percaya skor Lighthouse karena angkanya gampang dibaca, padahal Google menilai SEO dari field data yang dikumpulkan dari pengguna Chrome nyata.

Diagnosis: Lab Data Hijau Tapi Field Data Merah

Langkah pertama, kami cek CrUX Dashboard untuk domain Felicia. Hasilnya mengejutkan:

INP di 412 ms artinya 25 persen interaksi pengguna terasa freeze lebih dari 0,4 detik. Ini menjelaskan kenapa form konsultasi terasa lambat. Tapi data CrUX hanya menunjukkan angka agregat, bukan script penyebabnya.

Pasang web-vitals Library dengan Attribution

Solusi kami: pasang web-vitals library versi attribution build, yang mengirim debug info per kejadian poor INP. Implementasinya 28 baris di komponen _app.tsx Next.js:

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

onINP((metric) => {
  const attr = metric.attribution;
  gtag('event', 'INP_debug', {
    value: metric.value,
    inp_target: attr.interactionTarget,
    long_task_script: attr.eventEntry?.name,
  });
});

Tiga hari kemudian, data Google Analytics 4 memberi jawaban jelas. 73 persen kejadian INP poor terjadi di interaksi field "Tanggal Konsultasi", dan attribution menunjuk satu file script: livechat-widget.js dari third-party vendor.

Studi Kasus: Lazy-load Script Penyebab

Berdasarkan praktik standar yang kami pakai di proyek client, script third-party yang berat sebaiknya di-load setelah [requestIdleCallback](/glosarium/idle-callback) atau dipicu oleh interaksi. Untuk Felicia, kami lazy-load livechat-widget.js baru saat pengguna scroll lebih dari 60 persen halaman.

21 hari setelah deploy, CrUX update menunjukkan:

Praktik standar di industri menunjukkan bahwa script third-party adalah penyebab terbesar INP poor di situs marketing. Library web-vitals dari Google membuat diagnosa ini bisa dilakukan tanpa tools mahal. Referensi resmi: dokumentasi web-vitals attribution.

Pertanyaan Umum

Apakah perlu RUM tool berbayar untuk monitor INP?

Tidak. web-vitals library plus Google Analytics 4 sudah cukup untuk situs UKM. Tool berbayar seperti Vercel Speed Insights atau SpeedCurve berguna untuk dashboard yang lebih kaya, bukan untuk akurasi data.

Berapa lama sampai CrUX update?

CrUX p75 update setiap hari, tapi butuh minimum 28 hari traffic untuk angka stabil. Untuk validasi cepat, pakai data internal dari web-vitals library yang real-time.

Kenapa Lighthouse tidak mengukur INP?

Lighthouse menjalankan lab test tanpa pengguna nyata, sementara INP butuh interaksi nyata untuk diukur. Lab data Lighthouse hanya mengukur TBT sebagai proxy.

Pelajaran untuk Marketer Indonesia

Skor Lighthouse hijau bukan jaminan pengguna nyata punya pengalaman bagus. Pasang web-vitals library di setiap situs bisnis, kirim attribution ke analytics, dan biarkan data lapangan menentukan prioritas optimasi. Felicia sekarang punya dashboard mingguan yang menunjukkan INP per halaman dan script penyebab top-3, makanya tim marketing dan developer bisa kerja sama tanpa menunggu komplain pengguna.