Digital Transformation
INP (Interaction to Next Paint)
TL;DR: INP (Interaction to Next Paint) adalah metrik Core Web Vitals yang mengukur seberapa cepat halaman merespons interaksi pengguna. Sejak Maret 2024 INP resmi menggantikan FID sebagai metrik responsiveness. Skor baik versi Google: di bawah 200 ms.
Apa itu INP?
INP mengukur durasi sejak pengguna melakukan interaksi (klik, tap, ketik) sampai browser menggambar frame visual berikutnya sebagai respons. Berbeda dengan FID lama yang hanya mengukur input delay pertama, INP memperhitungkan keseluruhan siklus interaksi: input delay, processing time, dan presentation delay. Halaman dengan banyak JavaScript dynamic import yang tidak diatur sering punya INP tinggi karena main thread sibuk.
Dari pengalaman menangani performa portfolio personal branding, halaman yang pakai widget chat dan analytics tanpa defer biasanya mencatat INP di kisaran 350 sampai 600 ms di mobile mid-range Indonesia.
Cara Kerja INP
| Komponen | Detail |
|---|---|
| Input delay | Waktu sejak event diterima sampai handler mulai jalan |
| Processing time | Durasi event handler dieksekusi di main thread |
| Presentation delay | Waktu sampai browser paint frame baru setelah handler selesai |
| Threshold Google | Baik di bawah 200 ms, perlu perbaikan 200 sampai 500 ms, buruk di atas 500 ms |
| Pengukuran | Diukur via RUM di lapangan, lab via Lighthouse simulasi |
Yang dilaporkan adalah interaksi paling lambat selama sesi (atau persentil ke-98 jika banyak interaksi), bukan rata-rata.
Kenapa Penting?
INP adalah indikator paling akurat untuk feel responsif halaman. Untuk landing page bisnis dan dashboard SaaS, INP tinggi terasa sebagai "klik tapi nothing happens", yang langsung memicu bounce. Studi field data Google menyebutkan halaman dengan INP buruk berkorelasi dengan rage clicks dua sampai tiga kali lipat lebih tinggi.
Sumber rujukan: dokumentasi INP di web.dev.
Pertanyaan Umum
Apa bedanya INP dengan FID lama?
FID hanya mengukur input delay pada interaksi pertama. INP mengukur seluruh siklus interaksi (input delay plus processing plus presentation) dari interaksi paling lambat di sesi, jadi jauh lebih representatif.
Bagaimana cara cepat memperbaiki INP?
Pecah long task di main thread (di atas 50 ms), defer atau lazy-load script pihak ketiga, hindari layout thrashing di event handler, dan pakai requestIdleCallback atau yielding untuk pekerjaan non-kritis.
Istilah Terkait