Digital Transformation
Interaction to Next Paint (INP)
INP adalah metrik Core Web Vitals Google yang mengukur responsivitas halaman terhadap interaksi pengguna, dengan skor baik di bawah 200 ms.
TL;DR: Interaction to Next Paint (INP) adalah metrik Core Web Vitals yang menggantikan First Input Delay sejak Maret 2024. INP mengukur jeda antara interaksi pengguna (klik, ketukan, atau penekanan tombol) hingga layar memperbarui visualnya. Skor baik berada di bawah 200 ms, perlu perbaikan 200 hingga 500 ms, dan buruk di atas 500 ms.
Apa itu Interaction to Next Paint?
Interaction to Next Paint mengukur seberapa cepat sebuah halaman web merespons input pengguna secara nyata. Berbeda dari pendahulunya First Input Delay (FID) yang hanya mengukur input pertama, INP mengambil interaksi paling lambat sepanjang sesi (mengabaikan satu outlier per 50 interaksi).
Google resmi mengganti FID dengan INP sebagai bagian Core Web Vitals pada Maret 2024. Alasannya, FID terlalu mudah lulus karena hanya mengukur delay awal, padahal interaksi berat sering datang setelah pengguna scroll dan engage dengan widget interaktif.
Cara Kerja Pengukuran
INP dihitung dari tiga fase: input delay (waktu antara input dan eksekusi handler), processing time (durasi event handler), dan presentation delay (waktu hingga frame berikutnya tampil). Total ketiganya dilaporkan dalam milidetik.
| Penyebab INP Buruk | Solusi Praktis |
|---|---|
| JavaScript long task di main thread | Pecah dengan scheduler.yield atau setTimeout |
| Event handler yang sinkron memanggil API berat | Pindahkan ke Web Worker atau debounce |
| Re-render React/Vue yang tidak perlu | Pakai useMemo, React.memo, atau virtualization |
| Third-party script (chat widget, analytics) | Defer atau load on interaction |
Kenapa Penting?
Untuk website e-commerce dan SaaS Indonesia, INP berdampak langsung pada konversi. Riset internal Google menunjukkan halaman dengan INP buruk memiliki bounce rate 24 persen lebih tinggi dibanding yang baik. Pengukuran via Real User Monitoring (RUM) wajib dilakukan karena INP sangat dipengaruhi device dan koneksi pengguna nyata, bukan lab test.
Pertanyaan Umum
Apa bedanya INP dengan FID yang lama?
FID hanya mengukur input pertama dan input delay saja. INP mengukur seluruh siklus interaksi (delay + processing + presentation) dan mengambil interaksi terburuk sepanjang sesi.
Bagaimana cara mengukur INP di production?
Gunakan library web-vitals.js dari Google atau RUM provider seperti SpeedCurve, Sentry, atau Vercel Speed Insights yang menangkap data dari pengguna nyata.