Memahami cara metrik INP baru memengaruhi 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 berbagi insight tentang posisi situs yang dibuat menggunakan framework JavaScript modern dalam kaitannya dengan metrik ini. Kami ingin membahas mengapa INP relevan dengan framework serta bagaimana Aurora dan 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 di halaman yang sama, atau menggambar frame berikutnya setelah callback peristiwa berjalan. Namun, responsivitas sangat penting bagi pengalaman pengguna di seluruh siklus proses halaman karena pengguna menghabiskan sekitar 90% waktu pada halaman setelah halaman dimuat.
INP mengukur waktu yang diperlukan halaman web untuk merespons interaksi pengguna sejak pengguna memulai interaksi hingga frame berikutnya ditampilkan di layar. Dengan INP, kami berharap dapat memungkinkan pengukuran gabungan untuk latensi yang dirasakan dari semua interaksi dalam siklus proses halaman. Kami yakin bahwa INP akan memberikan perkiraan yang lebih akurat terkait daya respons runtime dan beban.
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, khususnya situs dengan tingkat interaktivitas yang tinggi, harus mulai bekerja keras agar dapat melakukannya dengan baik pada metrik ini.
Peran kerangka kerja
Karena banyak situs mengandalkan JavaScript untuk menyediakan interaktivitas, skor INP akan sangat dipengaruhi oleh jumlah JavaScript yang diproses di thread utama. Framework JavaScript adalah bagian penting dari pengembangan web front end modern dan menyediakan abstraksi berharga bagi developer untuk pemilihan rute, penanganan peristiwa, dan kompartemenisasi kode JavaScript. Dengan demikian, mereka memiliki peran sentral dalam mengoptimalkan responsivitas dan pengalaman pengguna {i>website<i} yang menggunakannya.
Framework mungkin telah mengambil langkah-langkah untuk responsivitas yang lebih baik dengan meningkatkan FID untuk situs lebih awal. Namun, mereka sekarang 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 proses pengukuran memerlukan pengoptimalan kode tambahan. Tabel berikut merangkum alasannya.
Tim Aurora di Chrome bekerja 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 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 guna 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 CWV Technology Report untuk Juni 2023 memberi kami informasi berikut tentang tingkat respons untuk framework JavaScript yang populer.
Tabel ini menunjukkan persentase origin pada setiap framework dengan skor responsivitas yang baik. Angka ini sangat menggembirakan, tetapi memberi tahu kami bahwa ada banyak hal yang bisa ditingkatkan.
Bagaimana pengaruh JavaScript terhadap INP?
Nilai INP di lapangan berkorelasi baik dengan Total Blocking Time (TBT) yang diamati di lab. Hal ini dapat menyiratkan bahwa skrip apa pun yang memblokir thread utama dalam waktu lama akan berdampak buruk bagi INP. Eksekusi JavaScript yang berat setelah interaksi apa pun dapat memblokir thread utama untuk 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 pemisahan dan pemuatan kode yang buruk dapat menyebabkan JavaScript menjadi menggelembung dan memblokir thread utama dalam jangka waktu yang lama. Pemisahan kode, pemuatan progresif, dan memisahkan tugas yang lama 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, masing-masing menjalankan skrip yang berbeda, dapat mengganggu satu sama lain dan menyebabkan penundaan yang lama. Beberapa dari tugas ini mungkin tidak penting dan dapat dijadwalkan di pekerja web atau saat browser tidak ada aktivitas.
Overhead framework saat penanganan peristiwa: Framework mungkin memiliki fitur/sintaksis tambahan untuk penanganan peristiwa. Misalnya, Vue menggunakan v-on untuk melampirkan pemroses peristiwa ke elemen, sementara Angular menggabungkan pengendali peristiwa pengguna. Menerapkan fitur ini memerlukan kode framework tambahan di atas vanilla JavaScript.
Hidrasi: Saat menggunakan framework JavaScript, tidak jarang server membuat HTML awal untuk halaman yang kemudian perlu ditambahkan dengan pengendali peristiwa dan status aplikasi agar dapat interaktif di browser web. Kita menyebut proses ini hidrasi. Proses ini dapat menjadi proses yang berat selama pemuatan, bergantung pada berapa lama waktu yang dibutuhkan JavaScript untuk memuat dan untuk menyelesaikan hidrasi. Hal ini juga dapat menyebabkan halaman terlihat seperti interaktif padahal sebenarnya tidak. Sering kali hidrasi terjadi secara otomatis selama pemuatan halaman atau dengan 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 render komponen berada di frame berikutnya dan efek samping yang lebih mahal diserahkan ke frame berikutnya. Oleh karena itu, update dalam transisi yang menghasilkan update yang lebih mendesak, seperti klik, dapat menjadi pola yang cocok untuk INP.Pengambilan data: Mengambil data secara agresif untuk resource yang diperlukan untuk navigasi berikutnya dapat memberikan performa yang baik jika dilakukan dengan benar. Namun, jika Anda mengambil data dan merender rute SPA secara sinkron, Anda pada akhirnya dapat berdampak negatif pada INP karena semua rendering yang mahal ini mencoba untuk diselesaikan dalam satu frame. Bandingkan ini dengan tidak mengambil data rute Anda dan memulai pekerjaan yang diperlukan (misalnya,
fetch()) dan membuka pemblokiran cat. 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 baik, developer harus fokus pada peninjauan kode yang dijalankan setelah setiap interaksi di halaman dan mengoptimalkan pemotongan, rehidrasi, strategi pemuatan, serta ukuran setiap update render() untuk skrip pihak pertama dan pihak ketiga,
Bagaimana Aurora dan framework menangani masalah INP?
Aurora bekerja menggunakan framework dengan menerapkan praktik terbaik untuk memberikan solusi bawaan untuk masalah umum. Kami telah bekerja dengan Next.js, Nuxt.js, Gatsby, dan Angular untuk solusi yang menawarkan default 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. Potongan terperinci diperkenalkan di Next.js guna memungkinkan potongan 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 mengeksplorasi rendering sisi server dan peningkatan hidrasi. Kami juga berencana untuk mengoptimalkan penanganan peristiwa dan deteksi perubahan untuk meningkatkan INP.
Vue dan Nuxt.js: Kami sedang mempelajari cara untuk berkolaborasi, terutama terkait dengan pemuatan dan rendering skrip.
Bagaimana kerangka kerja mempertimbangkan cara meningkatkan INP?
React dan Next.js
Pembagian waktu React.js, yang diterapkan melalui startTransition dan Suspense, memungkinkan Anda mengaktifkan hidrasi selektif atau progresif. Ini berarti hidrasi bukan blok sinkron. Hal ini dilakukan dalam irisan kecil
yang bisa diinterupsi kapan saja.
Hal ini akan membantu meningkatkan INP dan memungkinkan Anda merespons penekanan tombol, mengarahkan kursor, dan mengklik dengan lebih cepat. Hal ini juga membantu membuat 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 mengadopsi pemotongan waktu React dan meningkatkan responsivitas transisi rute.
Angular
Tim Angular sedang mengeksplorasi beberapa ide yang juga akan membantu INP:
- Zoneless: Mengurangi ukuran paket awal, dan kode yang diperlukan yang harus dimuat sebelum aplikasi dapat merender apa pun.
- Hidrasi: Hidrasi bergaya pulau untuk membatasi seberapa banyak aplikasi yang perlu diaktifkan untuk berinteraksi.
- Kurangi overhead CD: Misalnya, buat deteksi perubahan lebih murah, temukan cara untuk memeriksa lebih sedikit aplikasi, dan manfaatkan sinyal reaktif tentang apa yang berubah.
- Pemisahan kode yang lebih terperinci: Membuat paket awal lebih kecil.
- Dukungan yang lebih baik untuk indikator pemuatan:: Misalnya, selama merender ulang SSR, selama navigasi rute, dan dalam operasi pemuatan lambat.
- Alat pembuatan profil: Alat developer yang lebih baik untuk memahami biaya interaksi, terutama seputar biaya deteksi perubahan untuk interaksi tertentu.
Melalui penyempurnaan ini, kami dapat mengatasi berbagai masalah yang menyebabkan respons 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 sudah ada untuk memberikan lebih banyak tips yang dapat ditindaklanjuti bagi developer framework pada tahun 2023. Kami berharap dapat mencapai tujuan ini dengan:
- Membuat saluran untuk akses mudah ke data lapangan di INP bagi framework dan developer web.
- Gunakan framework untuk membangun fitur yang akan meningkatkan INP secara default.
Kami menerima masukan dari pengguna framework saat mereka memulai perjalanan pengoptimalan INP.