Digital Transformation
Event Timing API
TL;DR: Event Timing API adalah Web API browser yang melaporkan timing detail setiap interaksi pengguna, termasuk waktu dari input pertama sampai paint berikutnya. API ini menjadi dasar pengukuran metrik INP (Interaction to Next Paint) dan membantu marketer plus developer melihat interaksi mana yang lambat di pengguna nyata, bukan di lab.
Apa itu Event Timing API?
Event Timing API memungkinkan browser melaporkan waktu setiap event interaksi seperti klik, keypress, dan pointerdown. Setiap entry berisi properti processingStart, processingEnd, startTime, dan duration, yang ketika dijumlahkan menghasilkan skor INP sebenarnya. Tanpa API ini, marketer hanya bisa menebak dari Lighthouse, padahal Lighthouse adalah lab data, bukan field data.
API ini diakses lewat PerformanceObserver dengan entry type event atau first-input. Browser akan memanggil observer setiap kali interaksi memenuhi threshold durasi default 104 ms.
Cara Kerja Event Timing API
| Property | Arti |
|---|---|
name | Nama event (click, keydown, pointerup) |
startTime | Waktu input pertama terjadi |
processingStart | Waktu handler mulai eksekusi |
processingEnd | Waktu handler selesai |
duration | Total waktu sampai paint berikutnya |
interactionId | ID unik per interaksi pengguna |
INP dihitung dari duration interaksi terburuk yang dialami pengguna pada sebuah halaman. Praktik standar di industri menargetkan INP di bawah 200 ms sebagai skor baik.
Kenapa Penting?
Marketer Indonesia yang menjalankan landing page dengan banyak tag (GTM, Meta Pixel, TikTok Pixel) sering melihat skor INP bagus di Lighthouse tapi jelek di CrUX. Event Timing API menutup gap ini dengan menunjukkan persis interaksi mana, di halaman mana, yang menyebabkan jank. Berdasarkan praktik yang Vito Atmo pakai di proyek client e-commerce, debugging dengan Event Timing API memangkas waktu identifikasi root cause dari 2-3 hari ke beberapa jam.
Pertanyaan Umum
Apa bedanya Event Timing API dengan Long Task API?
Event Timing API fokus pada timing interaksi pengguna (klik, ketik), sedangkan Long Task API fokus pada task JavaScript yang berjalan lebih dari 50 ms di main thread tanpa peduli ada interaksi atau tidak.
Bagaimana cara memasang Event Timing API di Next.js?
Gunakan PerformanceObserver di komponen client dengan entryTypes: ['event', 'first-input'], lalu kirim entry yang duration lebih dari 200 ms ke endpoint analytics Anda untuk dianalisis.
Istilah Terkait