INP (Interaction to Next Paint) adalah metrik Google Core Web Vitals yang mengukur seberapa cepat dan responsif sebuah halaman web dalam memberikan umpan balik visual (visual feedback) setelah pengguna melakukan interaksi, seperti mengklik tombol, mengetuk menu, atau mengetik pada formulir.
INP secara resmi menggantikan metrik terdahulu FID (First Input Delay) pada Maret 2024. Jika FID hanya mengukur penundaan input pertama, INP mengukur keseluruhan durasi responsivitas interaksi sepanjang sesi kunjungan pengguna di halaman tersebut.
Standar Skor INP Google
Google menetapkan ambang batas skor INP sebagai berikut:
- Sangat Baik (Good): Di bawah atau sama dengan 200 milidetik (ms).
- Perlu Perbaikan (Needs Improvement): Antara 200 ms - 500 ms.
- Buruk (Poor): Di atas 500 ms.
3 Fase Utama dalam Pengukuran INP
Ketika pengguna mengklik elemen di website Anda, INP menghitung total durasi 3 fase berikut:
- Input Delay: Waktu tunggu saat perintah klik mengantre di main-thread JavaScript yang sedang sibuk memproses tugas lain.
- Processing Time: Waktu yang dibutuhkan oleh kode JavaScript event listener untuk mengeksekusi instruksi program.
- Presentation Delay: Waktu yang dibutuhkan browser untuk memposting frame hasil pembaruan visual berikutnya ke layar (Next Paint).
Mengapa INP Penting Bagi Aplikasi Web & E-Commerce?
- Umpan Balik Instan: Pengguna yang mengklik tombol “Beli” atau tombol menu WhatsApp membutuhkan konfirmasi visual instan (seperti efek animasi atau loading spinner).
- Menghindari Aplikasi Macet (Freezing): JavaScript berat yang mengunci main-thread akan membuat layar tampak seperti hang/macet saat disentuh.
- Mendukung WhatsApp Agentic AI & AI Chatbot: Obrolan interaktif dan formulir cepat memerlukan respons interaksi yang mulus tanpa tundaan.
Strategi Super Kilat Mengoptimasi INP
- Memecah Tugas Panjang (Break Up Long Tasks): Membagi eksekusi JavaScript berat menjadi tugas-tugas kecil yang berjalan secara asinkron (scheduler.yield).
- Minimalisir Beban JavaScript: Menghindari framework raksasa yang tidak perlu dan mengandalkan arsitektur modern seperti SSG (Static Site Generator).
- Optimasi CSS Rendering dengan Tailwind CSS: Mengurangi kompleksitas pemrosesan gaya CSS saat elemen berubah status (
:hover,:active). - Penggunaan Jaringan CDN: Memastikan aset script pendukung terdistribusi cepat tanpa hambatan jaringan.
Rangkuman
INP (Interaction to Next Paint) adalah tolok ukur utama kelancaran responsivitas antarmuka web Anda. Dengan skor INP di bawah 200ms dari Super Kilat, setiap sentuhan dan klik pengunjung akan terasa instan dan memuaskan.