Interaksi dengan Next Paint (INP)

Jeremy Wagner

Dukungan Browser

  • 96
  • 96
  • x
  • x

Sumber

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

Respons yang baik berarti halaman merespons interaksi dengan cepat. Saat halaman merespons interaksi, browser akan menyajikan masukan visual di frame berikutnya yang digambar. Masukan visual memberi tahu Anda jika, misalnya, item yang Anda tambahkan ke keranjang belanja online benar-benar ditambahkan, apakah menu navigasi seluler telah dibuka, 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 menyampaikan beberapa umpan balik visual awal dengan cepat untuk memberi tahu pengguna bahwa sesuatu sedang terjadi. Frame berikutnya yang akan digambar oleh browser adalah kesempatan paling awal untuk melakukan hal ini.

Oleh karena itu, intent INP bukan untuk mengukur semua efek akhir dari suatu interaksi—seperti pengambilan jaringan dan update UI dari operasi asinkron lainnya)—tetapi waktu kapan paint next diblokir. Dengan menunda respons visual, pengguna mungkin mendapatkan kesan bahwa halaman tidak merespons dengan cukup cepat, dan INP dikembangkan untuk membantu developer mengukur bagian ini dari pengalaman pengguna.

Dalam video berikut, contoh di sebelah kanan memberikan respons visual langsung saat akordeon terbuka. Respons yang buruk ditunjukkan dalam contoh di sebelah kiri, dan bagaimana hal itu dapat menciptakan pengalaman pengguna yang buruk.

Contoh responsivitas buruk versus baik. Di sebelah kiri, tugas yang panjang akan memblokir akordeon agar tidak dapat dibuka. Hal ini menyebabkan pengguna mengklik beberapa kali, dan mengira bahwa pengalamannya akan buruk. Saat thread utama berhasil mengejar, thread utama akan memproses input yang tertunda, sehingga akordeon terbuka dan tertutup secara tidak terduga. Di sebelah kanan, halaman yang lebih responsif akan membuka akordeon dengan cepat dan tanpa insiden.

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

Apa itu INP?

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

Detail tentang cara penghitungan INP

INP dihitung dengan mengamati semua interaksi yang dilakukan dengan suatu halaman. Untuk sebagian besar situs, interaksi dengan latensi terburuk dilaporkan sebagai INP.

Namun, untuk halaman dengan interaksi dalam jumlah besar, gangguan acak dapat mengakibatkan interaksi berlatensi tinggi yang tidak biasa pada halaman yang responsif. Makin banyak interaksi yang terjadi di halaman tertentu, makin besar kemungkinan terjadinya hal ini.

Untuk memberikan ukuran yang lebih baik tentang responsivitas yang sebenarnya untuk halaman dengan jumlah interaksi yang tinggi, kami mengabaikan satu interaksi tertinggi untuk setiap 50 interaksi. Sebagian besar pengalaman halaman tidak memiliki lebih dari 50 interaksi, sehingga interaksi terburuk paling sering dilaporkan. Persentil ke-75 dari semua kunjungan halaman kemudian dilaporkan seperti biasa, yang selanjutnya menghapus pencilan untuk memberikan nilai yang dialami sebagian besar pengguna atau lebih baik.

Interaksi adalah sekumpulan pengendali peristiwa yang diaktifkan selama gestur pengguna logis yang sama. Misalnya, interaksi "ketuk" 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 durasi terlama grup pengendali peristiwa yang mendorong interaksi, dari saat pengguna memulai interaksi hingga saat browser menggambar frame berikutnya.

Berapa skor INP yang bagus?

Menyematkan label seperti "baik" atau "buruk" pada metrik responsivitas sulit dilakukan. Di satu sisi, Anda ingin mendorong praktik pengembangan yang memprioritaskan responsivitas yang baik. Di sisi lain, Anda harus memperhitungkan fakta bahwa ada variabilitas yang signifikan 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 dicatat 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 bawah atau pada 500 milidetik berarti daya respons halaman perlu peningkatan.
  • INP di atas 500 milidetik berarti halaman memiliki responsivitas yang buruk.
Nilai INP yang baik adalah 200 milidetik atau kurang, nilai yang buruk lebih besar dari 500 milidetik, dan apa pun di antaranya perlu ditingkatkan.
Nilai INP yang baik adalah 200 milidetik atau kurang. Nilai yang buruk lebih besar dari 500 milidetik.

Apa yang dimaksud dengan interaksi?

Diagram yang menggambarkan interaksi pada thread utama. Pengguna membuat input saat memblokir tugas yang berjalan. Input tertunda hingga tugas tersebut selesai, setelah itu pointerup, mouseup, dan pengendali peristiwa klik dijalankan, lalu pekerjaan rendering dan menggambar dimulai hingga frame berikutnya ditampilkan.
Umur dari suatu interaksi. Penundaan input terjadi hingga pengendali peristiwa mulai berjalan, mungkin disebabkan oleh faktor seperti tugas yang berjalan lama di thread utama. Callback pengendali peristiwa interaksi kemudian berjalan, dan penundaan terjadi sebelum frame berikutnya ditampilkan.

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

Untuk tujuan INP, hanya jenis interaksi berikut yang diamati:

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

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

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

Penggambaran interaksi yang lebih kompleks yang berisi dua interaksi. Yang pertama adalah peristiwa mousedown, yang menghasilkan frame sebelum tombol mouse dihentikan, yang memulai lebih banyak pekerjaan hingga frame lain ditampilkan sebagai hasilnya.
Penggambaran interaksi dengan beberapa pengendali peristiwa. Bagian pertama dari interaksi menerima input ketika pengguna mengklik tombol {i>mouse<i}. Namun, sebelum mereka melepaskan tombol mouse, sebuah bingkai akan ditampilkan. Saat pengguna melepaskan tombol mouse, serangkaian pengendali peristiwa lainnya harus dijalankan sebelum frame berikutnya ditampilkan.

INP halaman dihitung saat pengguna keluar dari halaman. Hasilnya adalah satu nilai yang mewakili responsivitas keseluruhan halaman 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 penerus untuk Penundaan Input Pertama (FID). Meskipun keduanya merupakan metrik responsivitas, FID hanya mengukur penundaan input dari interaksi pertama di halaman. INP meningkatkan FID dengan mengamati semua interaksi di halaman, mulai dari penundaan input, waktu yang diperlukan untuk menjalankan pengendali peristiwa, dan terakhir hingga browser menggambar frame berikutnya.

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

Bagaimana jika tidak ada nilai INP yang dilaporkan?

Halaman mungkin tidak menampilkan nilai INP. Ini dapat terjadi karena beberapa alasan, termasuk:

  • Halaman telah dimuat, tetapi pengguna tidak pernah mengklik, mengetuk, atau menekan tombol di keyboard mereka.
  • 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 menggunakan skrip untuk berinteraksi dengan halaman.

Cara mengukur INP

INP dapat diukur baik di lapangan maupun di lab menggunakan berbagai alat.

Di lapangan

Idealnya, perjalanan Anda dalam mengoptimalkan INP akan dimulai dengan data lapangan. Intinya, data kolom dari Real User Monitoring (RUM) tidak hanya memberikan nilai INP halaman, tetapi juga data kontekstual yang menyoroti interaksi spesifik yang bertanggung jawab atas 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 Data Web Inti lainnya). Setidaknya, Anda bisa mendapatkan gambaran tingkat asal tentang INP situs, tetapi dalam beberapa kasus, Anda juga bisa mendapatkan data tingkat URL.

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

Di laboratorium

Secara optimal, sebaiknya mulai pengujian di lab setelah Anda memiliki data kolom yang menunjukkan bahwa halaman memiliki interaksi yang lambat. Namun, jika Anda tidak memiliki data kolom, ada beberapa strategi untuk mereproduksi interaksi lambat di lab. Strategi ini meliputi mengikuti alur pengguna umum dan menguji interaksi di sepanjang proses, serta berinteraksi dengan halaman saat dimuat—ketika thread utama sering kali tersibuk—untuk mengidentifikasi interaksi yang lambat selama bagian penting dari pengalaman pengguna.

Cara meningkatkan INP

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

Log perubahan

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

Untuk membantu Anda mengelola hal ini, 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 web-vitals-feedback.

Menguji pengetahuan Anda

Apa tujuan utama metrik INP?

Untuk mengukur waktu yang diperlukan saat konten pertama halaman ditampilkan.
Salah - Deskripsi ini menjelaskan First Contentful Paint
Untuk mengukur stabilitas visual halaman dan meminimalkan pergeseran tata letak yang tidak terduga.
Salah - Deskripsi ini menjelaskan Pergeseran Tata Letak Kumulatif
Untuk menilai waktu yang diperlukan halaman untuk menjadi interaktif sepenuhnya.
Salah - Hal ini terkait dengan Waktu untuk Interaktif, tetapi INP secara khusus berfokus pada responsivitas terhadap input pengguna
Untuk meminimalkan waktu dari saat pengguna memulai interaksi hingga frame berikutnya selesai digambar, untuk semua atau sebagian besar interaksi yang dimulai pengguna.
Benar.

Manakah dari jenis interaksi berikut yang diamati untuk tujuan penghitungan INP? (Pilih semua yang sesuai).

Mengklik dengan mouse.
Benar.
Men-scroll halaman dengan roda mouse atau trackpad.
Salah - INP tidak mempertimbangkan untuk men-scroll
Mengetuk layar sentuh.
Benar.
Mengarahkan kursor mouse ke elemen.
Salah - INP tidak mempertimbangkan pengarahan kursor
Menekan tombol di keyboard.
Benar.
Memperbesar atau memperkecil halaman.
Salah - INP tidak mempertimbangkan zoom

Bagaimana "latensi" interaksi didefinisikan untuk INP?

Jumlah waktu bagi browser untuk memproses pengendali peristiwa dari interaksi.
Salah - Ini hanya memperhitungkan durasi pemrosesan, bukan penundaan input atau waktu untuk menampilkan frame berikutnya
Waktu rata-rata yang diperlukan untuk semua interaksi pada halaman untuk menghasilkan respons visual.
Salah - INP berfokus pada interaksi terlama, bukan rata-rata
Waktu yang diperlukan browser untuk mulai memproses pengendali peristiwa yang terkait dengan interaksi.
Salah - Ini hanya memperhitungkan penundaan input, bukan waktu pemrosesan dan rendering
Waktu dari awal interaksi hingga saat frame berikutnya ditampilkan sepenuhnya.
Benar.

Apa perbedaan antara INP dan FID?

INP mengukur waktu yang diperlukan konten pertama dari halaman untuk ditampilkan, sedangkan FID mengukur responsivitas terhadap input pengguna.
Salah - Deskripsi ini menjelaskan First Contentful Paint, bukan INP
INP mempertimbangkan durasi penuh semua interaksi, sedangkan FID hanya mengukur penundaan input interaksi pertama.
Benar.
INP dan FID mengukur stempel waktu yang berbeda pada saat halaman menjadi interaktif.
Salah - INP dan FID adalah ukuran seberapa cepat halaman merespons interaksi, terlepas dari kapan interaksi tersebut terjadi
Tidak ada perbedaan; INP dan FID hanyalah dua nama yang berbeda untuk metrik yang sama.
Salah - Keduanya memiliki definisi yang berbeda

Dalam keadaan apa data INP mungkin tidak tersedia untuk halaman di alat seperti PageSpeed Insights?

Halaman menggunakan library pengukuran performa kustom yang tidak melaporkan data INP.
Salah - INP otomatis diukur menggunakan API platform web dan tidak mengandalkan halaman yang melaporkan performa mereka secara mandiri melalui library kustom.
Data interaksi dari pengguna Chrome tidak cukup untuk menghitung nilai INP yang berarti dalam set data CrUX.
Benar.
Pengguna hanya berinteraksi dengan halaman melalui scrolling dan pengarahan kursor, yang tidak dipertimbangkan untuk INP.
Benar.
Halaman ini dibuat menggunakan framework yang otomatis mengoptimalkan INP, sehingga Anda tidak perlu melaporkannya.
Salah - Framework dapat membantu mengatasi INP, tetapi metrik masih relevan dan dilaporkan jika data tersedia

Apa strategi yang paling efektif untuk mereproduksi interaksi lambat di lingkungan lab?

Menyimulasikan perangkat kelas atas dengan koneksi jaringan yang lambat dan tidak dapat diandalkan untuk menciptakan kondisi yang menantang.
Salah - Meskipun jaringan dapat berperan, kemampuan perangkat cenderung mengekspos interaksi yang lambat
Menguji interaksi hanya setelah halaman dimuat sepenuhnya dan tidak ada aktivitas.
Salah - Interaksi ini mungkin melewatkan interaksi yang lambat selama pemuatan
Berinteraksi dengan halaman selama pemuatan dan mengikuti alur pengguna umum untuk mengidentifikasi potensi bottleneck.
Benar.
Berfokus pada interaksi kasus ekstrem dan kompleks yang cenderung tidak ditemui oleh sebagian besar pengguna.
Salah - Alur penggunaan umum lebih relevan untuk mengidentifikasi masalah INP umum

✨ Kuis ini dibuat oleh Gemini 1.5 dan ditinjau oleh manusia. Berikan masukan Anda