Digital Transformation
INP Optimization
TL;DR: INP Optimization adalah upaya menurunkan skor Interaction to Next Paint, metrik Core Web Vitals yang mengukur seberapa cepat halaman merespons interaksi seperti klik atau ketukan. Target skor baik adalah di bawah 200 ms. Caranya: pecah tugas JavaScript berat, kurangi kerja di main thread, dan tunda skrip non-kritis.
Apa itu INP Optimization?
INP Optimization adalah serangkaian teknik untuk memperbaiki INP, metrik yang sejak 2024 menggantikan FID sebagai bagian dari Core Web Vitals. INP mengukur jeda antara saat pengguna berinteraksi (klik tombol, mengetik, mengetuk menu) sampai layar memberikan respons visual. Analoginya seperti kasir yang lambat menanggapi: produknya bagus, tapi pelanggan merasa tidak responsif.
Berbeda dari LCP yang soal kecepatan tampil awal, INP soal kelincahan halaman setelah dimuat.
Teknik Utama
| Masalah | Penyebab umum | Perbaikan |
|---|---|---|
| Main thread sibuk | JavaScript bundel besar | Code splitting, lazy load |
| Tugas panjang | Loop berat sinkron | Pecah dengan yielding |
| Skrip pihak ketiga | Tag analitik, chat | Tunda atau muat async |
| Re-render mahal | State tidak efisien | Memoization, virtualisasi |
Prinsipnya: kerjakan lebih sedikit di main thread saat pengguna sedang berinteraksi.
Kenapa Penting?
INP yang buruk membuat website terasa lemot meski tampilannya sudah muncul cepat, dan ini menurunkan kepercayaan pengguna. Dalam praktik yang saya pakai di proyek client, memperbaiki INP biasanya dimulai dari mengaudit skrip pihak ketiga, karena tag yang menumpuk sering jadi penyebab terbesar. Panduan teknis lengkap tersedia di dokumentasi resmi web.dev tentang INP.
Pertanyaan Umum
Berapa skor INP yang dianggap baik?
Di bawah 200 ms dianggap baik, 200 sampai 500 ms perlu perbaikan, di atas 500 ms buruk. Angka ini diukur dari interaksi nyata pengguna lapangan.
Apakah framework modern membantu INP?
Membantu, tapi tidak menjamin. Pendekatan seperti server rendering dan code splitting mengurangi beban main thread, namun skrip pihak ketiga yang berlebihan tetap bisa merusak skor.
Istilah Terkait