Digital Transformation
INP Event Handler Budget
TL;DR: INP Event Handler Budget adalah anggaran waktu eksekusi maksimum untuk semua event handler JavaScript dalam satu interaksi. Budget sehat di bawah 100 ms agar INP tetap di bawah 200 ms. Melampaui budget membuat halaman terasa lag dan menurunkan konversi.
Apa itu INP Event Handler Budget?
INP Event Handler Budget adalah konsep performance budgeting yang fokus pada total waktu yang dipakai semua JavaScript event handler (click, keydown, input) selama satu interaksi pengguna. Karena INP mengukur waktu dari input sampai paint berikutnya, semakin gemuk handler-nya, semakin tinggi INP-nya.
Praktik yang saya pakai di proyek client: alokasikan 50 ms untuk handler logic, 30 ms untuk state update, 20 ms untuk rendering. Total 100 ms maksimum supaya masih ada buffer untuk browser melakukan paint.
Breakdown Budget
| Komponen | Budget Ideal | Konsekuensi Overbudget |
|---|---|---|
| Event handler logic | 50 ms | Input lag terasa |
| State update + reconciliation | 30 ms | Frame drop |
| Paint dan composite | 20 ms | Jank visual |
| Total target | 100 ms | INP melebihi 200 ms |
Cara Menjaga Budget
Gunakan scheduler.yield() untuk break long task. Pakai debouncing di input handler. Untuk update besar, pertimbangkan requestIdleCallback atau React 19 useTransition.
Pertanyaan Umum
Apakah berlaku untuk semua interaksi?
Ya, tapi prioritaskan interaksi kritis: klik tombol checkout, ketik di search, tap menu navigasi.
Bagaimana mengukurnya?
Gunakan PerformanceObserver dengan entryType "event" atau library web-vitals dari Google.
Istilah Terkait