Apa Itu Core Web Vitals INP dan Cara Memperbaikinya di Website

Kalau Anda pernah mengklik tombol di sebuah website tapi responsnya terasa lambat atau malah macet sesaat, itulah pengalaman yang coba diukur oleh metrik bernama INP. Sejak resmi menggantikan First Input Delay sebagai bagian dari Core Web Vitals, INP menjadi salah satu metrik yang paling banyak dibahas sekaligus paling menantang untuk dioptimasi oleh pemilik website.

Di artikel ini, kita akan bahas apa itu INP, kenapa metrik ini menggantikan pendahulunya, penyebab umum skor INP buruk, hingga cara praktis mengoptimalkannya di website Anda.

Pengertian INP dalam Core Web Vitals

Definisi Interaction to Next Paint

Mengukur responsivitas, bukan sekadar kecepatan muat

Interaction to Next Paint (INP) adalah metrik yang mengukur seberapa cepat website merespons setiap interaksi pengguna, seperti klik, ketukan layar, atau input keyboard, hingga perubahan visual berikutnya benar-benar tampil di layar. Berbeda dari metrik kecepatan muat halaman, INP berfokus pada keseluruhan pengalaman interaksi selama pengguna berada di halaman tersebut, bukan hanya saat halaman pertama kali dibuka.

INP diukur dalam milidetik, dan Google mengambil nilai interaksi “terburuk” yang representatif selama sesi kunjungan pengguna sebagai skor akhir suatu halaman.

Standar Skor INP yang Baik Menurut Google

Tiga kategori penilaian yang perlu diketahui

Google mengelompokkan skor INP ke dalam tiga kategori: baik (di bawah 200 milidetik), butuh perbaikan (200 hingga 500 milidetik), dan buruk (di atas 500 milidetik). Halaman dengan skor di kategori baik dianggap memberikan pengalaman interaksi yang responsif dan nyaman bagi pengguna.

Skor ini diukur berdasarkan data pengguna nyata (field data) melalui Chrome User Experience Report, bukan hanya simulasi laboratorium, sehingga mencerminkan kondisi sebenarnya dari berbagai perangkat dan koneksi internet pengunjung.

Kenapa INP Menggantikan First Input Delay

Kelemahan First Input Delay Sebagai Metrik

Hanya mengukur interaksi pertama

First Input Delay (FID) hanya mengukur jeda waktu antara interaksi pertama pengguna dengan respons awal dari browser, tanpa mempertimbangkan seberapa lama waktu yang dibutuhkan hingga perubahan visual benar-benar selesai ditampilkan. Ini membuat FID kurang mencerminkan pengalaman interaksi secara menyeluruh.

Selain itu, FID hanya menangkap satu momen interaksi pertama, padahal pengguna biasanya melakukan banyak interaksi lain sepanjang kunjungan mereka di sebuah halaman.

Pengukuran Interaksi Sepanjang Kunjungan

Gambaran pengalaman yang lebih menyeluruh

INP mengukur seluruh interaksi yang terjadi sepanjang kunjungan pengguna di suatu halaman, bukan hanya interaksi pertama. Dengan begitu, metrik ini memberikan gambaran yang jauh lebih representatif tentang bagaimana halaman merespons pengguna dari awal hingga akhir sesi kunjungan.

Pergeseran ini membuat developer dan pemilik website perlu memperhatikan performa interaksi secara konsisten di seluruh halaman, bukan hanya mengoptimasi momen pertama kali halaman dimuat.

Penyebab Umum Skor INP Buruk

Skrip JavaScript yang Terlalu Berat

Main thread yang kewalahan memproses kode

Salah satu penyebab paling umum skor INP buruk adalah eksekusi JavaScript yang terlalu berat dan memblokir main thread browser dalam waktu lama. Ketika main thread sibuk memproses skrip, browser tidak bisa segera merespons interaksi pengguna, sehingga terasa lag atau tertunda.

Website dengan banyak plugin, skrip pihak ketiga seperti iklan atau chat widget, dan kode yang tidak dioptimasi biasanya paling rentan mengalami masalah ini.

Efek Animasi dan Popup Berlebihan

Visual yang menarik tapi membebani performa

Animasi transisi yang rumit, efek hover berlebihan, dan popup yang muncul dengan animasi berat juga bisa memperlambat respons interaksi, terutama pada perangkat mobile dengan spesifikasi terbatas. Semakin banyak elemen visual yang harus dihitung ulang (repaint) oleh browser setiap kali ada interaksi, semakin besar potensi keterlambatan responsnya.

Bukan berarti animasi harus dihilangkan sepenuhnya, tapi perlu dipertimbangkan ulang mana yang benar-benar menambah nilai pengalaman pengguna dan mana yang hanya membebani performa tanpa manfaat berarti.

Cara Mengoptimalkan INP di Website

Mengurangi Beban Main Thread Browser

Memecah tugas besar menjadi tugas kecil

Salah satu teknik paling efektif adalah memecah tugas JavaScript yang berat menjadi beberapa tugas kecil (code splitting), sehingga browser punya kesempatan merespons interaksi pengguna di sela-sela pemrosesan kode. Menunda pemuatan skrip yang tidak penting di awal (defer atau lazy load) juga membantu meringankan beban main thread saat halaman pertama kali dibuka.

Meminimalkan penggunaan skrip pihak ketiga yang tidak esensial, atau memuatnya secara asinkron, juga terbukti membantu meningkatkan skor INP secara signifikan.

Menerapkan Lazy Loading pada Elemen Berat

Memuat konten sesuai kebutuhan pengguna

Lazy loading adalah teknik memuat elemen berat seperti gambar, video, atau widget interaktif hanya ketika elemen tersebut mendekati area pandang pengguna (viewport), bukan sekaligus di awal saat halaman dimuat. Teknik ini mengurangi beban pemrosesan awal sehingga browser lebih responsif terhadap interaksi pengguna.

Kombinasikan lazy loading dengan optimasi gambar dan pengujian rutin menggunakan tools seperti PageSpeed Insights untuk memastikan perbaikan yang dilakukan benar-benar berdampak pada skor INP di kondisi nyata.

Ringkasan Cepat (Key Takeaways)

• INP mengukur responsivitas website terhadap seluruh interaksi pengguna, bukan hanya interaksi pertama.
• Skor INP di bawah 200 milidetik dikategorikan baik menurut standar Google.
• JavaScript berat dan animasi berlebihan adalah penyebab paling umum skor INP buruk.
• Memecah tugas JavaScript dan menerapkan lazy loading efektif menurunkan waktu respons interaksi.
• INP resmi menggantikan First Input Delay karena memberi gambaran pengalaman interaksi yang lebih menyeluruh.

Pertanyaan yang Sering Diajukan (FAQ)

Apakah INP memengaruhi ranking SEO website?

Ya, INP merupakan bagian dari Core Web Vitals yang menjadi salah satu sinyal pengalaman pengguna dalam algoritma ranking Google, meski bobotnya tetap berdampingan dengan faktor kualitas konten dan relevansi lainnya.

Bagaimana cara mengecek skor INP website saya?

Anda bisa mengecek skor INP melalui laporan Core Web Vitals di Google Search Console, atau menggunakan tools seperti PageSpeed Insights dan Chrome DevTools untuk melihat detail performa per halaman.

Apakah website dengan banyak animasi pasti punya skor INP buruk?

Tidak selalu, selama animasi tersebut dioptimasi dengan baik dan tidak membebani main thread secara berlebihan. Yang menjadi masalah adalah animasi yang tidak efisien secara teknis, bukan animasi itu sendiri.

Kesimpulan

Memahami dan mengoptimalkan INP bukan hanya soal memenuhi standar teknis Google, tapi juga soal memberikan pengalaman yang benar-benar nyaman bagi pengunjung website Anda. Dengan mengurangi beban JavaScript, menerapkan lazy loading, dan rutin memantau skor melalui Search Console, website Anda bisa tampil lebih responsif sekaligus lebih kompetitif di hasil pencarian.