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 dengan cepat interaksi yang dilakukan dengan halaman tersebut. Saat halaman merespons interaksi, hasilnya adalah masukan visual, yang dibacakan oleh browser di frame berikutnya yang dipresentasikan browser. 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 akan memakan waktu lebih lama daripada yang lain, tetapi untuk interaksi yang sangat kompleks, penting untuk menyampaikan beberapa masukan visual awal dengan cepat sebagai isyarat kepada pengguna bahwa sesuatu sedang terjadi. Waktu hingga pengecatan berikutnya adalah kesempatan paling awal untuk melakukan ini. Oleh karena itu, intent INP bukan untuk mengukur semua efek akhir dari interaksi (seperti pengambilan jaringan dan update UI dari operasi asinkron lainnya), tetapi waktu ketika paint next diblokir. Dengan menunda tanggapan visual, Anda mungkin memberikan kesan kepada pengguna bahwa halaman tidak merespons tindakan mereka.
Tujuan INP adalah untuk memastikan waktu dari saat pengguna memulai interaksi hingga {i>frame <i}berikutnya digambar adalah sesingkat mungkin, untuk semua atau sebagian besar interaksi yang dilakukan pengguna.
Dalam video berikut, contoh di sebelah kanan memberikan respons visual langsung saat akordeon terbuka. Hal ini juga menunjukkan bagaimana responsivitas yang buruk dapat menyebabkan beberapa respons yang tidak diinginkan terhadap input karena pengguna merasa bahwa pengalamannya tidak sesuai harapan.
Artikel ini menjelaskan cara kerja INP, cara mengukurnya, dan 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.
Seperti yang disebutkan di atas, 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 menghasilkan interaksi yang sangat tinggi pada situs yang responsif. Semakin banyak interaksi, semakin 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. Sebagian besar pengalaman halaman tidak memiliki lebih dari 50 interaksi sehingga akan melaporkan interaksi terburuk. 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 terpanjang dari grup pengendali peristiwa yang mendorong interaksi, dari saat pengguna memulai interaksi hingga saat frame berikutnya ditampilkan dengan masukan visual.
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 Anda memiliki responsivitas yang baik.
- INP di atas 200 milidetik dan di bawah atau pada 500 milidetik berarti daya respons halaman Anda perlu peningkatan.
- INP di atas 500 milidetik berarti halaman Anda memiliki responsivitas yang buruk.
Apa yang dimaksud dengan interaksi?
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.
Sejauh berjalannya 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 di dalam iframe atau tidak. Oleh karena itu, INP dalam iframe diperlukan untuk mengukur pengalaman pengguna untuk halaman tingkat atas. Perlu diperhatikan bahwa JavaScript Web API tidak akan memiliki akses ke konten iframe, sehingga mungkin tidak dapat mengukur INP dalam iframe dan hal ini akan ditampilkan sebagai perbedaan antara CrUX dan RUM.
Interaksi dapat terdiri dari dua bagian, masing-masing dengan beberapa peristiwa. Misalnya, tombol terdiri dari peristiwa keydown, keypress, dan keyup. Interaksi ketuk berisi peristiwa pointerup dan pointerdown. Peristiwa dengan durasi terlama dalam interaksi dipilih sebagai latensi interaksi.
INP dihitung saat pengguna meninggalkan halaman, menghasilkan satu nilai yang mewakili responsivitas keseluruhan halaman di seluruh siklus proses halaman. INP yang rendah berarti halaman sangat responsif terhadap input pengguna.
Apa perbedaan INP dengan Penundaan Input Pertama (FID)?
Jika INP mempertimbangkan semua interaksi halaman, Penundaan Input Pertama (FID) hanya memperhitungkan interaksi pertama. Ini juga hanya mengukur penundaan input interaksi pertama, bukan waktu yang diperlukan untuk menjalankan pengendali peristiwa, atau penundaan dalam menampilkan frame berikutnya.
Mengingat bahwa FID juga merupakan metrik respons pemuatan, alasan di baliknya adalah jika interaksi pertama yang dilakukan dengan halaman dalam fase pemuatan memiliki sedikit atau tidak ada penundaan input yang terasa, halaman tersebut telah memberikan kesan pertama yang baik.
INP lebih dari sekadar kesan pertama. Dengan mengambil sampel semua interaksi, tingkat respons dapat dinilai secara komprehensif, menjadikan INP sebagai indikator responsivitas keseluruhan yang lebih andal daripada FID.
Bagaimana jika tidak ada nilai INP yang dilaporkan?
Halaman mungkin tidak menampilkan nilai INP. Error ini dapat terjadi karena beberapa alasan:
- Halaman telah dimuat, tetapi pengguna tidak pernah mengklik, mengetuk, atau menekan tombol di keyboard mereka.
- Halaman telah dimuat, tetapi pengguna berinteraksi dengan halaman menggunakan gestur yang tidak melibatkan klik, ketukan, atau penggunaan keyboard. Misalnya, men-scroll atau mengarahkan kursor ke elemen tidak memengaruhi cara penghitungan INP.
- 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 informasi berharga lainnya.
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 halaman.
Namun, meskipun CrUX berguna untuk memberi tahu Anda bahwa ada masalah di tingkat tinggi, detail ini sering kali tidak memberikan detail yang memadai untuk membantu sepenuhnya memahami apa masalahnya. Solusi RUM dapat membantu Anda melihat perincian lebih detail tentang halaman, pengguna, atau interaksi pengguna yang mengalami interaksi lambat. 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 lapangan yang menunjukkan bahwa Anda memiliki interaksi yang lambat. Namun, jika tidak ada data lapangan, ada beberapa strategi untuk mereproduksi interaksi lambat di lab. Strategi tersebut mencakup mengikuti alur pengguna umum dan menguji interaksi di sepanjang prosesnya, serta berinteraksi dengan halaman selama pemuatan—ketika thread utama sering kali tersibuk—untuk memunculkan interaksi lambat selama bagian penting pada pengalaman pengguna.
Cara meningkatkan INP
Kumpulan panduan tentang cara mengoptimalkan INP tersedia untuk memandu Anda menjalani proses identifikasi interaksi yang lambat di lapangan dan menggunakan data lab untuk melihat perincian dan mengoptimalkannya dalam berbagai cara.
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 memiliki masukan untuk metrik ini, Anda dapat memberikannya di grup Google web-vitals-feedback.