Cara Pasang INP Budget di Website Bisnis Next.js 2026: Kerangka 5 Langkah supaya Respons Interaksi Tetap di Bawah 200 ms

TL;DR: INP Budget adalah ambang batas Interaction to Next Paint yang dipakai tim engineering sebagai pagar performa. Target Google: di bawah 200 ms di p75. Budget aman tim Vito Atmo di proyek Next.js Indonesia: 150 ms. Tulisan ini merangkum 5 langkah praktis menetapkan, memantau, dan menjaga INP Budget supaya tombol checkout, form, dan menu navigasi tetap responsif di device kelas menengah.

Saat membangun ulang dashboard internal Atmo (LMS) dan ulasan halaman Vetmo, pola yang muncul jelas: INP buruk paling sering ditemukan di fitur dengan banyak third party script (analytics, chat, ad pixel). Konversi turun bukan karena halaman lambat dibuka, melainkan karena klik terasa lambat direspons. Sayangnya, banyak tim baru sadar setelah Search Console mencatat penurunan Core Web Vitals selama dua minggu.

Pendekatan yang Vito Atmo pakai sekarang adalah menetapkan INP Budget di tingkat tim, bukan menunggu data lapangan terlanjur memburuk.

Kenapa INP Lebih Ketat dari FID

INP menggantikan FID per Maret 2024 sebagai salah satu Core Web Vitals Google. Bedanya signifikan: FID hanya mengukur input pertama, INP mengukur input terburuk di seluruh sesi. Akibatnya, halaman dengan satu interaksi mahal di tengah sesi (misalnya open modal yang re-render tabel besar) akan kena, padahal FID-nya hijau.

Standar resmi web.dev/inp: baik di bawah 200 ms, perlu perbaikan 200 sampai 500 ms, buruk di atas 500 ms.

Kerangka 5 Langkah INP Budget

Langkah perbaikan paling sering ditemukan: third party script blocking main thread, hydration React mahal pada halaman dengan banyak komponen client, dan handler event yang memicu re-render seluruh tree.

Studi Kasus: Dashboard Vetmo

Saat memantau Vetmo, INP p75 sempat menyentuh 380 ms di halaman daftar layanan pet care. Penyebabnya bukan Next.js, melainkan widget chat yang inject script besar saat halaman idle. Setelah memindahkan chat ke lazy load via Intersection Observer dan memecah komponen tabel ke beberapa Server Components, INP turun ke 140 ms dalam 9 hari. Konversi formulir naik dari 4,2% ke 5,1% di periode yang sama.

Pola serupa biasanya bisa diterapkan ke landing page bisnis Indonesia yang berat dengan pixel iklan. Praktik baseline ini bisa digabung dengan pemasangan Core Web Vitals Budget supaya tim engineering punya satu dokumen pagar.

Pertanyaan Umum

Apakah INP Budget berlaku per halaman atau per situs?

Per halaman lebih akurat karena profil interaksi berbeda. Checkout butuh lebih ketat dari halaman editorial.

Apakah Next.js otomatis memberi INP bagus?

Tidak otomatis. Next.js App Router membantu lewat Server Components dan streaming, tapi third party script dan handler client tetap bisa mengangkat INP.

Berapa lama efek perbaikan terlihat di CrUX?

CrUX Dataset memakai window 28 hari. Perubahan biasanya mulai terlihat 14 hari setelah deploy.

Apa beda budget tim dan target Google?

Target Google adalah ambang publik (200 ms). Budget tim lebih konservatif (150 ms) supaya ada margin terhadap variasi device dan jaringan Indonesia.

Langkah Lanjutan

Tulis dokumen budget tim minggu ini, pasang web-vitals di production, dan jalankan audit interaksi terburuk per halaman bisnis kritis. Untuk konteks metrik tetangga, baca juga panduan Core Web Vitals Budget supaya keputusan engineering tidak hanya fokus ke INP.