Cara Optimasi INP Website Bisnis Indonesia 2026

TL;DR: Interaction to Next Paint (INP) adalah metrik Core Web Vitals yang mengukur seberapa cepat halaman merespons interaksi pengguna. Target baik: di bawah 200 milidetik. Untuk website bisnis Indonesia, akar masalah INP yang lambat hampir selalu adalah JavaScript pihak ketiga, handler yang berat, atau hydration React yang tidak diatur per komponen.

Pada beberapa proyek terakhir, saya melihat pola yang konsisten. Website bisnis dengan skor LCP di bawah 2,5 detik masih kehilangan konversi karena INP-nya merah. Tombol "Pesan Sekarang" terasa baru bereaksi setelah satu detik. Untuk pengunjung yang sudah niat membeli, satu detik terasa seperti website rusak.

INP menggantikan First Input Delay sejak Maret 2024 sebagai metrik responsivitas resmi di Core Web Vitals. Perbedaannya kritis: INP mengukur seluruh perjalanan interaksi sampai cat berikutnya, bukan hanya delay awal. Ini membuat banyak website yang sebelumnya hijau di FID kini kuning atau merah di INP.

Anatomi Interaksi yang Diukur INP

INP merekam waktu dari klik, tap, atau ketukan keyboard sampai browser melukis hasil di layar. Tiga tahap di dalamnya:

Skor baik di bawah 200 ms. Perlu perbaikan di 200-500 ms. Buruk di atas 500 ms. Skor diambil dari interaksi paling lambat dalam satu sesi, sehingga satu klik berat bisa menjatuhkan skor halaman secara keseluruhan.

Tiga Penyebab Utama INP Tinggi di Website Bisnis Indonesia

Berdasarkan praktik audit yang saya pakai pada proyek client di kategori jasa profesional dan e-commerce kecil, tiga sumber utama yang muncul berulang adalah:

1. Skrip pihak ketiga yang memblokir thread utama. Pixel iklan, chat widget, dan tag analytics sering dimuat di awal dengan eager mode. Ketika user mencoba klik tombol di hero, thread masih sibuk memproses skrip yang sama sekali tidak relevan dengan interaksi tersebut.
2. Handler React yang terlalu sinkron. State update besar di dalam onClick yang memicu re-render banyak komponen membuat processing time meledak. Pola ini umum di halaman katalog produk dengan filter sidebar.
3. Hydration berat di halaman dengan banyak komponen interaktif. Saat halaman pertama kali dibuka di mobile mid-tier, hydration bisa berjalan tujuh sampai sembilan detik. Klik apa pun di jendela tersebut akan dihitung sebagai INP yang sangat lambat.

Pola Perbaikan yang Berdampak Cepat

Saat membangun ulang katalog Nalesha untuk performa mobile, fokus perbaikan dipisah per komponen, bukan per halaman. Strategi yang konsisten memberi hasil:

• Defer skrip non-kritis. Pixel iklan dan chat widget dimuat setelah load event atau saat user mendekati elemen pemicu pertama. Lihat panduan resmi di web.dev tentang INP.
• Pisah event handler dengan useTransition. State update yang bisa ditunda dibungkus dalam startTransition supaya browser sempat melukis respons cepat sebelum melanjutkan rerender besar.
• Lazy hydration via React Server Components. Komponen statis tetap di server, hanya pulau interaktif yang ikut hydration. Ini menurunkan total processing time pada hidasi awal.
• Hindari layout shift di handler. Jika klik tombol memicu perubahan ukuran komponen lain, gabungkan dengan CLS budget supaya tidak menambah masalah baru.

Tracking dampak perbaikan sebaiknya menggunakan field data, bukan hanya Lighthouse. Lighthouse memberi sinyal lab yang berguna untuk debugging, tetapi keputusan rilis dipandu oleh CrUX atau RUM internal. Untuk konteks attribution metrik ke konversi, lihat artikel Web Vitals Attribution.

Studi Kasus Singkat: Penurunan INP di Vetmo

Saat membangun Vetmo sebagai platform pet care, halaman daftar dokter hewan awalnya punya INP di kisaran 480 ms di mobile mid-tier. Setelah migrasi filter ke React Server Components dan defer pixel marketing, INP turun ke kisaran 160-190 ms dalam dua sprint. Bounce rate halaman ini turun antara 8-14% di rentang dua minggu pasca rilis, dengan catatan rentang ini bergantung pada profil trafik organik versus berbayar.

Pertanyaan Umum

Apakah INP menggantikan FID secara total?

Ya. Sejak Maret 2024 FID dipensiun dan INP menjadi metrik responsivitas resmi di Core Web Vitals.

Bagaimana cara mengukur INP di lapangan tanpa berbayar?

Gunakan Chrome User Experience Report (CrUX) yang sudah terintegrasi di Google Search Console di laporan Page Experience.

Apakah perbaikan INP berdampak ke ranking SEO?

INP adalah faktor user experience di sistem ranking Google. Dampaknya tidak instan dan bukan satu-satunya, tetapi jadi sinyal yang konsisten sejak 2024.

Berapa lama biasanya target INP tercapai setelah refactor?

Untuk website bisnis kecil, dua sampai empat minggu biasanya cukup. Untuk aplikasi React besar, perbaikan bertahap selama dua sampai tiga bulan adalah rentang yang realistis.

Mulai dari Mana Hari Ini

Buka Google Search Console, masuk ke laporan Page Experience, dan lihat halaman mana yang menyumbang INP buruk terbanyak. Dari sana, profilkan satu interaksi paling lambat di Chrome DevTools Performance tab. Pilih satu perbaikan paling murah dengan dampak paling besar, deploy, dan ukur ulang di field data setelah 28 hari. Iterasi seperti ini lebih konsisten dari refactor besar sekaligus.