Digital Transformation
INP (Interaction to Next Paint)
TL;DR: INP (Interaction to Next Paint) mengukur seberapa cepat halaman merespons interaksi pengguna, dari klik atau ketik sampai perubahan visual berikutnya muncul di layar. Sejak Maret 2024, INP menggantikan First Input Delay (FID) sebagai metrik resmi Core Web Vitals. Skor baik ada di bawah 200 milidetik.
Apa itu INP?
INP mengukur latensi seluruh siklus interaksi, mulai dari saat pengguna mengklik tombol atau mengetik di form, sampai browser selesai merender perubahan visual sebagai respons. Berbeda dari FID yang cuma mengukur delay sebelum event handler mulai berjalan, INP mencakup keseluruhan proses termasuk waktu rendering, sehingga lebih akurat mencerminkan pengalaman nyata pengguna.
INP menjadi bagian resmi Core Web Vitals menggantikan FID pada Maret 2024, melengkapi LCP dan CLS.
Skor dan Ambang Batas
| Skor | Rentang |
|---|---|
| Baik | di bawah 200 md |
| Perlu perbaikan | 200-500 md |
| Buruk | di atas 500 md |
Penyebab INP Buruk
- JavaScript bundle besar yang memblokir main thread
- Event handler yang menjalankan komputasi berat secara sinkron
- Terlalu banyak elemen DOM yang perlu re-render
- Third-party script seperti live chat dan tracking pixel yang menumpuk beban
Dalam beberapa audit performa website klien, penyebab INP buruk paling sering justru bukan kode inti aplikasi, tapi tumpukan script pihak ketiga yang dipasang tanpa lazy load.
Kenapa Penting?
Halaman dengan INP buruk terasa lag saat diklik, terutama form checkout atau navigasi mobile, yang berisiko langsung menurunkan conversion rate. Karena INP jadi bagian Core Web Vitals, metrik ini juga berperan sebagai sinyal ranking di pencarian Google.
Pertanyaan Umum
Apakah INP sama dengan FID?
Tidak. FID hanya mengukur delay sebelum event handler mulai, sementara INP mengukur seluruh siklus sampai perubahan visual selesai dirender, sehingga cakupannya lebih luas.
Interaksi apa saja yang dihitung INP?
Klik, tap layar sentuh, dan penekanan tombol keyboard. Scroll dan hover tidak dihitung dalam pengukuran INP.
Bagaimana cara memperbaiki INP yang buruk?
Pecah tugas JavaScript besar menjadi bagian lebih kecil, tunda eksekusi script non-esensial, dan kurangi kompleksitas DOM pada halaman dengan banyak interaksi.
Istilah Terkait