Digital Transformation
Optimasi INP (Interaction to Next Paint)
TL;DR: INP (Interaction to Next Paint) adalah metrik Core Web Vitals yang mengukur jeda antara interaksi pengguna (klik, ketuk, ketik) dan respons visual halaman. Skor baik di bawah 200 ms. Mengoptimalkannya berfokus pada mengurangi beban kerja JavaScript di main thread.
Apa itu Optimasi INP?
INP menggantikan FID sebagai metrik responsivitas resmi sejak Maret 2024. Bedanya, INP menilai semua interaksi sepanjang kunjungan, bukan hanya yang pertama. Jadi INP lebih jujur menggambarkan seberapa responsif halaman terasa.
Optimasi INP berarti memastikan setiap interaksi cepat dibalas dengan perubahan visual. Penyebab utama INP buruk hampir selalu sama: skrip berat yang menahan main thread, sehingga browser tidak sempat memproses input pengguna.
Cara Memperbaikinya
| Teknik | Efek |
|---|---|
| Pecah long task JavaScript jadi potongan kecil | Browser bisa menyela untuk merespons input |
| Tunda skrip non-kritis | Main thread lebih lega saat halaman dipakai |
| Hindari layout besar saat interaksi | Mengurangi waktu render setelah klik |
| Gunakan debounce pada event sering | Mengurangi pekerjaan berulang |
Perbaikan INP saling terkait dengan kesehatan Core Web Vitals secara keseluruhan, terutama saat halaman banyak memuat skrip pihak ketiga.
Kenapa Penting?
Halaman yang lambat merespons terasa rusak, meski tampilannya sudah muncul. Untuk situs bisnis Indonesia dengan banyak pengunjung dari perangkat menengah, INP sering jadi pembeda antara halaman yang terasa cepat dan yang terasa berat. Panduan teknisnya tersedia di web.dev.
Pertanyaan Umum
Berapa skor INP yang dianggap baik?
Di bawah 200 ms dianggap baik, 200-500 ms perlu perbaikan, di atas 500 ms buruk. Angka ini diukur dari data lapangan pengguna nyata.
Apa beda INP dan FID?
FID hanya mengukur interaksi pertama, sedangkan INP menilai seluruh interaksi sepanjang kunjungan, sehingga lebih mewakili pengalaman nyata.