Interaksi dengan Next Paint (INP)

Dukungan Browser

  • Chrome: 96.
  • Edge: 96.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.x

Sumber

Data penggunaan Chrome menunjukkan bahwa 90% waktu pengguna di halaman dihabiskan setelah halaman dimuat. Oleh karena itu, pengukuran responsivitas yang cermat sepanjang 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 menyajikan masukan visual pada frame berikutnya yang digambarnya. Masukan visual memberi tahu Anda, misalnya, apakah item yang Anda tambahkan ke keranjang belanja online benar-benar ditambahkan, apakah menu navigasi seluler telah terbuka, apakah konten formulir login sedang 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 bukan untuk mengukur semua efek akhir dari interaksi—seperti pengambilan jaringan dan pembaruan UI dari operasi asinkron lainnya)—tetapi waktu saat gambar 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. Responsivitas yang buruk ditunjukkan dalam contoh di sebelah kiri, dan bagaimana hal itu dapat menciptakan pengalaman pengguna yang buruk.

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

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

Apa yang dimaksud dengan INP?

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

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

Namun, untuk halaman dengan interaksi dalam jumlah besar, gangguan acak dapat menyebabkan interaksi dengan latensi tinggi yang tidak biasa di halaman yang responsif. Semakin banyak interaksi yang terjadi di halaman tertentu, semakin besar kemungkinan hal ini terjadi.

Untuk memberikan pengukuran responsivitas yang lebih baik 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 lebih lanjut menghapus outlier untuk memberikan nilai yang dialami sebagian besar pengguna atau lebih baik.

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

Seperti apa skor INP yang baik?

Menyematkan label seperti "baik" 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, nilai minimum yang baik untuk diukur adalah persentil ke-75 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 responsivitas halaman perlu ditingkatkan.
  • 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 nilai di antara keduanya perlu ditingkatkan.
Nilai INP yang baik adalah 200 milidetik atau kurang. Nilai buruk lebih besar dari 500 milidetik.

Apa yang ada dalam interaksi?

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

Penggerak 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.

Sesuai dengan tujuan INP, hanya jenis interaksi berikut yang diamati:

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

Interaksi terjadi di dokumen utama atau di iframe yang disematkan dalam dokumen—misalnya mengklik putar pada video tersemat. Pengguna akhir tidak akan mengetahui apa yang ada di iframe atau tidak, sehingga 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 terpanjang 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 dilepaskan, yang memulai lebih banyak pekerjaan hingga frame lain ditampilkan sebagai hasilnya.
Penggambaran interaksi dengan beberapa pengendali peristiwa. Bagian pertama dari interaksi menerima input saat pengguna mengklik ke bawah pada tombol mouse. Namun, sebelum pengguna melepaskan tombol mouse, sebuah frame akan ditampilkan. Saat pengguna melepaskan tombol mouse, serangkaian pengendali peristiwa lainnya harus berjalan sebelum frame berikutnya ditampilkan.

INP halaman dihitung saat pengguna meninggalkan halaman. Hasilnya adalah nilai tunggal yang mewakili responsivitas halaman secara keseluruhan di sepanjang siklus prosesnya. INP yang rendah berarti halaman merespons input pengguna dengan andal.

Apa perbedaan INP dengan Penundaan Input Pertama (FID)?

INP adalah metrik penerus Penundaan Input Pertama (FID). Meskipun keduanya adalah metrik responsivitas, FID hanya mengukur penundaan 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 bagi pengguna, INP adalah indikator responsivitas keseluruhan yang lebih andal, 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 memiliki skrip untuk berinteraksi dengan halaman.

Cara mengukur INP

INP dapat diukur di lapangan dan di laboratorium, sejauh 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 Data Web Inti 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 masalahnya. Solusi RUM dapat membantu Anda menemukan detail selengkapnya tentang halaman, pengguna, atau interaksi pengguna yang mengalami masalah responsivitas. Kemampuan untuk mengatribusikan INP ke setiap interaksi akan menghindari tebakan dan membuang-buang tenaga.

Di laboratorium

Sebaiknya, Anda mulai melakukan pengujian di lab setelah memiliki data lapangan yang menunjukkan bahwa halaman memiliki interaksi yang lambat. Data lapangan akan membuat pekerjaan mereproduksi interaksi yang bermasalah di lab menjadi tugas yang jauh lebih mudah.

Namun, Anda mungkin tidak memiliki data kolom. 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 dapat tidak dapat diprediksi dan sangat bervariasi, yang berarti pengujian Anda di lab mungkin tidak menampilkan interaksi masalah dengan cara yang sama seperti data lapangan. Selain itu, beberapa alat lab tidak akan melaporkan INP halaman karena 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 selama proses berlangsung, serta berinteraksi dengan halaman saat dimuat—saat thread utama sering kali tersibuk—untuk mengidentifikasi interaksi yang lambat selama bagian penting dari pengalaman pengguna tersebut.

Cara meningkatkan INP

Kumpulan panduan tentang cara mengoptimalkan INP tersedia untuk memandu Anda melalui proses identifikasi interaksi lambat di lapangan, dan menggunakan data lab untuk membantu Anda mengidentifikasi penyebabnya dan mengoptimalkannya.

Log perubahan

Terkadang, bug ditemukan di API yang digunakan untuk mengukur metrik, dan terkadang di definisi metrik itu sendiri. Oleh karena itu, terkadang perubahan harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam laporan dan dasbor internal 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

Apa sasaran utama metrik INP?

Untuk mengukur waktu yang diperlukan agar konten pertama halaman ditampilkan.
Untuk meminimalkan waktu sejak pengguna memulai interaksi hingga frame berikutnya digambar, untuk semua atau sebagian besar interaksi yang dimulai pengguna.
Untuk mengukur stabilitas visual halaman dan meminimalkan pergeseran tata letak yang tidak terduga.
Untuk menilai waktu yang diperlukan halaman untuk menjadi interaktif sepenuhnya.

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

Men-scroll halaman dengan roda mouse atau trackpad.
Memperbesar atau memperkecil halaman.
Mengklik dengan mouse.
Menekan tombol pada keyboard.
Mengarahkan kursor mouse ke elemen.
Mengetuk layar sentuh.

Bagaimana "latensi" interaksi ditentukan untuk INP?

Waktu dari awal interaksi hingga saat frame berikutnya ditampilkan sepenuhnya.
Waktu rata-rata yang diperlukan semua interaksi di halaman untuk menghasilkan respons visual.
Waktu yang diperlukan browser untuk mulai memproses pengendali peristiwa yang terkait dengan interaksi.
Jumlah waktu yang diperlukan browser untuk memproses pengendali peristiwa interaksi.

Apa perbedaan antara INP dan FID?

Tidak ada perbedaan; INP dan FID hanyalah dua nama yang berbeda untuk metrik yang sama.
INP mengukur waktu yang diperlukan untuk menampilkan konten pertama halaman, sedangkan FID mengukur responsivitas terhadap input pengguna.
INP mempertimbangkan durasi penuh semua interaksi, sedangkan FID hanya mengukur penundaan input interaksi pertama.
INP dan FID mengukur stempel waktu yang berbeda saat halaman menjadi interaktif.

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

Halaman ini dibuat menggunakan framework yang otomatis mengoptimalkan INP, sehingga tidak perlu melaporkannya.
Pengguna hanya berinteraksi dengan halaman hanya dengan men-scroll dan mengarahkan kursor, yang tidak dipertimbangkan untuk INP.
Halaman ini menggunakan library pengukuran performa kustom yang tidak melaporkan data INP.
Tidak ada cukup data interaksi dari pengguna Chrome untuk menghitung nilai INP yang bermakna dalam set data CrUX.

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

Berinteraksi dengan halaman selama pemuatan dan mengikuti alur penggunaan umum untuk mengidentifikasi potensi bottleneck.
Simulasi perangkat kelas atas dengan koneksi jaringan yang lambat dan tidak dapat diandalkan untuk menciptakan kondisi yang menantang.
Menguji interaksi hanya setelah halaman dimuat sepenuhnya dan tidak ada aktivitas.
Berfokus pada interaksi kasus ekstrem yang kompleks yang kemungkinan tidak akan ditemui oleh sebagian besar pengguna.

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