Performa framework modern pada metrik INP yang baru

Memahami cara metrik INP baru memengaruhi pengalaman situs yang dibuat menggunakan framework dan library JavaScript.

Leena Sohoni

Addy Osmani

Keen Yee Liau

Chrome baru-baru ini memperkenalkan metrik respons eksperimental baru dalam laporan Laporan UX Chrome. Metrik ini, yang sekarang kita kenal sebagai Interaction to Next Paint (INP) mengukur responsivitas keseluruhan terhadap interaksi pengguna di halaman. Hari ini kami ingin berbagi insight tentang di mana situs web yang dibuat menggunakan kerangka kerja JavaScript modern berkaitan dengan metrik ini. Kami ingin membahas mengapa INP relevan dengan framework dan cara Aurora serta framework bekerja untuk mengoptimalkan responsivitas.

Latar belakang

Chrome menggunakan Penundaan Input Pertama (FID) sebagai bagian dari Core Web Vitals (CWV) untuk mengukur responsivitas pemuatan situs. FID mengukur waktu tunggu dari interaksi pengguna pertama hingga saat browser dapat memproses pengendali peristiwa yang terhubung ke interaksi. Ini tidak termasuk waktu untuk memproses pengendali peristiwa, memproses interaksi berikutnya pada halaman yang sama, atau menggambar frame berikutnya setelah callback peristiwa dijalankan. Namun, responsivitas sangat penting untuk pengalaman pengguna di sepanjang siklus proses halaman karena pengguna menghabiskan sekitar 90% waktu di halaman setelah halaman dimuat.

INP mengukur waktu yang diperlukan halaman web untuk merespons interaksi pengguna mulai dari saat pengguna memulai interaksi hingga saat frame berikutnya digambar di layar. Dengan INP, kami berharap dapat mengaktifkan pengukuran gabungan untuk latensi yang dirasakan dari semua interaksi dalam siklus proses halaman. Kami yakin bahwa INP akan memberikan perkiraan waktu respons dan pemuatan halaman web yang lebih akurat.

Karena FID hanya mengukur penundaan input interaksi pertama, kemungkinan developer web belum secara proaktif mengoptimalkan interaksi berikutnya sebagai bagian dari proses peningkatan CWV mereka. Oleh karena itu, situs, terutama situs yang memiliki tingkat interaktivitas tinggi, harus mulai bekerja keras agar dapat melakukan dengan baik pada metrik ini.

Peran kerangka kerja

Karena banyak situs mengandalkan JavaScript untuk memberikan interaktivitas, skor INP terutama akan terpengaruh oleh jumlah JavaScript yang diproses di thread utama. Framework JavaScript adalah bagian penting dari pengembangan web front-end modern dan memberi developer abstraksi yang berharga untuk perutean, penanganan peristiwa, dan pengelompokkan kode JavaScript. Dengan demikian, mereka memiliki peran penting dalam mengoptimalkan daya respons dan pengalaman pengguna situs web yang menggunakannya.

Kerangka kerja mungkin telah mengambil langkah untuk responsivitas yang lebih baik dengan meningkatkan FID untuk situs web lebih awal. Namun, mereka sekarang harus menganalisis data metrik responsivitas yang tersedia dan berupaya mengatasi kesenjangan yang teridentifikasi. Secara umum, INP cenderung memiliki tingkat kelulusan yang lebih rendah, dan perbedaan dalam proses pengukuran memerlukan pengoptimalan kode tambahan. Tabel berikut merangkum alasannya.

Tim Aurora di Chrome bekerja sama dengan framework web open source untuk membantu developer meningkatkan berbagai aspek pengalaman pengguna, termasuk performa dan metrik CWV. Dengan diperkenalkannya INP, kami ingin bersiap menghadapi perubahan metrik CWV untuk situs berbasis framework. Kami telah mengumpulkan data berdasarkan metrik responsivitas eksperimental dalam laporan CrUX. Kami akan menyampaikan insight dan item tindakan untuk memudahkan transisi ke metrik INP untuk situs berbasis framework.

Data metrik responsivitas eksperimental

INP di bawah atau sama dengan 200 milidetik menunjukkan responsivitas yang baik. Data laporan CrUX dan Laporan Teknologi CWV untuk Juni 2023 memberi kita informasi berikut tentang responsivitas untuk framework JavaScript populer.

Tabel menunjukkan persentase origin pada setiap framework dengan skor responsivitas yang baik. Angkanya menggembirakan, tetapi memberi tahu kami bahwa masih ada banyak hal yang perlu ditingkatkan.

Bagaimana pengaruh JavaScript terhadap INP?

Nilai INP di lapangan berkorelasi dengan Total Blocking Time (TBT) yang diamati di lab. Hal ini dapat berarti bahwa skrip apa pun yang memblokir thread utama untuk durasi yang lama akan berdampak buruk bagi INP. Eksekusi JavaScript yang berat setelah interaksi apa pun dapat memblokir thread utama dalam jangka waktu yang lama dan menunda respons terhadap interaksi tersebut. Beberapa penyebab umum yang menyebabkan skrip pemblokiran adalah:

• JavaScript yang tidak dioptimalkan: Kode yang berlebihan atau strategi pemisahan kode dan pemuatan yang buruk dapat menyebabkan JavaScript menggembungkan dan memblokir thread utama dalam jangka waktu yang lama. Pemisahan kode, pemuatan progresif, dan memisahkan tugas yang panjang dapat meningkatkan waktu respons secara signifikan.

• Skrip pihak ketiga: Skrip pihak ketiga, yang terkadang tidak diperlukan untuk memproses interaksi (misalnya, skrip iklan), dapat memblokir thread utama dan menyebabkan penundaan yang tidak perlu. Memprioritaskan skrip penting dapat membantu mengurangi dampak negatif dari skrip pihak ketiga.

• Beberapa pengendali peristiwa: Beberapa pengendali peristiwa yang dikaitkan dengan setiap interaksi, masing-masing menjalankan skrip yang berbeda, dapat mengganggu satu sama lain dan menambah jumlah pengendali yang menyebabkan penundaan yang lama. Beberapa tugas ini mungkin tidak penting dan dapat dijadwalkan di web worker atau saat browser sedang tidak ada aktivitas.

• Overhead framework saat penanganan peristiwa: Framework mungkin memiliki fitur/sintaksis tambahan untuk penanganan peristiwa. Misalnya, Vue menggunakan v-on untuk menambahkan pemroses peristiwa ke elemen, sementara Angular menggabungkan pengendali peristiwa pengguna. Menerapkan fitur ini memerlukan kode framework tambahan di atas JavaScript biasa.

• Hidrasi: Saat menggunakan framework JavaScript, biasanya server membuat HTML awal untuk halaman yang kemudian perlu ditambah dengan pengendali peristiwa dan status aplikasi agar dapat interaktif di browser web. Kita menyebut proses ini sebagai hidrasi. Proses ini dapat menjadi proses yang berat selama pemuatan, tergantung pada waktu yang dibutuhkan JavaScript untuk memuat dan untuk menyelesaikan hidrasi. Hal ini juga dapat membuat halaman terlihat interaktif padahal tidak. Biasanya hidrasi terjadi secara otomatis selama pemuatan halaman atau lambat (misalnya, pada interaksi pengguna) dan dapat memengaruhi INP atau waktu pemrosesan karena penjadwalan tugas. Di library seperti React, Anda dapat memanfaatkan useTransition sehingga bagian render komponen berada di frame berikutnya dan efek samping yang lebih mahal diserahkan ke frame berikutnya. Dengan demikian, pembaruan dalam transisi yang menghasilkan pembaruan yang lebih mendesak seperti klik dapat menjadi pola yang baik untuk INP.

• Pengambilan data: Pengambilan data resource yang diperlukan secara agresif untuk navigasi berikutnya dapat meningkatkan performa jika dilakukan dengan benar. Namun, jika Anda mengambil data dan merender rute SPA secara sinkron, Anda dapat berdampak negatif pada INP karena semua upaya rendering yang mahal ini diselesaikan dalam satu frame. Bandingkan hal ini dengan tidak mengambil data rute Anda dan memulai pekerjaan yang diperlukan (misalnya, fetch()) dan membuka pemblokiran paint. Sebaiknya periksa kembali apakah pendekatan framework Anda terhadap pengambilan data memberikan UX yang optimal dan bagaimana (jika ada) hal ini dapat memengaruhi INP.

Mulai sekarang, untuk mendapatkan skor INP yang bagus, developer harus fokus pada peninjauan kode yang dijalankan setelah setiap interaksi pada halaman dan mengoptimalkan pemotongan, rehidrasi, strategi pemuatan, dan ukuran setiap update render() untuk skrip pihak pertama dan ketiga,

Bagaimana Aurora dan framework mengatasi masalah INP?

Aurora bekerja menggunakan framework dengan menggabungkan praktik terbaik untuk memberikan solusi siap pakai untuk masalah umum. Kami telah bekerja sama dengan Next.js, Nuxt.js, Gatsby, dan Angular dalam solusi yang menawarkan default yang kuat dalam framework untuk mengoptimalkan performa. Berikut adalah poin utama upaya kami dalam konteks ini:

• React dan Next.js: Komponen Skrip Next.js membantu mengatasi masalah yang disebabkan oleh pemuatan skrip pihak ketiga yang tidak efisien. Pemotong terperinci diperkenalkan di Next.js agar memungkinkan potongan yang lebih kecil untuk kode bersama. Hal ini membantu mengurangi jumlah kode umum yang tidak digunakan yang didownload di semua halaman. Kami juga bekerja sama dengan Next.js untuk menyediakan data INP sebagai bagian dari layanan Analytics mereka.

• Angular: Aurora berpartner dengan tim Angular untuk mempelajari rendering sisi server dan peningkatan hidrasi. Kami juga berencana melihat peningkatan dalam penanganan peristiwa dan deteksi perubahan untuk meningkatkan INP.

• Vue dan Nuxt.js: Kami sedang mempelajari cara-cara untuk berkolaborasi, terutama dalam hal pemuatan dan rendering skrip.

Bagaimana pendapat framework untuk meningkatkan INP?

React dan Next.js

Pemotong waktu React.js, yang diterapkan melalui startTransition dan Suspense, memungkinkan Anda memilih untuk mengaktifkan hidrasi selektif atau progresif. Ini berarti bahwa hidrasi bukanlah blok sinkron. Ini dilakukan dalam irisan kecil yang dapat diinterupsi kapan saja.

Tindakan ini akan membantu meningkatkan INP dan memungkinkan Anda merespons penekanan tombol, efek pengarahan kursor selama transisi, dan klik dengan lebih cepat. Hal ini juga membantu aplikasi React tetap responsif bahkan untuk transisi besar seperti pelengkapan otomatis.

Next.js telah menerapkan framework pemilihan rute baru yang menggunakan startTransition secara default untuk transisi rute. Hal ini memungkinkan pemilik situs Next.js untuk menggunakan pemotong waktu React dan meningkatkan responsivitas transisi rute.

Angular

Tim Angular sedang mempelajari beberapa ide yang juga akan membantu terkait INP:

• Tanpa zona: Mengurangi ukuran paket awal, dan kode yang diperlukan yang harus dimuat sebelum aplikasi dapat merender apa pun.
• Hidrasi: Hidrasi bergaya pulau untuk membatasi banyaknya aplikasi yang perlu dibangun untuk berinteraksi.
• Mengurangi overhead CD: Misalnya, membuat deteksi perubahan lebih murah, menemukan cara untuk memeriksa lebih sedikit aplikasi, dan memanfaatkan sinyal reaktif tentang apa yang berubah.
• Pemisahan kode yang lebih terperinci: Perkecil paket awal.
• Dukungan yang lebih baik untuk indikator pemuatan:: Misalnya, selama rendering ulang SSR, selama navigasi rute, dan dalam operasi pemuatan lambat.
• Alat pembuatan profil: Alat pengembangan yang lebih baik untuk memahami biaya interaksi, khususnya seputar biaya deteksi perubahan untuk interaksi tertentu.

Melalui peningkatan ini, kami dapat mengatasi berbagai masalah yang menyebabkan responsivitas dan pengalaman pengguna yang buruk, serta meningkatkan metrik CWV dan metrik INP baru untuk situs berbasis framework.

Kesimpulan

Kami harap skor INP dapat memberikan gambaran yang lebih baik bagi situs untuk meningkatkan responsivitas dan performa pada masa mendatang. Kami akan mengembangkan panduan INP yang sudah ada untuk memberikan lebih banyak tips yang dapat ditindaklanjuti bagi developer framework pada tahun 2023. Kami berharap dapat mencapainya dengan:

• Membuat saluran untuk memudahkan akses ke data lapangan di INP untuk framework dan developer web.
• Gunakan framework untuk membuat fitur yang akan meningkatkan INP secara default.

Kami menerima masukan dari pengguna framework saat mereka memulai perjalanan pengoptimalan INP.