Digital Transformation
INP Budget
TL;DR: INP Budget adalah ambang batas waktu respons interaksi (klik, tap, ketik) yang ditetapkan tim sebagai pagar performa. Target Google: INP di bawah 200 milidetik untuk 75% sesi pengguna. Budget aman tim engineering: 150 ms supaya ada margin terhadap variasi jaringan dan device kelas menengah Indonesia.
Apa itu INP Budget?
INP Budget adalah angka spesifik yang dipakai tim sebagai pagar untuk metrik INP, salah satu dari tiga Core Web Vitals Google. INP mengukur waktu antara aksi pengguna (klik, tap, ketik) dan paint berikutnya yang merefleksikan respons UI. Berbeda dengan FID lama yang hanya mengukur input pertama, INP melihat input terburuk di sepanjang sesi.
Praktik standar di web.dev: di bawah 200 ms = baik, 200 sampai 500 ms = perlu perbaikan, di atas 500 ms = buruk. Vito Atmo memakai budget internal 150 ms saat menangani proyek Atmo (LMS) dan Vetmo karena pengguna Indonesia sering memakai device mid-range, jaringan tidak selalu stabil, dan ada margin yang harus diserap.
Bagaimana Cara Menetapkannya?
| Tingkat Budget | Nilai | Untuk |
|---|---|---|
| Konservatif | 100 ms | E-commerce, checkout, form transaksi |
| Standar | 150 ms | Landing page bisnis, dashboard SaaS |
| Maksimum aman | 200 ms | Konten editorial, blog, dokumentasi |
Pantau lewat tiga sumber: CrUX Dataset untuk data lapangan, Vercel Speed Insights atau Web Vitals lib di production, dan Chrome DevTools Performance panel saat development. Buat alert otomatis kalau angka p75 lewat budget dua hari berturut.
Kenapa Penting?
INP buruk biasanya berasal dari long task JavaScript: bundle besar, render React mahal, third party script blocking. Untuk bisnis Indonesia yang banyak mengejar konversi, satu klik tombol checkout yang terasa lambat 300 ms saja sudah membuat sesi terputus. Budget yang dijaga ketat membantu menjaga conversion rate dan kesan otoritas teknis pada personal branding developer atau agensi.
Pertanyaan Umum
Apakah INP Budget sama dengan FID?
Tidak. FID hanya melihat input pertama. INP melihat input terburuk di sesi sehingga lebih ketat dan lebih dekat dengan pengalaman nyata pengguna.
Berapa budget yang masuk akal untuk Next.js?
Dari pengalaman Vito Atmo pada proyek Next.js 15 dengan App Router, 150 ms p75 realistis dicapai jika hydration mahal dipisah dengan Server Components dan third party script di-load lazy.
Istilah Terkait