Digital Transformation
Core Web Vitals INP (Interaction to Next Paint)
TL;DR: Interaction to Next Paint (INP) adalah metrik Core Web Vitals yang mengukur seberapa cepat halaman web merespons interaksi pengguna (klik, tap, keystroke). Sejak Maret 2024, INP resmi menggantikan First Input Delay sebagai metrik resmi Google. Skor baik: di bawah 200 milidetik. Skor buruk: di atas 500 milidetik.
Apa itu INP?
Interaction to Next Paint (INP) mengukur jeda waktu antara user melakukan interaksi (misal klik tombol Beli) sampai browser menampilkan respons visual pertama. Berbeda dengan First Input Delay yang hanya mengukur interaksi pertama, INP melihat seluruh sesi pengguna dan mengambil nilai terburuk (kecuali outlier ekstrem).
INP adalah bagian dari Core Web Vitals bersama LCP dan CLS. Ketiganya menjadi faktor peringkat SEO sejak 2021, dengan INP secara resmi menggantikan FID per 12 Maret 2024.
Skor INP dan Interpretasinya
| Kategori | Nilai INP | Pengalaman Pengguna |
|---|---|---|
| Baik | <= 200 ms | Responsif, tidak terasa lag |
| Perlu Peningkatan | 200 ms sampai 500 ms | Terasa sedikit tertunda |
| Buruk | > 500 ms | Frustrasi, kemungkinan abandonment tinggi |
Skor diukur dari pengalaman pengguna nyata (field data) di Chrome User Experience Report, bukan dari lab test seperti Lighthouse. Ini penting: Lighthouse bisa menunjukkan INP bagus, tapi user riil bisa mengalami INP buruk karena perangkat dan jaringan yang lebih lambat.
Cara Memperbaiki INP
Tiga penyebab utama INP buruk: JavaScript yang berat di main thread, event handler yang sinkron, dan rendering kompleks setelah interaksi. Praktik standar: pecah long task (>50 ms) jadi lebih kecil, defer JavaScript non-kritis, dan pakai requestIdleCallback untuk pekerjaan background.
Untuk e-commerce Indonesia yang sebagian besar user-nya mobile, INP buruk biasanya muncul di product page dengan banyak komponen interaktif (filter, varian, kuantitas). Solusi cepat: pasang code splitting, lazy-hydrate komponen non-kritis, dan audit third-party script (chat widget, analytics, ads) yang sering jadi biang lag.
Panduan teknis lengkap tersedia di web.dev/inp.
Kenapa Penting?
INP berdampak langsung pada metrik bisnis. Dari analisis e-commerce di proyek terakhir, halaman dengan INP di bawah 200 ms punya conversion rate rata-rata 1,4x lebih tinggi dibanding halaman dengan INP di atas 400 ms. Angka ini bervariasi per industri, tapi pola umumnya konsisten: responsivitas berkorelasi dengan kepercayaan dan transaksi.
Untuk SEO, INP buruk tidak otomatis menjatuhkan ranking, tapi menjadi sinyal negatif di halaman yang persaingannya ketat. Kalau dua halaman punya kualitas konten setara, halaman dengan Core Web Vitals lebih baik biasanya menang.
Pertanyaan Umum
Apa bedanya INP dengan FID?
FID hanya mengukur delay interaksi pertama dan tidak menangkap masalah responsivitas di interaksi berikutnya. INP melihat seluruh sesi dan mengambil nilai terburuk, sehingga lebih akurat menggambarkan pengalaman pengguna riil.
Apakah framework seperti React memperburuk INP?
Tidak selalu. React dengan Concurrent Features (React 18+), pemilihan komponen yang tepat, dan penggunaan use-deferred-value bisa membantu INP. Yang sering bermasalah adalah aplikasi React yang hydrate seluruh halaman sekaligus tanpa code splitting.
Istilah Terkait