Pahami pengaruh metrik INP baru terhadap pengalaman situs yang dibuat menggunakan framework dan library JavaScript.
Chrome baru-baru ini memperkenalkan metrik responsivitas 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 membagikan insight tentang posisi situs yang dibuat menggunakan framework JavaScript modern sehubungan dengan metrik ini. Kita ingin membahas mengapa INP relevan dengan framework dan cara kerja Aurora dan framework untuk mengoptimalkan responsivitas.
Latar belakang
Chrome menggunakan First Input Delay (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 tersebut. Waktu ini tidak mencakup waktu untuk memproses pengendali peristiwa, memproses interaksi berikutnya di halaman yang sama, atau menggambar frame berikutnya setelah callback peristiwa berjalan. Namun, responsivitas sangat penting bagi pengalaman pengguna selama 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 sejak 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 estimasi yang lebih akurat tentang pemuatan halaman web dan responsivitas runtime.
Karena FID hanya mengukur penundaan input dari interaksi pertama, kemungkinan developer web belum secara proaktif mengoptimalkan interaksi berikutnya sebagai bagian dari proses peningkatan CWV mereka. Oleh karena itu, situs, terutama yang memiliki tingkat interaktivitas tinggi, harus mulai bekerja keras untuk mendapatkan hasil yang baik pada metrik ini.
Peran framework
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 frontend modern dan memberi developer abstraksi yang berharga untuk pemilihan rute, penanganan peristiwa, dan pemisahan kode JavaScript. Dengan demikian, elemen ini memiliki peran penting dalam mengoptimalkan responsivitas dan pengalaman pengguna situs yang menggunakannya.
Framework mungkin telah mengambil langkah-langkah untuk responsivitas yang lebih baik dengan meningkatkan FID untuk situs lebih awal. Namun, kini mereka harus menganalisis data metrik responsivitas yang tersedia dan berupaya mengatasi kesenjangan yang teridentifikasi. Secara umum, INP cenderung memiliki rasio kelulusan yang lebih rendah, dan perbedaan dalam proses pengukuran memerlukan pengoptimalan kode tambahan. Tabel berikut merangkum alasannya.
Tim Aurora di Chrome menggunakan 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 pada metrik CWV untuk situs berbasis framework. Kami telah mengumpulkan data berdasarkan metrik responsivitas eksperimental dalam laporan CrUX. Kami akan membagikan 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 ini menunjukkan persentase origin di setiap framework dengan skor responsivitas yang baik. Angka ini menggembirakan, tetapi menunjukkan bahwa masih banyak hal yang dapat ditingkatkan.
Bagaimana pengaruh JavaScript terhadap INP?
Nilai INP di lapangan berkorelasi dengan baik dengan Total Blocking Time (TBT) yang diamati di lab. Hal ini dapat menyiratkan bahwa skrip apa pun yang memblokir thread utama selama durasi yang lama akan berdampak buruk bagi INP. Eksekusi JavaScript yang berat setelah interaksi apa pun dapat memblokir thread utama untuk jangka waktu yang lama dan menunda respons terhadap interaksi tersebut. Beberapa penyebab umum yang menyebabkan pemblokiran skrip adalah:
JavaScript yang tidak dioptimalkan: Kode yang berlebihan atau strategi pemuatan dan pemisahan kode yang buruk dapat menyebabkan JavaScript membengkak dan memblokir thread utama dalam waktu lama. Pemisahan kode, pemuatan progresif, dan pemisahan 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 skrip pihak ketiga.
Beberapa pengendali peristiwa: Beberapa pengendali peristiwa yang terkait dengan setiap interaksi, yang masing-masing menjalankan skrip yang berbeda, dapat saling mengganggu dan menyebabkan penundaan yang lama. Beberapa tugas ini mungkin tidak penting dan dapat dijadwalkan di pekerja web atau saat browser tidak ada aktivitas.
Overhead framework pada penanganan peristiwa: Framework mungkin memiliki fitur/sintaksis tambahan untuk penanganan peristiwa. Misalnya, Vue menggunakan v-on untuk melampirkan pemroses peristiwa ke elemen, sedangkan Angular menggabungkan pengendali peristiwa pengguna. Untuk menerapkan fitur ini, Anda memerlukan kode framework tambahan di atas JavaScript vanilla.
Hydration: Saat menggunakan framework JavaScript, server biasanya menghasilkan HTML awal untuk halaman yang kemudian perlu dilengkapi dengan pengendali peristiwa dan status aplikasi agar dapat bersifat interaktif di browser web. Kami menyebut proses ini sebagai hidrasi. Proses ini dapat menjadi proses yang berat selama pemuatan, bergantung pada waktu yang diperlukan JavaScript untuk dimuat dan untuk menyelesaikan hidrasi. Hal ini juga dapat menyebabkan halaman terlihat interaktif padahal tidak. Sering kali, hidrasi terjadi secara otomatis selama pemuatan halaman atau secara lambat (misalnya, pada interaksi pengguna) dan dapat memengaruhi INP atau waktu pemrosesan karena penjadwalan tugas. Di library seperti React, Anda dapat memanfaatkan
useTransitionsehingga bagian dari rendering komponen berada di frame berikutnya dan efek samping yang lebih mahal akan dibiarkan untuk frame mendatang. Dengan demikian, pembaruan dalam transisi yang menghasilkan pembaruan yang lebih mendesak seperti klik dapat menjadi pola yang baik untuk INP.Pramuat: Melakukan pramuat resource yang diperlukan untuk navigasi berikutnya secara agresif dapat meningkatkan performa jika dilakukan dengan benar. Namun, jika Anda melakukan pramuat dan merender rute SPA secara sinkron, Anda dapat berdampak negatif pada INP karena semua rendering yang mahal ini mencoba diselesaikan dalam satu frame. Bandingkan dengan tidak melakukan pramuat rute, tetapi memulai pekerjaan yang diperlukan (misalnya,
fetch()) dan membatalkan pemblokiran cat. Sebaiknya periksa kembali apakah pendekatan framework Anda untuk pengambilan data sebelumnya memberikan UX yang optimal dan bagaimana (jika ada) hal ini dapat memengaruhi INP.
Mulai sekarang, untuk mendapatkan skor INP yang baik, developer harus berfokus pada peninjauan kode yang dieksekusi setelah setiap interaksi di halaman dan mengoptimalkan strategi pemisahan, rehidrasi, pemuatan, dan ukuran setiap pembaruan render() untuk skrip pihak pertama dan pihak ketiga,
Bagaimana cara Aurora dan framework mengatasi masalah INP?
Aurora bekerja dengan framework dengan menggabungkan praktik terbaik untuk memberikan solusi bawaan bagi masalah umum. Kami telah bekerja sama dengan Next.js, Nuxt.js, Gatsby, dan Angular untuk membuat solusi yang menawarkan setelan default yang kuat dalam framework untuk mengoptimalkan performa. Berikut adalah sorotan pekerjaan 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. Pembagian bagian terperinci diperkenalkan di Next.js untuk memungkinkan bagian berukuran 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 peningkatan rendering dan hidrasi sisi server. Kami juga berencana untuk melihat peningkatan dalam penanganan peristiwa dan deteksi perubahan untuk meningkatkan INP.
Vue dan Nuxt.js: Kami sedang mempelajari berbagai cara untuk berkolaborasi, terutama terkait pemuatan dan rendering skrip.
Bagaimana framework memikirkan cara meningkatkan INP?
React dan Next.js
Pemotongan waktu React.js, yang diterapkan melalui startTransition dan Suspense, memungkinkan Anda memilih untuk menggunakan hidrasi selektif atau progresif. Artinya, hidrasi bukanlah blok sinkron. Hal ini dilakukan dalam potongan kecil yang dapat terganggu kapan saja.
Hal ini akan membantu meningkatkan INP dan memungkinkan Anda merespons lebih cepat terhadap penekanan tombol, efek pengarahan kursor selama transisi, dan klik. Hal ini juga membantu menjaga 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 menggunakan pemotongan waktu React dan meningkatkan responsivitas transisi rute.
Angular
Tim Angular sedang mengeksplorasi beberapa ide yang juga akan membantu 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 jumlah aplikasi yang perlu diaktifkan untuk interaksi.
- Mengurangi overhead CD: Misalnya, membuat deteksi perubahan lebih murah, menemukan cara untuk memeriksa lebih sedikit aplikasi, dan memanfaatkan sinyal reaktif tentang apa yang berubah.
- Pembagian kode yang lebih terperinci: Membuat paket awal lebih kecil.
- Dukungan yang lebih baik untuk indikator pemuatan:: Misalnya, selama SSR dirender ulang, selama navigasi rute, dan dalam operasi pemuatan lambat.
- Alat pembuatan profil: Alat developer yang lebih baik untuk memahami biaya interaksi, terutama terkait 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 berharap skor INP dapat memberikan kompas yang lebih baik bagi situs untuk meningkatkan responsivitas dan performa di masa mendatang. Kami akan mengembangkan panduan INP yang ada untuk memberikan lebih banyak tips yang bisa ditindaklanjuti bagi developer framework pada tahun 2023. Kami berharap dapat mencapai hal ini dengan:
- Membuat saluran untuk memudahkan akses ke data kolom di INP untuk framework dan developer web.
- Menggunakan framework untuk membuat fitur yang akan meningkatkan INP secara default.
Kami menerima masukan dari pengguna framework saat mereka memulai perjalanan pengoptimalan INP.