Digital Transformation
Interaction to Next Paint (INP)
TL;DR: Interaction to Next Paint (INP) mengukur jeda antara interaksi pengguna (klik, tap, ketik) sampai layar berikutnya benar-benar di-update. Sejak Maret 2024, INP resmi menggantikan First Input Delay sebagai metrik responsivitas di Core Web Vitals. Target skor baik: di bawah 200 milidetik.
Apa itu Interaction to Next Paint?
Interaction to Next Paint adalah metrik Google yang merekam respons halaman terhadap semua interaksi sepanjang sesi pengguna, bukan hanya yang pertama. INP mengambil interaksi terlambat (atau persentil ke-98 untuk halaman dengan banyak interaksi) dan melaporkannya sebagai skor halaman. Berbeda dari FID (First Input Delay) yang hanya mengukur input pertama, INP memberi gambaran lebih jujur tentang pengalaman pengguna sebenarnya.
Dalam beberapa proyek e-commerce terakhir yang saya audit, INP sering jadi kelemahan tersembunyi: LCP dan CLS bagus, tapi INP merah karena JavaScript yang ngeblok thread saat user memencet tombol "tambah ke keranjang".
Cara Membaca INP
Menurut dokumentasi web.dev tentang INP, batas yang direkomendasikan:
| Status | INP |
|---|---|
| Baik | 0 sampai 200 ms |
| Perlu perbaikan | 200 sampai 500 ms |
| Buruk | di atas 500 ms |
INP terdiri dari tiga fase: input delay (menunggu main thread bebas), processing time (eksekusi event handler), dan presentation delay (rendering frame berikutnya). Penyumbang lambat paling umum adalah event handler yang menjalankan kalkulasi berat secara sinkron.
Kenapa Penting?
INP adalah satu dari tiga Core Web Vitals yang menjadi sinyal ranking Google. Untuk pebisnis Indonesia dengan situs e-commerce, blog, atau landing page interaktif, INP buruk artinya pengguna merasa halaman "berat" walaupun sudah dimuat. Memperbaiki INP biasanya berimpak besar ke conversion rate karena pengguna tidak frustrasi saat berinteraksi.
Pertanyaan Umum
Apa beda INP dengan FID?
FID hanya mengukur input pertama dan hanya jeda awal sebelum event handler jalan. INP mengukur semua interaksi sepanjang sesi sampai layar selesai di-update, jadi lebih komprehensif.
Bagaimana cara cepat memperbaiki INP buruk?
Pecah JavaScript yang berat dengan requestIdleCallback, debounce event handler input, dan hindari operasi sinkron berat di event listener seperti onClick.
Istilah Terkait