Cara Trendyol mengurangi INP sebesar 50%, yang menghasilkan peningkatan rasio klik-tayang sebesar 1%

Studi kasus ini menjelaskan alur kerja langkah demi langkah proses debug dan peningkatan INP di React yang digunakan oleh Trendyol dengan memanfaatkan alat Google seperti PageSpeed Insight (PSI), Chrome DevTools, dan scheduler.yield API.

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Dua komponen penting dari situs e-commerce adalah Halaman Listingan Produk (PLP) dan Halaman Detail Produk (PDP). Lalu lintas e-commerce sering kali berasal dari halaman listingan produk, baik melalui kampanye email, media sosial, atau periklanan. Oleh karena itu, sangat penting untuk memastikan bahwa pengalaman PLP dirancang dengan cermat untuk mengurangi waktu yang dibutuhkan untuk melakukan pembelian. Mengatur prioritas pada data ({i>Prioritizing<i}) kualitas {i>user experience<i} sangat penting untuk mencapai kesuksesan. Publikasi penelitian seperti Milliseconds Membuat Jutaan telah mengungkapkan dampak performa web terhadap kesediaan untuk membelanjakan uang dan dengan merek secara {i>online<i}.

Trendyol adalah platform e-commerce dengan sekitar 30 juta pelanggan dan 240.000 penjual, yang telah mendorong kami menjadi bisnis pertama di Turki dengan valuasi lebih dari $10 miliar, dan merupakan salah satu platform e-commerce teratas di dunia.

Untuk mencapai tujuannya dalam menyediakan pengalaman pengguna sebaik mungkin dalam skala besar sambil mempertahankan fleksibilitas konten dan bekerja dengan React, Trendyol berfokus pada Interaction to Next Paint (INP) sebagai metrik utama untuk menjadi lebih baik. Studi kasus ini menjelaskan perjalanan Trendyol dalam meningkatkan INP dalam PLP, yang menghasilkan pengurangan INP sebesar 50% dan peningkatan 1% pada penelusuran hasil metrik bisnis.

Proses investigasi INP Trendyol

INP mengukur responsivitas situs terhadap input pengguna. INP yang baik menunjukkan bahwa browser dapat cepat dan andal merespons semua {i>input<i} pengguna dan mengecat ulang halaman, yang merupakan komponen penting dari pengalaman pengguna yang baik.

Perjalanan Trendyol untuk meningkatkan INP dalam PLP dimulai dengan analisis menyeluruh atas pengalaman pengguna sebelum perbaikan apa pun dilakukan. Berdasarkan laporan PSI, pengalaman pengguna yang sebenarnya dari PLP memiliki INP 963 milidetik pada seluler, seperti yang ditunjukkan di gambar berikutnya.

Untuk memastikan responsivitas yang baik, pemilik situs harus menggunakan INP di bawah atau di 200 milidetik yang artinya, pada saat itu, INP Trendyol berada di "buruk" {i>range<i}.

Untungnya, PSI menyediakan kedua data kolom untuk halaman yang disertakan dalam Pengguna Chrome Laporan Pengalaman (CrUX) dan data diagnostik lab yang mendetail. Melihat lab data, audit waktu eksekusi JavaScript Lighthouse menyarankan bahwa Skrip search-result-v2 menempati thread utama lebih lama daripada yang lain skrip pada halaman.

Untuk mengidentifikasi bottleneck di dunia nyata, kami menggunakan panel performa di Chrome DevTools untuk memecahkan masalah pengalaman PLP dan mengidentifikasi sumber masalah performa. Mengemulasi performa seluler dengan pelambatan CPU 4X di Chrome DevTools mengungkapkan tugas berdurasi 700-900 milidetik di thread utama. Jika yang utama jika thread lain ditempati dengan tugas lain selama lebih dari 50 milidetik, mungkin tidak dapat merespons masukan pengguna dengan tepat waktu, mengakibatkan {i>user experience<i}.

Tugas terpanjang disebabkan oleh callback Intersection Observer API pada skrip hasil penelusuran di dalam komponen React. Pada tahap ini, kita mulai melihat memecah tugas yang panjang menjadi potongan-potongan kecil untuk memberikan {i>browser<i} lebih peluang untuk merespons pekerjaan dengan prioritas lebih tinggi—termasuk interaksi pengguna.

Ternyata menggunakan operasi setState yang memicu React rendering ulang di dalam callback Intersection Observer memerlukan biaya tinggi, yang mungkin bermasalah untuk perangkat kelas bawah dengan menempati thread utama untuk terlalu panjang.

Salah satu metode yang digunakan developer untuk memecah tugas menjadi tugas-tugas yang lebih kecil melibatkan setTimeout. Kami menggunakan teknik ini untuk menunda eksekusi Panggilan setState ke dalam tugas terpisah. Meskipun setTimeout memungkinkan penundaan Dalam eksekusi JavaScript, fungsi ini tidak memberikan kontrol apa pun atas prioritas tersebut. Hal ini menghasilkan kami untuk mengikuti uji coba origin scheduler.yield dalam upaya untuk menjamin kelanjutan eksekusi skrip setelah menghasilkan thread utama:

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });

Menambahkan metode menghasilkan ini ke kode PLP menghasilkan INP yang lebih baik, karena tugas panjang utama telah dibagi menjadi serangkaian tugas yang lebih kecil, yang memungkinkan pekerjaan dengan prioritas yang lebih tinggi—seperti interaksi pengguna dan pekerjaan rendering berikutnya—untuk terjadi lebih cepat daripada yang seharusnya.

Perhatikan bahwa Trendyol menggunakan framework PuzzleJs untuk menerapkan frontend mikro menggunakan React v16.9.0. Dengan React 18, performa yang sama dapat dicapai, tetapi karena beberapa alasan, Trendyol tidak dapat melakukan upgrade baik.

Hasil bisnis

Untuk mengukur dampak peningkatan INP yang diimplementasikan, kami menjalankan pengujian A/B untuk melihat pengaruh terhadap metrik bisnis. Secara keseluruhan, perubahan pada PLP menghasilkan dalam peningkatan signifikan, termasuk penurunan INP sebesar 50% serta 1% peningkatan rasio klik-tayang dari halaman listingan ke halaman detail produk per sesi pengguna. Pada gambar berikut, Anda dapat melihat peningkatan INP dalam PLP dari waktu ke waktu:

Kesimpulan

Mengoptimalkan INP adalah proses yang kompleks dan berulang, tetapi dapat dilakukan dengan lebih mudah dengan alur kerja yang jelas. Pendekatan sederhana untuk proses debug dan meningkatkan INP situs akan bergantung pada apakah Anda mengumpulkan data lapangan Anda sendiri. Jika Anda tidak, PSI dan Lighthouse adalah titik awal yang baik. Setelah Anda mengidentifikasi halaman yang bermasalah, Anda bisa menggunakan DevTools untuk menggali lebih dalam guna mencoba mereproduksi masalah performa.

Menampilkan thread utama dari waktu ke waktu untuk memberikan lebih banyak informasi pada browser peluang untuk melakukan pekerjaan mendesak akan membuat {i>website<i} Anda lebih responsif, memastikan pelanggan memiliki pengalaman pengguna yang lebih baik. API penjadwalan yang lebih baru seperti scheduler.yield() membuat tugas ini lebih mudah.

Terima kasih banyak kepada Jeremy Wagner, Barry Pollard, dan Houssein Djirdeh dari Google, dan Trendyol's Engineering Team atas kontribusinya dalam pekerjaan ini.