INP Akan Gantikan FID di Core Web Vital pada Maret 2024

Google selalu diperbarui dari waktu ke waktu termasuk dalam hal Core Web Vital. Pada 10 Mei 2023, Google telah mengumumkan bahwa Interactive to Next Paint (INP) akan menggantikan First Input Delay (FID) di Core Web Vital pada Maret 2024

Jadi, pemilik situs web dan Search Engine Optimization (SEO) spesialis harus bersiap untuk perubahan itu. Pada artikel ini kita akan membahas tentang INP yang akan menggantikan FID pada Maret 2024.

 

Apa itu Interactive to Next Paint (INP)?

Interactive to next paint adalah metriks baru dari core web vital yang berfokus pada user experience yaitu interaksi user dengan respon output yang diberikan. Ketika interaksi user yang dihasilkan dari klik, scroll, dan interaksi yang lain memberikan visual feedback lebih lama maka akan memberikan kategori unresponsive pada sebuah halaman. 

Berikut adalah contoh proses input interaksi user dalam INP:

 

Interaktivitas dalam sebuah website biasanya dikontrol oleh penggunaan javascript. Tetapi, biasanya juga bisa dikontrol oleh CSS seperti checkbox dan radiobutton dari interaksi animasi atau “:active” selector.

Sejauh ini, INP biasanya terjadi karena beberapa interaksi, yaitu:

• Klik dengan menggunakan mouse.
• Mengetuk perangkat dengan layar sentuh.
• Menekan tombol di keyboard fisik atau di layar.

 

Perbedaan INP dan FID

Ketika INP mempertimbangkan semua interaksi halaman, First Input Delay (FID) hanya memperhitungkan interaksi pertama. FID juga hanya mengukur penundaan input interaksi pertama, bukan waktu yang diperlukan untuk menjalankan event handler, atau penundaan dalam menampilkan frame berikutnya.

INP dapat mengambil sampel dari semua interaksi, respon dari halaman juga dapat dinilai secara komprehensif. Sedangkan FID hanya mengukur metrik keterlambatan input tanpa mempertimbangkan event handler, dan berapa lama waktu yang diperlukan untuk memproses input.

 

Pengukuran INP pada Core Web Vital

Sesaat setelah user melakukan interaksi, kemudian halaman akan merespon interaksi dari user, lalu browser akan menampilkan frame output hasil dari input user. Berikut contoh dari INP dengan respon yang bagus dan respon yang kurang bagus.

 

INP akan memastikan waktu dari saat pengguna melakukan interaksi ke feedback visual sesingkat mungkin sehingga user experience lebih bagus. 

 

Berapa Nilai INP yang Bagus?

 

Nilai INP dikategorikan menjadi 3 kriteria yaitu:

• Good INP - Berarti interaksi user dengan respon feedback visual kurang dari sama dengan 200 ms.
• Needs Improvement - Berarti nilai INP berada diantara 200 ms - 500 ms.
• Poor INP - Berarti Nilai INP lebih dari sama dengan 500 ms.

 

Cara Mengukur Nilai INP

Pengukuran INP bisa menggunakan lab fitur dari Lighthouse yang menggunakan timespan mode yang dapat mengumpulkan data, yaitu dengan:

• Modul npm di Lighthouse.
• User flow di Lighthouse.

Lighthouse memiliki API aliran pengguna baru yang memungkinkan pengujian lab kapan saja pada halaman website. 

Puppeteer digunakan untuk membuat skrip halaman dan memicu interaksi pengguna buatan, dan Lighthouse dapat dipanggil dengan berbagai cara untuk menangkap respon selama interaksi tersebut. Artinya, performa INP dapat diukur selama pemuatan halaman dan selama interaksi dengan halaman

 

Pengaruh INP pada Website

Terdapat beberapa pengaruh INP yang buruk terhadap website, diantaranya yaitu:

• User Experience - Pengguna mengharapkan interaksi yang cepat dan lancar. Penundaan dapat mengganggu mereka dan mengurangi kepuasan mereka
• User Conversion - Penundaan input yang lama dapat membuat user gagalmelakukan konversi, karena pengguna mungkin menjadi tidak sabar dan meninggalkan situs web atau aplikasi sebelum menyelesaikan tindakan yang diinginkan.
• Website Quality - Kualitas website akan ditanyakan jika terjadi interaksi yang lambat karena akan memberikan persepsi negatif terhadap kualitas website.

 

Cara Meningkatkan Skor INP pada Website

Karena interactive to next paint merupakan metriks baru dari core web vital pada maret 2024, sehingga memperbaiki INP merupakan plan yang bagus untuk SEO dan user experience. Berikut langkah-langkahnya:

1. Cek flow dari user interaksi, bagaimana user interaksi yang mungkin terjadi pada sebuah halaman.
2. Cek apakah ada javascript atau CSS yang memberikan delay pada pemuatan respon dari interaksi user.
3. Cek apakah ada id dan class yang sama sehingga terjadi crash pada pengiriman respon.

Lakukan optimasi speed dan responsiveness menggunakan plugin cache dari wordpress.

 

Kesimpulan

INP akan menggantikan FID pada maret 2024. Dengan melakukan optimasi INP maka website akan siap dengan perubahan standar core web vital yang akan terjadi. INP juga mengindikasikan sebuah website memiliki interaksi user yang bagus sehingga juga akan membuat sebuah halaman memiliki user experience yang bagus.