Cara redBus meningkatkan Interaksi situs mereka dengan Next Paint (INP) dan meningkatkan penjualan sebesar 7%

Pengoptimalan INP membantu redBus meningkatkan penjualan sekitar 7%

Amit Kumar

Saurabh Rajpal

Web dan kemampuannya berkembang dengan sangat cepat. Anda kini dapat membuat pengalaman yang kaya dan berfitur lengkap di web, yang bisa mencapai sebanyak mungkin kemampuan aplikasi asli.

JavaScript merupakan pendorong utama interaktivitas di seluruh web, tetapi jika tidak digunakan dengan hati-hati, interaksi dapat terasa lambat, dan membuat pengguna merasa situs Anda tidak responsif atau rusak sama sekali. Untungnya, metrik Interaction to Next Paint (INP) dibuat untuk mengatasi masalah pengalaman pengguna khusus ini.

INP mengukur semua interaksi yang dilakukan dengan halaman selama siklus prosesnya, dan melaporkan satu nilai yang mewakili kecepatan situs dalam merespons input pengguna. Sederhananya, jika INP halaman berada pada atau di bawah nilai minimum yang baik, semua interaksi yang dilakukan dengan halaman dapat dikatakan sangat cepat.

redBus, situs pemesanan dan tiket bus yang berbasis di India, melakukan upaya besar untuk meningkatkan INP situsnya, meskipun situs tersebut masih dianggap sebagai metrik eksperimental. Sebagai hasil dari upaya tersebut, mereka dapat meningkatkan penjualan sebesar 7%, sekali lagi menggambarkan hubungan antara kinerja web dan kesehatan bisnis. Berikut cara redBus untuk meningkatkan INP situsnya.

Sasaran teratas

Saat redBus berupaya mengoptimalkan INP situsnya, mereka memiliki tiga sasaran:

1. Berikan pengalaman pengguna yang lebih baik bagi pengguna dengan berfokus pada latensi interaksi, terlepas dari kecepatan jaringan dan kemampuan perangkat.
2. Mengoptimalkan situs mereka untuk menjaga interaksi secepat mungkin.
3. Memastikan respons dari API mereka seringan mungkin untuk memastikan transfer data ke frontend dengan cepat.

Perjalanan

redBus mengategorikan latensi interaksi dalam dua cara:

1. Latensi interaksi yang disebabkan oleh pemblokiran JavaScript pada klien. Jika interaksi menggunakan JavaScript berlebihan yang memblokir thread utama, rendering akan tertunda, dan ini memengaruhi INP halaman.
2. Latensi jaringan yang disebabkan oleh panggilan API. Meskipun aktivitas jaringan bukanlah sesuatu yang diukur INP, interaksi yang bergantung pada panggilan ke API jarak jauh bisa terasa lambat pada jaringan yang lebih lambat, atau jika permintaan menghasilkan respons yang besar.

redBus awalnya cukup yakin bahwa INP untuk situs mereka akan baik, tetapi data Pemantauan Pengguna Real (RUM) untuk metrik ini pada persentil ke-95 menyampaikan informasi yang berbeda.

Cara redBus mengukur INP

redBus mengandalkan library JavaScript web-vitals yang dibuat oleh Google untuk melacak tidak hanya INP, tetapi semua metrik pengalaman pengguna yang penting untuk semua halaman di seluruh situs mereka. Selain library JavaScript web-vitals, redBus menggunakan ELK untuk menganalisis data INP yang dikumpulkan di frontend.

Namun, cara Anda melacak INP situs di kolom mungkin sangat berbeda dengan cara redBus menangani masalah. Sebaiknya Anda membaca cara menemukan interaksi lambat di kolom untuk mempelajari cara terbaik melacak INP untuk situs Anda, serta cara mereproduksinya di lab sebelum mulai mengoptimalkan interaksi.

Setelah redBus menerapkan sistem untuk melacak INP, mereka dapat menganalisis data untuk mendapatkan pemahaman yang lebih baik tentang letak interaktivitas yang lambat.

Screenshot sistem logging yang digunakan oleh redBus untuk menganalisis nilai INP yang dikumpulkan dari kolom. (Klik untuk melihat versi gambar ini dengan resolusi yang lebih tinggi.)

Kasus penggunaan

Saat menelusuri harga tiket di situs redBus, mereka dapat mengubah tanggal di halaman penelusuran untuk memfilter harga tiket yang dipilih untuk tujuan yang diinginkan. Interaksi untuk mengubah tanggal di halaman ini lambat, dan merupakan penyebab INP yang buruk.

Selain itu, saat pengguna men-scroll harga, tarif tambahan akan dimuat dengan lambat dari API. Meskipun scroll itu sendiri tidak diperhitungkan dalam cara pengukuran INP, pemroses peristiwa scroll itu sendiri menjadwalkan banyak tugas yang harus dijalankan di thread utama. Pekerjaan ini menyebabkan pertentangan pada thread utama yang meningkatkan latensi interaksi, sehingga menyebabkan INP yang buruk di halaman penelusuran.

Perilaku pemuatan lambat yang digunakan untuk memuat tarif tambahan dari API saat men-scroll. (Klik untuk melihat versi video dengan resolusi yang lebih tinggi.)

Cara redBus mengoptimalkan INP untuk halaman penelusuran

Untuk meningkatkan INP halaman penelusuran, redBus melakukan beberapa pengoptimalan:

• Pengendali peristiwa scroll didebounce untuk mengurangi frekuensi pengaktifan callback peristiwa dalam periode tertentu. Dengan menurunkan frekuensi callback peristiwa scroll berjalan, thread utama dapat merespons interaksi pengguna dengan lebih cepat di halaman penelusuran.
• Pekerjaan rendering yang dihasilkan diprioritaskan dengan menggunakan callback requestAnimationFrame. requestAnimationFrame memberi tahu browser bahwa pekerjaan dalam callback harus dilakukan sebelum frame berikutnya.

Sebelum: pengendali scroll yang diaktifkan tanpa debouncing diterapkan pada callback peristiwa. Ada cukup banyak tugas pemblokiran di thread utama, yang akan menunda interaksi.

Sesudah: pengendali scroll yang diaktifkan dengan debouncing diterapkan. Callback peristiwa scroll lebih jarang diaktifkan, sehingga memberikan lebih banyak peluang ke thread utama untuk merespons interaksi pengguna.

Selain itu, pengoptimalan lebih lanjut berikut telah dilakukan pada halaman hasil penelusuran:

• Batch hasil baru diambil pada kartu kedua hingga terakhir di halaman hasil penelusuran untuk meningkatkan pengalaman pengguna dan performa visual dengan memicu pemuatan lambat lebih awal.
• Lebih sedikit hasil yang diambil pada setiap panggilan jaringan selama pemuatan lambat. Dengan mengurangi pengambilan dari 30 menjadi 10 hasil, pengurangan rentang INP dari 870 ke 900 dan 350 ke 370 diamati.

Perilaku pemuatan lambat yang digunakan untuk memuat tarif tambahan dari API saat men-scroll. (Klik untuk melihat versi video dengan resolusi yang lebih tinggi.)

Meskipun perubahan ini meningkatkan INP halaman penelusuran secara signifikan, masih ada masalah saat peristiwa change di kolom input halaman penelusuran akan memanggil fungsi peredam yang mahal untuk memperbarui antarmuka pengguna. Hal ini mengakibatkan rendering ulang antarmuka pengguna yang tidak perlu, yang memengaruhi INP halaman.

Nilai INP yang dilaporkan di konsol saat pengguna mengetik di kolom input. Nilai INP yang dihasilkan sebesar 344 yang diamati di lingkungan lab berada dalam batas "perlu peningkatan". (Klik untuk melihat versi video dengan resolusi yang lebih tinggi.)

Untuk mengoptimalkan interaksi ini, redBus mengelola status komponen input secara lokal dan menyinkronkannya dengan penyimpanan Redux hanya saat peristiwa blur input diaktifkan. Perubahan ini mengurangi jumlah rendering ulang dan meniadakan rendering ulang antarmuka pengguna yang tidak diinginkan dengan lebih jarang memanggil pengurang.

Meningkatkan INP sebagai hasil dari memanggil pengurang lebih jarang pada perubahan kolom input. (Klik untuk melihat versi video dengan resolusi yang lebih tinggi.)

Dengan perubahan ini, INP halaman meningkat sebesar 72%, sehingga menghasilkan pengalaman pengguna yang lebih cepat dan lebih lancar yang kemungkinan besar akan digunakan pengguna.

Dampak bisnis

Hubungan antara kondisi bisnis dan performa halaman sudah diketahui. Meskipun INP adalah metrik yang relatif baru dibandingkan dengan Core Web Vitals lainnya, redBus mengamati hasil bisnis yang lebih baik dengan berfokus pada peningkatan metrik performa yang berfokus pada pengguna yang penting ini. Hasilnya adalah peningkatan penjualan secara keseluruhan sebesar 7%.

Singkatnya, INP membantu melukiskan masalah performa runtime di situs redBus. Berbekal pengetahuan bahwa berbagai perbaikan telah dilakukan, redBus dapat mengamati masalah, mereproduksinya, dan menggunakan informasi penting tersebut untuk melakukan pengoptimalan yang bermanfaat bagi redBus dan bisnisnya.