Interaction to Next Paint atau INP adalah Core Web Vital yang menilai responsivitas halaman terhadap interaksi pengguna. Ia melihat seberapa lama pengguna harus menunggu sejak melakukan interaksi—seperti klik, tap, atau input keyboard—hingga browser dapat menampilkan pembaruan visual berikutnya.
Untuk kategori baik, target INP adalah 200 milidetik atau kurang pada persentil ke-75 kunjungan. INP menggantikan First Input Delay sebagai Core Web Vital karena ia melihat responsivitas interaksi secara lebih luas, bukan hanya interaksi pertama.
Mengapa halaman bisa terasa lambat meski sudah selesai dimuat?
Website dapat memiliki LCP yang cepat tetapi tetap terasa berat saat tombol diklik. Penyebabnya sering berada pada main thread yang sibuk menjalankan JavaScript, melakukan layout, memproses event handler, atau mengubah DOM dalam jumlah besar. INP membantu menangkap masalah seperti ini.
Tiga bagian delay interaksi
Secara konseptual, waktu sebuah interaksi dapat dipengaruhi oleh input delay sebelum handler mulai berjalan, processing time ketika event callback dieksekusi, dan presentation delay sampai browser dapat melakukan paint. Diagnosis yang baik perlu mencari bagian mana yang paling dominan.
Penyebab INP buruk
Long tasks pada main thread
JavaScript yang berjalan terlalu lama dapat membuat browser tidak segera memproses input pengguna. Pecah pekerjaan berat menjadi unit lebih kecil dan beri kesempatan browser menangani interaksi penting.
Event handler terlalu kompleks
Satu klik sederhana tidak seharusnya memicu banyak pekerjaan sinkron yang tidak diperlukan. Audit callback, validasi, manipulasi DOM, dan library yang aktif pada interaksi.
DOM terlalu besar atau perubahan layout mahal
Memodifikasi banyak node sekaligus dapat menambah style recalculation dan layout. Kurangi DOM yang tidak perlu dan hindari pola read/write layout yang berulang.
Third-party script
Analytics, chat widget, ads, tag manager, atau script lain dapat menyita main thread. Evaluasi manfaatnya dan waktu eksekusinya.
Cara mendiagnosis INP
Mulailah dari field data untuk memastikan masalah terjadi pada pengguna nyata. Setelah itu gunakan DevTools Performance, Lighthouse, atau Core Web Vitals IDZ SEO untuk mencari pola interaksi, long task, dan pekerjaan main thread yang dapat direproduksi.
Prioritas perbaikan INP
- Temukan interaksi yang paling bermasalah.
- Kurangi pekerjaan yang terjadi sebelum event diproses.
- Persingkat event handler.
- Pecah long task dan yield ke main thread.
- Kurangi manipulasi DOM yang tidak perlu.
- Tunda pekerjaan non-kritis setelah respons visual penting selesai.
- Audit third-party JavaScript.
Jangan hanya mengurangi ukuran bundle
Bundle yang lebih kecil memang membantu loading, tetapi INP berfokus pada respons interaksi. Script kecil yang menjalankan pekerjaan berat saat klik tetap dapat menyebabkan INP buruk. Perhatikan runtime behavior, bukan hanya kilobyte.
INP dan mobile
Perangkat mobile dengan CPU lebih lambat sering lebih sensitif terhadap long task. Ini salah satu alasan hasil performa mobile dapat lebih buruk. Baca perbedaan PageSpeed mobile dan desktop untuk memahami konteks pengujian.
Hubungan INP dengan LCP
LCP menilai kapan konten utama terlihat, sedangkan INP menilai bagaimana halaman merespons setelah pengguna berinteraksi. Website membutuhkan keduanya. Lihat panduan LCP dan panduan Core Web Vitals untuk melihat gambaran lengkap.
Kesimpulan
INP membantu menemukan website yang terlihat selesai dimuat tetapi masih terasa lambat saat digunakan. Fokus optimasi harus berada pada main thread, event handler, DOM, dan pekerjaan JavaScript yang terjadi pada saat pengguna berinteraksi. Ukur pada pengguna nyata, reproduksi di lab, lalu perbaiki pekerjaan yang benar-benar menghambat respons.
INP Mengukur Responsivitas Sepanjang Kunjungan
Interaction to Next Paint menilai seberapa cepat halaman memberi umpan balik visual setelah interaksi pengguna seperti klik, tap, atau input keyboard. Target kategori baik adalah INP hingga 200 milidetik pada persentil ke-75. Karena metrik ini berkaitan dengan interaksi nyata, halaman yang tampak cepat saat loading tetap dapat memiliki INP buruk jika JavaScript memblokir main thread ketika pengguna berinteraksi.
Mulailah dengan data lapangan untuk mengetahui halaman atau kelompok URL yang bermasalah. Setelah itu gunakan performance profiling untuk menemukan long task, event handler berat, rendering berulang, atau library pihak ketiga yang bekerja pada saat interaksi.
Kurangi Pekerjaan Main Thread pada Saat Kritis
Pecah tugas panjang agar browser memiliki kesempatan merender. Tunda pekerjaan yang tidak perlu terjadi segera setelah input. Hindari melakukan banyak kalkulasi, DOM mutation, dan layout sinkron dalam satu handler. Untuk komponen kompleks, ukur interaksi yang benar-benar lambat daripada menghapus seluruh JavaScript secara membabi buta.
Third-party script juga dapat berpengaruh, tetapi evaluasi fungsinya sebelum memblokir atau menghapus. Tujuannya adalah responsivitas yang lebih baik tanpa merusak fitur yang dibutuhkan pengguna.
Uji Interaksi yang Benar-benar Dilakukan Pengguna
Test menu, form, filter, modal, tombol, dan navigasi yang paling sering digunakan. Jalankan Core Web Vitals Checker untuk melihat metrik, lalu gunakan alat developer untuk diagnosis. Setelah deploy, tunggu data lapangan baru sebelum menyimpulkan bahwa masalah telah selesai.
Jangan Mengandalkan Satu Interaksi Lab
INP lapangan mencerminkan banyak interaksi sepanjang kunjungan, sehingga satu klik yang cepat di Lighthouse tidak membuktikan pengalaman pengguna sudah baik. Periksa komponen yang sering dipakai dan variasi perangkat nyata. Jika masalah hanya muncul pada perangkat kelas bawah, optimasi yang menurunkan beban JavaScript dan pekerjaan layout biasanya lebih bernilai daripada perubahan kosmetik kecil.
Periksa pula apakah handler menjalankan pekerjaan jaringan atau parsing besar sebelum memberi feedback visual. Bila proses memang harus berlangsung, tampilkan respons antarmuka lebih cepat lalu kerjakan tugas berat secara bertahap. Pengguna membutuhkan tanda bahwa interaksinya diterima, bukan halaman yang terasa membeku.
