Interaksi dengan Next Paint (INP)

Data penggunaan Chrome menunjukkan bahwa 90% waktu pengguna di halaman dihabiskan setelah dimuat. Oleh karena itu, pengukuran responsivitas yang cermat di seluruh siklus proses halaman sangatlah penting. Hal inilah yang dinilai oleh metrik INP.

Responsivitas yang baik berarti halaman merespons interaksi dengan cepat. Saat halaman merespons interaksi, browser akan menampilkan masukan visual pada frame berikutnya yang digambarnya. Masukan visual memberi tahu Anda apakah, misalnya, item yang Anda tambahkan ke keranjang belanja online benar-benar ditambahkan, apakah menu navigasi seluler telah terbuka, apakah konten formulir login diautentikasi oleh server, dan sebagainya.

Beberapa interaksi secara alami membutuhkan waktu lebih lama daripada yang lain, tetapi untuk interaksi yang sangat kompleks, penting untuk menyajikan beberapa masukan visual awal dengan cepat untuk memberi tahu pengguna bahwa sesuatu sedang terjadi. {i>Frame<i} berikutnya yang akan digambar oleh browser adalah kesempatan paling awal untuk melakukannya.

Oleh karena itu, tujuan INP bukanlah untuk mengukur semua efek akhir dari interaksi—seperti pengambilan jaringan dan update UI dari operasi asinkron lainnya), tetapi waktu saat cat berikutnya diblokir. Dengan menunda masukan visual, pengguna mungkin mendapatkan kesan bahwa halaman tidak merespons dengan cukup cepat, dan INP dikembangkan untuk membantu developer mengukur bagian pengalaman pengguna ini.

Dalam video berikut, contoh di sebelah kanan memberikan masukan visual langsung bahwa akordeon terbuka. Respons yang buruk ditunjukkan misalnya di sebelah kiri, dan bagaimana hal tersebut dapat menciptakan pengalaman pengguna yang buruk.

Panduan ini menjelaskan cara kerja INP, cara mengukurnya, dan merujuk ke referensi untuk meningkatkannya.

Apa itu INP?

INP adalah metrik yang menilai responsivitas halaman secara keseluruhan terhadap interaksi pengguna dengan mengamati latensi semua interaksi klik, ketuk, dan keyboard yang terjadi selama kunjungan pengguna ke halaman tersebut. Nilai INP akhir adalah interaksi terpanjang yang diamati, dengan mengabaikan pencilan.

Interaksi adalah grup pengendali peristiwa yang diaktifkan selama gestur pengguna logis yang sama. Misalnya, "ketuk" interaksi pada perangkat layar sentuh mencakup beberapa peristiwa, seperti pointerup, pointerdown, dan click. Interaksi dapat didorong oleh JavaScript, CSS, kontrol browser bawaan (seperti elemen formulir), atau kombinasinya.

Latensi interaksi terdiri dari satu durasi terpanjang dari grup pengendali peristiwa yang mendorong interaksi, mulai dari saat pengguna memulai interaksi hingga saat browser menggambar frame berikutnya.

Berapa skor INP yang baik?

Menyematkan label seperti "bagus" atau "buruk" pada metrik responsivitas adalah hal yang sulit. Di satu sisi, Anda ingin mendorong praktik pengembangan yang memprioritaskan responsivitas yang baik. Di sisi lain, Anda harus memperhitungkan fakta bahwa ada variabilitas yang cukup besar dalam kemampuan perangkat yang digunakan orang untuk menetapkan ekspektasi pengembangan yang dapat dicapai.

Untuk memastikan Anda memberikan pengalaman pengguna dengan responsivitas yang baik, batas yang baik untuk diukur adalah persentil ke-75 dari pemuatan halaman yang tercatat di kolom, yang disegmentasikan di seluruh perangkat seluler dan desktop:

• INP di bawah atau pada 200 milidetik berarti halaman memiliki responsivitas yang baik.
• INP di atas 200 milidetik dan di bawahnya atau pada 500 milidetik berarti daya respons halaman perlu ditingkatkan.
• INP di atas 500 milidetik berarti halaman memiliki responsivitas yang buruk.

Apa yang ada dalam interaksi?

Pemicu utama interaktivitas sering kali adalah JavaScript, meskipun browser menyediakan interaktivitas melalui kontrol yang tidak didukung oleh JavaScript, seperti kotak centang, tombol pilihan, dan kontrol yang didukung oleh CSS.

Sebagai tujuan INP, hanya jenis interaksi berikut yang diamati:

• Mengklik dengan mouse.
• Mengetuk perangkat dengan layar sentuh.
• Menekan tombol pada keyboard fisik atau di layar.

Interaksi terjadi di dokumen utama atau di iframe yang disematkan dalam dokumen, misalnya saat mengklik putar pada video yang disematkan. Pengguna akhir tidak akan mengetahui isi iframe atau tidak. Oleh karena itu, INP dalam iframe diperlukan untuk mengukur pengalaman pengguna di halaman tingkat atas. Karena JavaScript Web API tidak memiliki akses ke konten iframe, hal ini mungkin ditampilkan sebagai perbedaan antara CrUX dan RUM

Interaksi dapat terdiri dari beberapa peristiwa. Misalnya, penekanan tombol menyertakan peristiwa keydown, keypress, dan keyup. Interaksi ketuk berisi peristiwa pointerup dan pointerdown. Peristiwa dengan durasi terpanjang dalam interaksi adalah hal yang berkontribusi pada latensi total interaksi.

INP halaman dihitung saat pengguna keluar dari halaman. Hasilnya adalah nilai tunggal yang mewakili responsivitas halaman secara keseluruhan di sepanjang siklus prosesnya. INP yang rendah berarti halaman sangat responsif terhadap input pengguna.

Apa perbedaan INP dengan Penundaan Input Pertama (FID)?

INP adalah metrik pengganti untuk Penundaan Input Pertama (FID). Meskipun keduanya merupakan metrik responsivitas, FID hanya mengukur jeda input dari interaksi pertama di halaman. INP meningkatkan FID dengan mengamati semua interaksi pada halaman, mulai dari penundaan input, hingga waktu yang diperlukan untuk menjalankan pengendali peristiwa, dan akhirnya hingga browser menggambar frame berikutnya.

Perbedaan ini berarti bahwa INP dan FID adalah jenis metrik responsivitas yang berbeda. Jika FID adalah metrik responsivitas pemuatan yang dirancang untuk menilai kesan pertama halaman kepada pengguna, INP merupakan indikator yang lebih andal untuk responsivitas keseluruhan, terlepas dari kapan interaksi halaman terjadi.

Bagaimana jika tidak ada nilai INP yang dilaporkan?

Ada kemungkinan halaman tidak menampilkan nilai INP. Hal ini dapat terjadi karena beberapa alasan, termasuk:

• Halaman dimuat, tetapi pengguna tidak pernah mengklik, mengetuk, atau menekan tombol di keyboard.
• Halaman dimuat, tetapi pengguna berinteraksi dengannya menggunakan gestur yang tidak diukur, seperti men-scroll atau mengarahkan kursor ke elemen.
• Halaman sedang diakses oleh bot seperti crawler penelusuran atau browser headless yang belum diberi skrip untuk berinteraksi dengan halaman.

Cara mengukur INP

INP dapat diukur di lapangan dan di lab, asalkan Anda dapat menyimulasikan interaksi pengguna yang realistis.

Di lapangan

Idealnya, perjalanan Anda dalam mengoptimalkan INP akan dimulai dengan data lapangan. Data lapangan dari Pemantauan Pengguna Nyata (RUM) tidak hanya akan memberi Anda nilai INP halaman, tetapi juga data kontekstual yang menyoroti interaksi spesifik apa yang menjadi penyebab nilai INP itu sendiri, apakah interaksi terjadi selama atau setelah pemuatan halaman, jenis interaksi (klik, penekanan tombol, atau ketuk), dan pengaturan waktu berharga lainnya yang dapat membantu Anda mengidentifikasi bagian interaksi mana yang memengaruhi responsivitas.

Jika situs Anda memenuhi syarat untuk disertakan dalam Laporan Pengalaman Pengguna Chrome (CrUX), Anda dapat dengan cepat mendapatkan data kolom untuk INP melalui CrUX di PageSpeed Insights (dan Core Web Vitals lainnya). Setidaknya, Anda bisa mendapatkan gambaran tingkat origin tentang INP situs Anda, tetapi dalam beberapa kasus, Anda juga bisa mendapatkan data tingkat URL.

Namun, meskipun CrUX dapat memberi tahu Anda jika ada masalah, CrUX tidak dapat memberi tahu Anda penyebab masalah tersebut. Solusi RUM dapat membantu Anda menemukan detail selengkapnya tentang halaman, pengguna, atau interaksi pengguna yang mengalami masalah responsivitas. Mampu mengatribusikan INP ke interaksi individual dapat menghindari spekulasi dan upaya yang sia-sia.

Di laboratorium

Secara optimal, Anda perlu memulai pengujian di lab setelah Anda memiliki data kolom yang menunjukkan interaksi halaman yang lambat. Data lapangan akan memudahkan proses reproduksi interaksi bermasalah di lab.

Namun, sangat mungkin bahwa Anda tidak memiliki data {i>field<i}. Meskipun INP dapat diukur di beberapa alat lab, nilai INP yang dihasilkan untuk halaman selama pengujian lab akan bergantung pada interaksi yang dilakukan selama periode pengukuran. Perilaku pengguna tidak dapat diprediksi dan sangat bervariasi, yang berarti bahwa pengujian Anda di lab mungkin tidak menampilkan interaksi masalah dengan cara yang sama seperti yang dilakukan oleh data lapangan. Selain itu, beberapa alat lab tidak akan melaporkan INP halaman karena alat lab hanya mengamati pemuatan halaman tanpa interaksi apa pun. Dalam kasus tersebut, Total Blocking Time (TBT) mungkin merupakan metrik proxy yang wajar untuk INP, tetapi bukan merupakan pengganti INP.

Meskipun alat lab memiliki keterbatasan dalam menilai INP halaman, ada beberapa strategi untuk mereproduksi interaksi yang lambat di lab. Strateginya meliputi mengikuti alur pengguna umum dan menguji interaksi di sepanjang prosesnya, serta berinteraksi dengan halaman saat dimuat—saat thread utama sering kali tersibuk—untuk mengidentifikasi interaksi lambat selama bagian penting pengalaman pengguna tersebut.

Cara meningkatkan INP

Kumpulan panduan tentang cara mengoptimalkan INP tersedia untuk memandu Anda menjalani proses identifikasi interaksi yang lambat di lapangan, serta penggunaan data lab untuk membantu Anda mengidentifikasi penyebab dan mengoptimalkannya.

Log perubahan

Terkadang, bug ditemukan dalam API yang digunakan untuk mengukur metrik, dan terkadang dalam definisi metrik itu sendiri. Akibatnya, perubahan terkadang harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam laporan internal dan dasbor Anda.

Untuk membantu Anda mengelolanya, semua perubahan pada penerapan atau definisi metrik ini akan ditampilkan di Log perubahan ini.

Jika Anda memiliki masukan untuk metrik ini, berikan di grup Google untuk masukan web-vitals-feedback.

Menguji pengetahuan Anda