Apa itu Interaction to Next Paint (INP) dan Cara Meningkatkannya

Interaction to Next Paint atau INP adalah salah satu metrik core web vitals yang menilai responsivitas sebuah halaman website. Lalu, apakah INP ini memang penting untuk diperhatikan, dan apa dampaknya jika INP dianggap bermasalah? 

Pada artikel ini, Rumahweb Indonesia telah merangkum secara lengkap tentang apa itu Interaction to Next Paint, fungsi, cara pengecekan, hingga optimasinya. Simak informasi berikut!

Apa Itu Interaction to Next Paint (INP)?

INP adalah singkatan dari Interaction to Next Paint, yaitu metrik core web vitals yang menilai responsivitas halaman pada website berdasarkan event timing API. INP mengamati durasi response dari semua klik, ketukan, dan interaksi pada halaman website.

Sebagai contoh, ketika pengunjung mengklik tombol ‘tambahkan ke keranjang’ pada toko online, website harus segera merespon interaksi tersebut dengan menampilkan update data keranjang pada interface website user. Kecepatan responsivitas inilah yang dinilai sebagai INP. 

Pada dasarnya, tujuan INP adalah mengukur responsivitas interaksi pada website ketika terjadi perubahan data. Dengan menampilkan respon visual yang cepat, pengguna akan merasa bahwa website berjalan sesuai keinginannya, yang akan meningkatkan user experience. 

Bayangkan jika website menunda respons visual ketika terjadi interaksi. Bisa jadi pengunjung berpikir bahwa halaman tidak merespon tindakan mereka. Bukan tidak mungkin pengunjung segera pergi dari website Anda, sebelum menyelesaikan pesanan.

Apa Perbedaan INP dan FID?

FID (First Input Delay) dan INP adalah dua metrik core web vital yang digunakan untuk mengukur performa website. Namun, keduanya memiliki parameter yang berbeda.

FID memiliki parameter yang lebih spesifik, yaitu menghitung interaksi pertama pada website dan mengukur input delay yang terjadi pada browser. Artinya, FID hanya berfokus pada respon awal browser terhadap input pertama dari pengguna.

Berbeda dengan INP yang mengukur semua interaksi pengguna, serta mengukur waktu yang dibutuhkan browser untuk mulai menampilkan perubahan visual dari interaksi yang dilakukan. Artinya, INP lebih kompleks, karena menilai semua parameter browser terhadap interaksi.

Pada INP, penilaian performa web menjadi lebih menyeluruh karena mempertimbangkan respon browser terhadap seluruh interaksi pengguna. Karenanya sebagai pemilik website, Anda harus melakukan optimasi untuk mendapatkan nilai INP yang baik.

Bagaimana Mengukur Nilai INP

Seperti yang sudah dijelaskan sebelumnya, INP adalah salah satu parameter core web vital yang mengukur responsivitas  halaman pada website. Ada beberapa parameter yang digunakan, di antaranya: 

1. First Input Delay (FID): Waktu yang dibutuhkan oleh browser untuk mulai memproses input atau request pengguna.
2. Time to First Paint (TTFP): Waktu yang dibutuhkan browser untuk memulai rendering konten halaman.
3. Contentful Paint (CP): Waktu yang dibutuhkan browser untuk rendering konten utama halaman, seperti teks dan gambar.

Selain poin-poin diatas, jumlah tautan yang ada di website Anda juga dapat mempengaruhi nilai INP. Jumlah tautan internal dan eksternal, bisa menyebabkan nilai INP Anda bertambah.

Berapa Skor INP yang Baik?

Ada tiga penilaian terhadap INP berdasarkan waktu responnya, yakni:

• Good : 0-200 milidetik, halaman memiliki responsivitas yang baik.
• Needs Improvement : 200-500 milidetik, alias membutuhkan perbaikan.
• Poor : > 500 milidetik, halaman memiliki responsivitas yang buruk.

Bagaimana Cara Mengetahui Nilai INP pada Website?

Setidaknya ada tiga cara yang dapat dilakukan untuk mengetahui nilai INP pada website, yaitu melalui Google PageSpeed (Lighthouse), WebPageTest, dan Pingdom. Pada panduan ini, kami akan menggunakan Google PageSpeed untuk menganalisis INP pada website Rumahweb. 

• Akses halaman Google Pagespeed.
• Masukkan alamat website yang ingin Anda test. 
• Klik tombol Analisis. 

Google PageSpeed akan menampilkan hasil penilaian berdasarkan mobile dan desktop interface. Berikut adalah contoh hasil test pada halaman utama Rumahweb Indonesia:

Cara Meningkatkan INP pada Website

Lalu, bagaimana jika nilai INP Anda membutuhkan perbaikan, atau bahkan masuk ke kriteria buruk? Ada dua hal yang perlu dilakukan untuk meningkatkan INP pada website, yaitu optimasi Javascript dan rendering pada website. Berikut penjelasannya: 

JavaScript 

JavaScript yang tidak perlu dapat memperlambat browser dan meningkatkan nilai INP. Karenanya, pastikan script website Anda hanya menggunakan JavaScript yang benar-benar diperlukan.

Dua hal yang sering menyebabkan INP menjadi tinggi pada JavaScript adalah long task dan input delay. 

Long tasks adalah tugas JavaScript yang membutuhkan waktu loading lebih lama untuk dijalankan, biayanya waktunya bisa lebih dari 50 milidetik. Sedangkan input delay adalah waktu yang dibutuhkan browser untuk merespon input pengguna setelah long task selesai.

Jika website Anda menggunakan framework seperti Laravel, CodeIgniter, atau PHP Native, kami menyarankan Anda untuk belajar cara melakukan compression JavaScript. Anda juga bisa menghapus JavaScript yang tidak dibutuhkan, atau menggabungkan JavaScript menjadi satu file melalui beberapa tools, seperti Webpack dan Rollup. 

Bagi pengguna CMS WordPress, Anda dapat memaksimalkan penggunaan plugin optimizer seperti WP Rockets, LiteSpeed Cache hingga WP Super Cache. Plugin ini memiliki fitur minify Javascript, CSS, hingga HTML yang mampu mereduksi load page pada website.

Alternatif lain yang bisa dicoba adalah menggunakan CDN (Content Delivery Network) untuk menyimpan cache JavaScript, sehingga waktu muat pada website akan semakin cepat.

Rendering

Rendering adalah proses yang dilakukan browser untuk mengubah kode HTML, CSS, dan JavaScript menjadi halaman web yang dapat dilihat dan diintegrasikan kepada pengunjung. Proses rendering berkaitan erat dengan konten pada website. Semakin kompleks halaman web yang diakses, semakin lama waktu rendering yang dibutuhkan.

Ada beberapa cara mengoptimalkan proses rendering pada browser, antara lain:

• Optimasi Javascript, CSS, dan HTML
  Optimasi ini dilakukan dengan cara mengompres ukuran file JavaScript, CSS, dan HTML pada website. 
• Optimasi Gambar
  Gambar berukuran besar dapat memperlambat waktu loading halaman website. Pastikan Anda mengompres gambar sebelum diupload, serta melakukan optimasi dengan plugin atau modul tambahan. 
• Optimasi Cache
  Cache adalah data sementara yang disimpan baik di web server maupun browser, untuk membantu website atau aplikasi dapat diakses dengan lebih cepat. Anda juga bisa mengaktifkan Redis Cache untuk meningkatkan kecepatan query database saat memproses data. 
• Gunakan CDN
  Content Delivery Network atau CDN dapat membantu mendistribusikan konten website Anda ke pengunjung dengan lebih cepat.

Dari beberapa poin di atas, berikut kami beberapa referensi untuk optimasi Javascript, HTML, CSS, Cache hingga gambarL

• Optimasi cache melalui Litespeed Cache. 
• Optimasi melalui WP Rocket.
• Cara mengarahkan domain ke CDN 
• Mengaktifkan Redis cache di cPanel
• Cara kompres gambar atau foto. 

Kesimpulan 

INP adalah metrik core web vitals yang menilai responsivitas halaman pada website. INP akan mengamati durasi respons dari semua klik, ketukan, dan interaksi pada halaman website. Tujuan utama INP adalah mengukur responsivitas interaksi pada website ketika terjadi perubahan data.

Selain bagus untuk SEO, INP yang baik dapat meningkatkan user experience, atau dengan kata lain dapat membuat pengunjung mendapatkan pengalaman mengakses website yang ‘menyenangkan’.

Karena itulah, Anda perlu melakukan optimasi INP guna meraih peringkat terbaik di Google sekaligus dan meningkatkan user experience pengunjung website. 

Selain melakukan optimasi, pemilihan hosting atau server yang tepat juga penting untuk diperhatikan. Rumahweb menyediakan hosting dengan Web Accelerator yang dapat membuat website dimuat lebih cepat daripada hosting biasa.

Anda juga akan mendapatkan fitur LiteSpeed Web Server, Redis, hingga Imunify360, yang bisa membantu Anda mengoptimasi website agar dapat diakses lebih cepat dan lebih aman. 

Jadi, bisa disimpulkan bahwa INP adalah metrik yang akan menilai responsivitas halaman. Semakin rendah nilai INP, semakin cepat akses ke website Anda. Demikian artikel dari Rumahweb Indonesia tentang apa itu Interaction to Next Paint (INP). Semoga bermanfaat!