Halaman ini diterjemahkan oleh Cloud Translation API.

Interaksi dengan Next Paint (INP)

Jeremy Wagner

Dukungan Browser

Interaction to Next Paint (INP) adalah metrik Core Web Vitals stabil yang menilai responsivitas halaman menggunakan data dari Event Timing API. INP mengamati latensi semua interaksi klik, ketuk, dan keyboard dengan halaman selama masa aktifnya, dan melaporkan durasi paling lama, dengan mengabaikan outlier. INP yang rendah berarti halaman secara konsisten dapat merespons sebagian besar interaksi pengguna dengan cepat.

Respons yang baik berarti halaman merespons interaksi dengan cepat. Saat halaman merespons interaksi, browser akan menampilkan masukan visual di frame berikutnya yang dirender untuk menunjukkan bahwa interaksi berhasil. Misalnya, fitur ini dapat memberikan masukan tentang hal berikut:

Apakah item yang Anda tambahkan ke keranjang belanja online benar-benar ditambahkan.
Apakah menu navigasi seluler telah terbuka.
Apakah konten proses masuk telah diautentikasi oleh server.

Beberapa interaksi secara alami memerlukan waktu lebih lama daripada yang lain, tetapi untuk interaksi yang sangat kompleks, penting untuk menyampaikan beberapa masukan visual awal dengan cepat untuk memberi tahu pengguna tentang sesuatu yang sedang terjadi. Waktu hingga pengecatan berikutnya adalah kesempatan paling awal untuk melakukan ini. Oleh karena itu, tujuan INP adalah untuk mengukur tidak semua efek akhir dari interaksi (seperti pengambilan jaringan dan update UI dari operasi asinkron lainnya), tetapi waktu pemblokiran paint next. Dengan menunda masukan visual, Anda membuat pengguna berpikir bahwa halaman tidak merespons tindakan mereka.

Tujuan INP adalah meminimalkan waktu dari saat pengguna memulai interaksi hingga frame berikutnya digambar, untuk semua atau sebagian besar interaksi yang dimulai pengguna.

Contoh responsivitas buruk versus baik. Di sebelah kiri, tugas yang panjang akan memblokir akordeon agar tidak terbuka. Tindakan ini menyebabkan pengguna mengklik beberapa kali, dan menganggap bahwa pengalamannya akan buruk. Setelah berhasil menangkap, 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.

Catatan 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 menghasilkan interaksi latensi tinggi yang tidak biasa pada situs yang responsif. Makin banyak interaksi, makin besar kemungkinan hal ini terjadi. Untuk mengatasi hal ini, dan memberikan ukuran respons yang lebih baik untuk jenis halaman tersebut, kami mengabaikan satu interaksi tertinggi untuk setiap 50 interaksi. Karena sebagian besar pengalaman halaman tidak memiliki lebih dari 50 interaksi, browser hampir selalu tetap melaporkan interaksi terburuk. Persentil ke-75 dari semua kunjungan halaman kemudian dilaporkan seperti biasa, yang selanjutnya menghapus pencilan untuk memberikan nilai yang lebih merepresentasikan pengalaman pengguna umum.

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 kombinasi dari hal-hal ini.

Latensi interaksi terdiri dari durasi terpanjang dari grup pengendali peristiwa yang mendorong interaksi, dari saat pengguna memulai interaksi hingga saat frame berikutnya ditampilkan dengan masukan visual.

Poin utama: Untuk detail selengkapnya tentang cara pengukuran INP, lihat "Apa yang ada dalam interaksi?".

Berapa skor INP yang bagus?

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 tersegmentasi di seluruh perangkat seluler dan desktop:

INP yang sama dengan atau kurang dari 200 milidetik berarti halaman Anda memiliki responsivitas yang baik.
INP antara 200 milidetik dan 500 milidetik berarti responsivitas halaman Anda perlu ditingkatkan.
INP yang lebih besar dari 500 milidetik berarti halaman Anda 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 dari 500 md.

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 berlangsung hingga pengendali peristiwa mulai berjalan, yang mungkin disebabkan oleh faktor seperti tugas yang berjalan lama di thread utama. Pengendali peristiwa interaksi kemudian berjalan, dan penundaan lainnya 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.

Poin utama: Pengarahan kursor dan scroll tidak memengaruhi INP. Namun, men-scroll dengan keyboard (spasi, page up, page down, dan sebagainya) melibatkan tombol, yang dapat memicu peristiwa lain yang diukur oleh INP. Scrolling yang dihasilkan tidak diperhitungkan dalam penghitungan INP.

Interaksi terjadi di dokumen utama atau di iframe yang disematkan dalam dokumen—misalnya, mengklik putar pada video yang disematkan. Karena pengguna akhir tidak mengetahui bagian halaman mana yang berada dalam iframe, Anda perlu mengukur INP dalam iframe agar dapat mengukurnya secara akurat untuk seluruh halaman. Namun, JavaScript Web API tidak memiliki akses ke konten iframe, dan mungkin tidak dapat mengukur INP dalam iframe. Ini menunjukkan perbedaan antara CrUX dan RUM.

Interaksi dapat terdiri dari beberapa peristiwa. Misalnya, penekanan tombol mencakup peristiwa keydown, keypress, dan keyup, dan interaksi ketuk mencakup peristiwa pointerup dan pointerdown. Peristiwa dengan durasi terlama dalam interaksi dipilih sebagai 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. — Saat pengguna menekan tombol mouse untuk mengklik, browser akan menangani interaksi dan menyajikan frame masukan visual. Saat pengguna melepaskan tombol mouse, serangkaian pengendali peristiwa lainnya akan berjalan sebelum browser dapat menampilkan frame lain.

INP dihitung saat pengguna keluar dari halaman, sehingga menghasilkan 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 interaksi pertama di halaman. INP meningkatkan FID dengan mempertimbangkan semua interaksi 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 merupakan indikator responsivitas keseluruhan yang lebih dapat diandalkan, terlepas dari kapan interaksi halaman terjadi.

Bagaimana jika tidak ada nilai INP yang dilaporkan?

Halaman mungkin tidak menampilkan nilai INP. Hal ini dapat terjadi karena sejumlah alasan, termasuk hal berikut:

Halaman telah dimuat, tetapi pengguna tidak pernah berinteraksi dengan halaman tersebut.
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.

Poin utama: Cara terbaik untuk mengukur INP situs Anda adalah dengan mengumpulkan metrik dari pengguna sebenarnya di lapangan. Jika Anda terbiasa mengandalkan data lab untuk menilai performa, sebaiknya baca Alasan data lab dan lapangan bisa berbeda (dan tindakan yang harus dilakukan).

Di lapangan

Idealnya, perjalanan Anda untuk mengoptimalkan INP 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, baik interaksi terjadi selama atau setelah pemuatan halaman, jenis interaksi (klik, penekanan tombol, atau ketuk), dan informasi berharga lainnya.

Jika situs Anda memenuhi syarat untuk disertakan dalam Laporan Pengalaman Pengguna Chrome (CrUX), Anda bisa dengan cepat mendapatkan data kolom INP melalui CrUX di PageSpeed Insights, bersama dengan data tentang 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 halaman.

Namun, meskipun CrUX dapat memberi tahu Anda bahwa ada masalah di tingkat tinggi, detail tersebut sering kali tidak memberikan cukup detail untuk membantu sepenuhnya memahami apa masalahnya. Solusi RUM dapat membantu Anda menemukan detail lebih lanjut tentang halaman, pengguna, atau interaksi pengguna yang mengalami interaksi lambat. Mampu mengatribusikan INP ke interaksi individual membantu menghindari spekulasi dan usaha yang sia-sia.

Di laboratorium

Secara optimal, sebaiknya mulai pengujian di lab setelah Anda memiliki data kolom yang menunjukkan interaksi yang lambat. Namun, jika tidak ada data kolom, ada beberapa strategi untuk mereproduksi interaksi lambat di lab. Strategi ini mencakup mengikuti alur penggunaan umum dan menguji interaksi di sepanjang prosesnya, serta berinteraksi dengan halaman selama pemuatan, saat thread utama sering kali paling sibuk, untuk mengekspos interaksi yang lambat selama bagian penting dari pengalaman pengguna tersebut.

Cara meningkatkan INP

Lihat koleksi panduan kami tentang cara mengoptimalkan INP untuk mendapatkan panduan cara mengidentifikasi interaksi lambat di lapangan dan menggunakan data lab untuk mengoptimalkannya.

Log perubahan

Terkadang, bug ditemukan di API yang digunakan untuk mengukur metrik, dan terkadang dalam 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 mengelola hal ini, semua perubahan pada penerapan atau definisi metrik ini ditampilkan di Log perubahan ini.

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