Interaction to Next Paint (INP)
Interaction to Next Paint (INP) adalah metrik resmi Core Web Vitals terbaru dari Google yang mengukur tingkat responsivitas sebuah website dengan menilai durasi jeda waktu dari saat pengunjung mengklik, mengetuk, atau menekan tombol hingga peramban selesai memperbarui tampilan visual di layar.
Mengapa Penting untuk Bisnis:
Skor INP di bawah 200ms menjamin website Anda terasa sangat gesit dan licin saat digunakan di smartphone, menyingkirkan sensasi macet saat calon pembeli menekan tombol transaksi.
Penjelasan Mendalam & Konsep Kerja
Pada Maret 2024, Google secara resmi menghentikan metrik First Input Delay (FID) lama dan menggantikannya dengan standar yang jauh lebih ketat dan komprehensif: Interaction to Next Paint (INP).
Kelemahan FID lama adalah hanya mengukur interaksi pertama saja saat halaman dibuka. Sebaliknya, INP memantau SELURUH interaksi yang terjadi sepanjang sesi kunjungan pengguna—mulai dari membuka menu akordeon FAQ, memilih filter kategori produk, hingga mengetik di kotak formulir penawaran.
INP mengukur latensi interaksi terpanjang yang dialami pengguna. Durasi ini dihitung dari saat pengguna melakukan aksi hingga frame gambar berikutnya berhasil digambar ulang oleh mesin perender peramban (next paint).
Google menetapkan bahwa skor INP dikatakan 'Baik' (Good) jika berada di bawah 200 milidetik. Skor antara 200 hingga 500 milidetik 'Perlu Perbaikan', dan di atas 500 milidetik dinyatakan 'Buruk' (Poor) karena pengguna akan merasakan sensasi macet atau 'lag'.
Penyebab utama INP yang buruk adalah beban eksekusi JavaScript yang memblokir utas utama browser (Main Thread). Ketika browser sedang sibuk memproses baris-baris kode JavaScript yang rumit, peramban tidak dapat merespons ketukan jari pengguna di layar ponsel.
Dengan mengeliminasi pustaka animasi berat yang tidak perlu dan memanfaatkan rendering CSS murni, website Anda akan terasa super ringan dan merespons ketukan pengunjung secepat kilat.
Visualisasi Ambang Batas Core Web Vitals (CWV)
Langkah Praktis Penerapan untuk Website Bisnis
Hindari Pustaka Animasi JavaScript Berat
Gunakan animasi CSS murni (hardware accelerated) alih-alih pustaka runtime JS besar seperti Framer Motion atau GSAP.
Pecah Tugas Komputasi Panjang (Long Tasks)
Pastikan tidak ada eksekusi fungsi JavaScript di browser yang memakan waktu lebih dari 50 milidetik pada main thread.
Beri Umpan Balik Visual Instan
Saat pengunjung menekan tombol, segera ubah status tampilan tombol (misal: efek loading halus) sebelum mengeksekusi logika data di belakang.
Tunda Pemuatan Skrip Non-Kritis
Gunakan strategi penguraian kode (code splitting) agar komponen interaktif berat hanya dimuat saat benar-benar dibutuhkan.
Tabel Perbandingan & Evaluasi Solusi
| Faktor Evaluasi | Skor INP Unggul (< 200ms) | Skor INP Lambat (> 500ms) |
|---|---|---|
| Sensasi Respons Sentuhan | Instan layaknya aplikasi smartphone native | Terasa macet (lag) dan tidak responsif saat ditekan |
| Kondisi Utas Utama (Main Thread) | Bebas dan longgar, siap menerima perintah interaksi | Terkunci sibuk mengeksekusi tumpukan JavaScript berat |
| Tingkat Keberhasilan Form Leads | Maksimal, pengguna lancar mengisi tanpa hambatan | Pengguna frustrasi karena tombol kirim terasa tidak bereaksi |
| Status Evaluasi Google | Lolos evaluasi Core Web Vitals modern 100% | Gagal dan kehilangan prioritas algoritma Page Experience |
Kesalahan Umum yang Sering Dilakukan Pemilik Website
Memasang terlalu banyak skrip pelacak pemasaran dan widget obrolan langsung yang bersaing di main thread.
Menggunakan penangan acara scroll atau mousemove yang mengeksekusi perhitungan rumit tanpa teknik debouncing.
Membiarkan struktur DOM halaman membengkak hingga puluhan ribu node elemen HTML.
Mengabaikan pengujian pada perangkat ponsel Android kelas menengah ke bawah dengan prosesor lambat.
Pertanyaan yang Sering Diajukan (FAQ)
Interaksi apa saja yang diukur dalam perhitungan metrik INP?
INP mengukur tiga tipe interaksi pengguna: Mengklik dengan mouse, mengetuk layar sentuh di ponsel (tap), dan menekan tombol pada keyboard fisik atau virtual.
Mengapa aktivitas scrolling atau zoom layar tidak dihitung dalam INP?
Menggulir halaman (scrolling) dan memperbesar layar (zooming) adalah tindakan navigasi peramban murni yang ditangani oleh utas kompositor terpisah, sehingga tidak masuk dalam perhitungan INP.
Bagaimana cara mendiagnosa interaksi lambat di Chrome DevTools?
Gunakan panel 'Performance' di Chrome DevTools, aktifkan pelambatan CPU (4x CPU throttling), lalu lakukan interaksi di halaman untuk melihat durasi 'Interaction'.
Bagaimana platform kami mengamankan skor INP sempurna?
Platform kami dibangun tanpa pustaka animasi JS eksternal, hanya menggunakan CSS motion murni, event handler ringan, dan static HTML export yang menjamin INP selalu di bawah 50ms.
Mulai Bangun Website Impian Bisnis Anda
Isi formulir ringkas di bawah ini. Tim spesialis kami akan menghubungi Anda dalam hitungan menit.
Istilah Terkait Lainnya
Google Core Web Vitals (CWV)
Core Web Vitals (CWV) adalah sekumpulan metrik performa web terstandarisasi dari Google yang mengukur pengalaman pengguna di dunia nyata berdasarkan tiga pilar utama: kecepatan pemuatan (LCP), stabilitas visual (CLS), dan responsivitas interaksi (INP).
performanceLargest Contentful Paint (LCP)
Largest Contentful Paint (LCP) adalah metrik Core Web Vitals yang mengukur waktu yang dibutuhkan peramban untuk merender dan menampilkan blok konten terbesar yang terlihat di layar—biasanya gambar banner utama atau blok teks heading judul.
performanceCumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) adalah metrik Core Web Vitals yang mengukur stabilitas visual halaman dengan menghitung total frekuensi dan tingkat keparahan pergeseran tata letak elemen mendadak yang tidak diharapkan pengguna.
performanceGoogle PageSpeed Insights (PSI) & Data CrUX
Google PageSpeed Insights (PSI) adalah alat diagnostik performa resmi dari Google yang menganalisis kecepatan halaman web di perangkat seluler dan desktop, menyajikan perpaduan antara data pengalaman pengguna dunia nyata (CrUX) dan simulasi data laboratorium.
performanceSumber Daya Penghambat Render (Render-Blocking Resources)
Render-Blocking Resources adalah berkas eksternal CSS atau JavaScript yang memaksa peramban menghentikan sementara proses penerjemahan dan penggambaran halaman ke layar sampai berkas tersebut selesai diunduh dan dieksekusi seutuhnya.