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
Saurabh Rajpal
X

Web dan kemampuannya berkembang dengan cepat. Sekarang Anda dapat membuat pengalaman yang kaya dan lengkap di web yang dapat mencapai banyak hal yang dapat dilakukan aplikasi native dalam hal kemampuan.

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

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

redBus, situs pemesanan dan penjualan tiket bus yang berbasis di India, melakukan upaya yang signifikan untuk meningkatkan INP situs mereka, bahkan saat INP masih dianggap sebagai metrik eksperimental. Berkat upayanya, mereka dapat meningkatkan penjualan sebesar 7%, yang sekali lagi menggambarkan hubungan antara performa web dan kesehatan bisnis. Berikut adalah tindakan yang dilakukan redBus untuk meningkatkan INP situs mereka.

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 agar interaksi tetap secepat mungkin.
  3. Pastikan respons dari API mereka sekecil mungkin untuk memastikan transfer data yang cepat ke frontend.

Perjalanan

redBus mengategorikan latensi interaksi dengan dua cara:

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

Awalnya, redBus cukup yakin bahwa INP untuk situs mereka akan baik, tetapi data Pemantauan Pengguna Sebenarnya (RUM) untuk metrik ini pada persentil ke-95 menunjukkan hasil yang berbeda.

Cara redBus mengukur INP

redBus mengandalkan web-vitals library JavaScript yang dibuat oleh Google untuk melacak tidak hanya INP, tetapi semua metrik pengalaman pengguna yang penting untuk semua halaman di 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 lapangan mungkin sangat berbeda dengan cara redBus menangani masalah ini. Sebaiknya baca artikel tentang cara menemukan interaksi lambat di lapangan untuk mempelajari cara terbaik melacak INP untuk situs Anda, lalu cara mereproduksinya di lab sebelum Anda mulai mengoptimalkan interaksi.

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

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

Kasus penggunaan

Saat pengguna menelusuri tarif di situs redBus, mereka dapat mengubah tanggal di halaman penelusuran untuk memfilter tarif yang dipilih untuk tujuan yang diinginkan. Interaksi untuk mengubah tanggal di halaman ini lambat, dan menyebabkan INP yang buruk.

Selain itu, saat pengguna men-scroll tarif, tarif tambahan dimuat lambat dari API. Meskipun scroll itu sendiri tidak diperhitungkan dalam cara pengukuran INP, pemroses peristiwa scroll itu sendiri menjadwalkan banyak pekerjaan yang harus berjalan 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 ini dengan resolusi lebih tinggi.)

Cara redBus mengoptimalkan INP untuk halaman penelusuran

Untuk meningkatkan INP halaman penelusuran, redBus melakukan beberapa pengoptimalan:

  • Pengendali peristiwa scroll di-debounce untuk mengurangi frekuensi callback peristiwa yang akan diaktifkan dalam jangka waktu tertentu. Dengan menurunkan frekuensi pengulangan callback peristiwa scroll, thread utama dapat merespons interaksi pengguna di halaman penelusuran dengan lebih cepat.
  • Pekerjaan rendering yang dihasilkan diprioritaskan dengan menggunakan callback requestAnimationFrame. requestAnimationFrame memberi tahu browser bahwa pekerjaan dalam callback harus dilakukan sebelum frame berikutnya.
Screenshot panel performa di Chrome DevTools yang menampilkan situs redBus yang memicu callback peristiwa scroll yang tidak di-debounce. Akibatnya, thread utama menjadi diblokir.
Sebelum: pengendali scroll diaktifkan tanpa debouncing yang diterapkan ke callback peristiwa. Ada banyak tugas pemblokiran di thread utama, yang akan menunda interaksi.
Screenshot panel performa di Chrome DevTools yang menampilkan situs redBus yang memicu callback peristiwa scroll yang di-debounce. Hasilnya adalah thread utama lebih sedikit diblokir karena pengendali peristiwa scroll jauh lebih jarang diaktifkan.
Setelah: pengendali scroll diaktifkan dengan debouncing diterapkan. Callback peristiwa scroll diaktifkan lebih jarang, sehingga thread utama memiliki lebih banyak peluang untuk merespons interaksi pengguna.

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

  • Batch hasil baru diambil di kartu kedua dari akhir 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, penurunan rentang INP dari 870 hingga 900 menjadi 350 hingga 370 teramati.
Perilaku pemuatan lambat yang digunakan untuk memuat tarif tambahan dari API saat men-scroll. (Klik untuk melihat versi video ini dengan resolusi lebih tinggi.)

Meskipun perubahan ini secara signifikan meningkatkan INP halaman penelusuran, masih ada masalah saat peristiwa change di kolom input halaman penelusuran akan memanggil fungsi pengurangan yang mahal untuk memperbarui antarmuka pengguna. Hal ini menyebabkan 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 dalam setelan lab berada dalam nilai minimum "perlu ditingkatkan". (Klik untuk melihat versi video ini dengan resolusi 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 menghilangkan rendering ulang antarmuka pengguna yang tidak diinginkan dengan lebih jarang memanggil reducer.

INP yang lebih baik karena pengurangan frekuensi panggilan pengurangan pada perubahan kolom input. (Klik untuk melihat versi video ini dengan resolusi lebih tinggi.)

Dengan perubahan ini, INP halaman meningkat sebesar 72%, sehingga menghasilkan pengalaman pengguna yang lebih cepat dan lancar yang lebih mungkin diakses oleh pengguna.

Dampak bisnis

Hubungan antara kesehatan 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 menggambarkan masalah performa runtime di situs redBus. Dengan mengetahui bahwa ada peningkatan yang perlu dilakukan, redBus dapat mengamati masalah, mereproduksinya, dan menggunakan informasi penting tersebut untuk melakukan pengoptimalan yang bermanfaat bagi redBus dan bisnisnya.