Digital Transformation
Next.js Image INP Budget
TL;DR: Next.js Image INP Budget adalah ambang latensi interaksi yang disepakati untuk komponen
<Image>di Next.js, biasanya di bawah 200 ms, supaya event klik, hover, dan scroll pengguna tidak terblok oleh proses decode dan render gambar. Patokan praktis di proyek Vito Atmo: hero image denganpriority, image di bawah fold denganloading="lazy", dansizesyang tepat per breakpoint untuk menghindari oversized decode.
Apa itu Next.js Image INP Budget?
Next.js Image INP Budget adalah kontrak antara marketer dan developer tentang berapa milidetik maksimal komponen Image boleh memengaruhi metrik INP (Interaction to Next Paint). Penyebab utama image membuat INP buruk adalah decode JPEG/PNG besar di main thread saat event klik atau scroll, serta layout reflow yang tertunda. Konsep ini melengkapi Next.js Image LCP Budget yang fokus pada waktu paint awal, dan Next.js Image CLS Budget yang fokus pada stabilitas layout.
Patokan Anggaran INP per Komponen Image
| Skenario | Budget INP | Praktik |
|---|---|---|
| Hero priority | < 150 ms | priority, AVIF/WebP, sizes eksplisit |
| Above-the-fold biasa | < 180 ms | loading="eager", dimensi pasti |
| Below-the-fold | < 200 ms | loading="lazy", placeholder blur |
| Gallery interaktif | < 200 ms | Pre-decode pada hover, batch DOM update |
Kenapa Penting?
Berdasarkan praktik audit Web Vitals yang Vito Atmo terapkan di proyek personal brand 2026, gambar yang tidak diberi budget INP sering jadi penyebab utama skor INP melebihi 200 ms di booking page dan landing page jasa. Untuk konsultan dan toko digital Indonesia, INP buruk berarti pengguna merasa tombol "macet" dan menunda klik konversi. Mengacu praktik Core Web Vitals Google, INP adalah metrik responsiveness resmi sejak Maret 2024.
Pertanyaan Umum
Apakah priority membantu INP?
Tidak langsung. priority membantu LCP karena mempercepat fetch image hero. Untuk INP, yang lebih relevan adalah ukuran file kecil dan dimensi eksplisit supaya decode dan layout tidak berebut main thread dengan handler klik.
Bagaimana cara memantau INP per image?
Pakai Real User Monitoring seperti Vercel Speed Insights atau web-vitals.js. Filter event INP yang terjadi pada element image atau dalam viewport image untuk mengisolasi kontribusi image ke skor keseluruhan.
Istilah Terkait