Kenali apa itu INP (Interaction to Next Paint), metrik terbaru pengganti FID dalam Core Web Vitals Google, serta cara meningkatkan responsivitas website!

INP (Interaction to Next Paint) adalah salah satu metrik penilaian paling vital saat ini yang mengukur seberapa responsif dan gesit sebuah website saat merespons sentuhan atau klik dari pengguna.

Sebagai praktisi SEO dan pengembang web, kita sudah sering mendengar tentang kecepatan muat halaman seperti LCP. Namun, seberapa sering Anda membuka sebuah website, mengeklik tombol menu atau tombol beli, tetapi halaman tersebut tampak “membeku” atau lambat merespons selama beberapa detik?

Pengalaman menyebalkan itulah yang kini diukur secara ketat oleh Google melalui metrik terbaru dalam standar Core Web Vitals yang disebut INP.

Artikel komprehensif ini akan mengupas tuntas apa itu INP, mengapa metrik ini menggantikan standar lama, serta bagaimana cara mengoptimalkannya agar website Anda terasa sangat gesit dan nyaman digunakan.

1. Apa Itu INP (Interaction to Next Paint)?

Secara sederhana, INP (Interaction to Next Paint) adalah metrik performa web yang mengukur keseluruhan responsivitas sebuah halaman web terhadap interaksi pengguna (seperti klik mouse, ketukan layar sentuh, atau penekanan tombol papan ketik).

INP mengamati seluruh siklus interaksi dari awal hingga halaman benar-benar memperbarui tampilannya di layar (next paint). Rincian tahapannya meliputi:

1. Waktu Input (Input Delay): Seberapa lama browser menunggu sebelum mulai memproses aksi setelah pengguna mengeklik atau menyentuh layar.
2. Waktu Proses (Processing Time): Berapa lama waktu yang dibutuhkan CPU untuk menjalankan skrip di balik layar (seperti kode JavaScript).
3. Waktu Tampil (Presentation Delay): Berapa lama waktu yang dibutuhkan browser untuk merender perubahan visual baru di layar kepada pengguna.

• Standar Skor INP yang Baik:
  • Baik (Good): Di bawah 200 milidetik (ms).
  • Perlu Perbaikan (Needs Improvement): Antara 200 hingga 500 ms.
  • Buruk (Poor): Di atas 500 ms.

Jika skor INP Anda lebih dari setengah detik, pengguna akan merasakan jeda yang mengganggu, membuat website terasa “lola” (loading lambat) atau patah-patah.

2. Mengapa INP Menggantikan FID (First Input Delay)?

Sebelumnya, Google menggunakan metrik bernama FID (First Input Delay) untuk mengukur responsivitas. Namun, Google menyadari bahwa FID memiliki kekurangan besar: FID hanya mengukur interaksi pertama saat pengguna baru mendarat di halaman, dan hanya mengukur bagian Input Delay saja.

Sebaliknya, INP jauh lebih akurat karena mengukur seluruh interaksi yang terjadi selama pengunjung berselancar di halaman tersebut (mulai dari menggulir, mengeklik menu, membuka dropdown, hingga menekan tombol checkout), serta memperhitungkan total durasi hingga layar selesai merespons.

3. Mengapa Website Bisa Memiliki INP yang Buruk?

Penyebab utama buruknya nilai INP hampir selalu bermuara pada satu biang keladi: Eksekusi JavaScript yang berlebihan dan menumpuk di Main Thread.

• Terlalu Banyak Skrip Pihak Ketiga (Third-Party Scripts): Memasang terlalu banyak skrip pelacakan iklan, widget obrolan (live chat), atau plugin analitik yang berjalan bersamaan.
• Kode JavaScript yang Panjang dan Rumit (Long Tasks): Tugas skrip yang memakan waktu lebih dari 50 milidetik tanpa henti membuat CPU kewalahan sehingga tidak sempat memproses klik dari pengguna.
• DOM yang Terlalu Gemuk: Terlalu banyak elemen HTML bertingkat yang rumit membuat proses pembaruan tampilan visual menjadi sangat lambat.

4. Cara Mengoptimalkan INP untuk Meningkatkan Performa

Memperbaiki skor INP memerlukan pembersihan di sektor teknis front-end dan skrip pemrograman:

1. Pangkas dan Optimalkan Kode JavaScript: Kurangi beban kerja CPU dengan memecah tugas-tugas skrip yang besar (Long Tasks) menjadi bagian-bagian kecil agar browser bisa bernapas di sela-sela pemrosesan.
2. Batasi Penggunaan Skrip Pihak Ketiga: Tinjau ulang plugin atau widget eksternal di website Anda. Hapus skrip yang tidak benar-benar esensial bagi fungsionalitas utama situs.
3. Gunakan Teknik Debounce dan Throttle: Pada elemen interaktif seperti kolom pencarian instan (live search) atau tombol gulir, pastikan fungsi eksekusi tidak dipanggil secara membabi buta di setiap milidetik pergerakan pengguna.
4. Optimalkan Render Halaman: Minimalkan manipulasi elemen DOM yang terlalu kompleks secara bersamaan agar peramban (browser) bisa langsung menampilkan perubahan visual (next paint) tanpa hambatan.

Mengapa INP yang Baik Sangat Disukai Manusia, AI, & SEO?

• Bagi Manusia: Memberikan sensasi berselancar yang mulus, instan, dan bebas dari rasa kesal akibat tombol yang “ngadat” atau tidak merespons.
• Bagi Mesin Pencari & SEO: Sebagai bagian resmi dari standar Core Web Vitals, skor INP yang buruk akan langsung berdampak pada penilaian kualitas pengalaman halaman (page experience) oleh Google, yang berpotensi menurunkan peringkat SEO Anda.
• Bagi Sistem AI: Sistem kecerdasan buatan dan agen pencari generatif mengevaluasi fungsionalitas dan kesehatan teknis suatu situs secara menyeluruh. Situs yang responsif menunjukkan kualitas kode yang bersih dan profesional, memudahkan sistem AI mengindikasikan situs Anda sebagai rujukan terpercaya.

Kesimpulan

INP (Interaction to Next Paint) adalah standar baru pengukur interaktifitas web yang menuntut pengembang untuk menghadirkan pengalaman digital yang gesit secara nyata. Dengan memangkas tugas JavaScript yang berlebihan, membersihkan skrip pihak ketiga yang tidak perlu, dan memastikan setiap sentuhan pengguna langsung dieksekusi tanpa jeda, Anda dapat menciptakan website yang responsif, disukai manusia, serta diprioritaskan oleh mesin pencari dan AI.