Website Bisnis

Cara Marketer Indonesia Pasang Event Timing API di Next.js untuk Debug INP Lapangan di 2026

Admin·26 Mei 2026·0 kali dibaca·3 min baca

TL;DR: Event Timing API memberikan akses ke timing real setiap interaksi pengguna dan menjadi dasar pengukuran INP yang presisi. Pasang via PerformanceObserver di komponen client Next.js, filter entry dengan duration di atas 200 ms, dan kirim ke endpoint analytics. Dalam beberapa proyek terakhir, pola ini memangkas waktu debug INP dari hitungan hari ke jam.

Dalam beberapa proyek terakhir, pola yang berulang adalah ini: skor INP di Lighthouse bagus, 80an ms, tapi CrUX malah merah, 320 ms ke atas. Marketer panik, developer bingung. Bedanya satu, Lighthouse adalah lab data sedangkan CrUX adalah field data dari pengguna nyata. Tanpa instrumentasi, tidak ada cara tahu interaksi mana yang menyebabkan jank.

Solusinya bukan menebak. Solusinya adalah pasang Event Timing API.

Kenapa Lighthouse Tidak Cukup

Lighthouse menjalankan halaman di environment terkontrol dengan single throttled connection. Pengguna asli Indonesia mengakses dari 4G yang fluktuatif, device entry-level, browser dengan banyak tab terbuka, dan ekstensi yang berjalan. Skor lab bisa hijau sekaligus skor lapangan merah, dan keduanya valid.

Event Timing API menutup gap ini. Setiap kali pengguna klik, ketik, atau tap, browser mencatat timing-nya dan melaporkan via PerformanceObserver. Skor INP yang dilihat di CrUX bersumber dari API yang sama.

Setup di Next.js App Router

Buat komponen client components/PerformanceMonitor.tsx:

tsx

'use client';

import { useEffect } from 'react';

export function PerformanceMonitor() {
  useEffect(() => {
    if (!('PerformanceObserver' in window)) return;

    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        const e = entry as PerformanceEventTiming;
        if (e.duration > 200) {
          navigator.sendBeacon('/api/perf', JSON.stringify({
            name: e.name,
            duration: e.duration,
            processingStart: e.processingStart,
            url: location.pathname
          }));
        }
      }
    });

    observer.observe({ type: 'event', buffered: true });
    observer.observe({ type: 'first-input', buffered: true });

    return () => observer.disconnect();
  }, []);

  return null;
}

Mount di app/layout.tsx di bawah <body>. Endpoint /api/perf cukup append ke tabel Supabase atau push ke Vercel Analytics custom event.

Framework Diagnosis

Setelah data masuk 24 jam, query interaksi terburuk per URL:

Metrik	Threshold	Tindak Lanjut
duration 200-500 ms	Worth investigating	Cek handler, debounce input
duration 500-1000 ms	Wajib diperbaiki	Pindahkan ke worker pakai Scheduler API
duration > 1000 ms	Critical	Audit semua tag, pertimbangkan Partytown

Gabungkan dengan Long Task API untuk identifikasi script penyebab.

Studi Kasus Nyata

Saat membangun ulang stack analytics untuk Nalesha, halaman product detail menunjukkan INP CrUX 420 ms padahal Lighthouse menyebut 90 ms. Setelah pasang Event Timing API selama tujuh hari, ditemukan tiga interaksi paling sering yang lambat: klik variant warna 380 ms, klik tombol cart 460 ms, dan klik filter ukuran 510 ms. Penyebabnya adalah handler React yang melakukan setState berulang. Setelah dibungkus startTransition, skor turun ke 140 ms di pengguna nyata dalam tiga minggu.

Pertanyaan Umum

Apakah Event Timing API mempengaruhi performa halaman?

Tidak signifikan. Observer hanya menerima notifikasi saat interaksi memenuhi threshold default 104 ms, dan handler observer dijalankan async setelah paint selesai.

Berapa lama sampai dapat insight cukup?

Tergantung volume traffic. Untuk site dengan 1000 sesi per hari, biasanya cukup 3-5 hari data sudah memunculkan pola jelas.

Apakah cukup pakai web-vitals.js saja?

web-vitals.js memberikan skor agregat per metrik, tapi tidak memberikan detail per interaksi. Untuk debug spesifik, Event Timing API mentah lebih informatif.

Penutup

Skor INP yang jelek di lapangan adalah masalah marketer maupun developer. Marketer kehilangan konversi, developer kehilangan reputasi performa. Event Timing API menjadi jembatan supaya kedua pihak melihat data yang sama dari pengguna yang sama. Pasang sekali, lihat sebulan, perbaiki di tempat yang benar.

Sumber: Event Timing API spec di web.dev, PerformanceObserver di MDN.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang