Digital Transformation
INP Debouncing (Teknik Penundaan Eksekusi untuk Optimasi INP)
INP Debouncing adalah teknik menunda eksekusi handler intensif (typing, scroll, resize) agar event interaktif berikutnya tidak terblokir, menurunkan skor Interaction to Next Paint.
TL;DR: INP Debouncing menunda eksekusi handler yang berjalan terlalu sering (input typing, scroll, resize) sehingga main thread tidak macet saat pengguna berinteraksi. Hasilnya skor INP turun, halaman terasa lebih responsif. Teknik ini sering dikombinasikan dengan useTransition di React 18+ untuk efek maksimal.
Apa itu INP Debouncing?
INP Debouncing adalah penerapan pola debounce klasik secara terarah pada event handler yang berkontribusi besar ke skor INP. Berbeda dengan debouncing umum yang fokus mengurangi panggilan API, INP debouncing menjaga main thread tetap bebas saat pengguna mengklik, mengetik, atau menggulirkan. Untuk konteks pengukuran lihat web vitals attribution dan interaction readiness.
Pola Implementasi
| Kasus | Pola Debouncing |
|---|---|
| Search input | Tunda fetch 150-300 ms setelah ketikan terakhir |
| Resize listener | Throttle ke 100 ms, hindari recalculate layout berulang |
| Scroll handler | Pakai requestAnimationFrame + IntersectionObserver |
| Validasi form | Debounce 250 ms per field, tampilkan error di blur |
Di React 18+, kombinasikan dengan useTransition agar state update non-urgent tidak menahan input prioritas tinggi. Untuk Next.js, gunakan useDeferredValue di komponen list panjang.
Kenapa Penting?
Per Maret 2024, INP menggantikan FID sebagai Core Web Vitals yang resmi. Praktik standar di industri menunjukkan handler debounced bisa menurunkan INP 20-50% pada halaman dengan banyak input. Untuk situs e-commerce Indonesia dengan filter dan search aktif, ini sering jadi quick win sebelum optimasi bundle.
Pertanyaan Umum
Apa beda debounce dan throttle untuk INP?
Debounce menunggu jeda sebelum eksekusi terakhir, cocok untuk input final. Throttle membatasi frekuensi eksekusi, cocok untuk scroll dan resize yang butuh update berkala.
Apakah selalu pakai debounce 300 ms?
Tidak. Untuk search instant pakai 150-200 ms. Untuk validasi form 250-350 ms. Untuk autosave 1-2 detik. Sesuaikan dengan ekspektasi pengguna.
Istilah Terkait