Bagaimana fokus pada performa web meningkatkan rasio klik-tayang Tokopedia sebesar 35%

Membuat dasbor performa web dan mengoptimalkan JavaScript, resource, dan halaman beranda untuk meraih kesuksesan bisnis.

Tokopedia adalah salah satu perusahaan e-commerce terbesar di Indonesia. Dengan lebih dari 2,7 juta jaringan penjual nasional, lebih dari 18 juta listingan produk, dan lebih dari 50 juta pengunjung bulanan, tim web menyadari bahwa investasi dalam performa web sangatlah penting. Dengan membangun budaya yang mengutamakan performa, mereka mencapai peningkatan rasio klik-tayang (CTR) sebesar 35% dan peningkatan konversi (CVR) sebesar 8%.

35%

Peningkatan CTR

8%

Peningkatan CVR

4dtk

Peningkatan TTI

Menyoroti peluang

Tim web berbicara dengan tim kepemimpinan mereka tentang pentingnya berinvestasi dalam performa web untuk meningkatkan pengalaman dan interaksi pengguna, dan juga menunjukkan dampak performa menggunakan pola dan API lanjutan.

Pendekatan yang mereka gunakan

Pengoptimalan JavaScript dan resource

Pemblokiran render atau JavaScript yang berjalan lama adalah penyebab umum masalah performa. Tim kami telah melakukan beberapa langkah untuk meminimalkan masalah ini:

  • Mem-build library pengontrol skrip untuk memuat skrip pihak ketiga secara selektif guna mengoptimalkan jalur rendering penting.
  • Mengganti library yang lebih berat dengan yang lebih ringan.
  • Menerapkan pemisahan kode dan dioptimalkan untuk konten paruh atas.
  • Menerapkan pemuatan adaptif, misalnya hanya memuat gambar berkualitas tinggi untuk perangkat di jaringan cepat dan menggunakan gambar berkualitas rendah untuk perangkat di jaringan yang lambat.
  • Gambar paruh bawah dimuat lambat.
  • Penundaan pemuatan JavaScript yang tidak penting.
Library pengontrol skrip meningkatkan TTI sebesar 4 detik

Pengoptimalan halaman beranda

Tim ini menggunakan Svelte untuk membangun halaman beranda versi ringan bagi pengunjung baru, sehingga memastikan pengalaman situs yang cepat. Versi ini juga menggunakan pekerja layanan untuk meng-cache aset non-lite di latar belakang.

Mengurangi ukuran JavaScript aplikasi sebesar 88% (dari 320 KB menjadi 37 KB). Boosted skor Lighthouse sebesar 90 poin. FCP tercapai kurang dari 1 detik. Peningkatan CTR sebesar 35%. Peningkatan CVR sebesar 8%.

Penganggaran dan pemantauan performa

Tim ini membuat dasbor pemantauan performa menggunakan Lighthouse dan fitur lainnya untuk meningkatkan kualitas halaman web:

  • Mengukur kualitas jaringan, pemantauan infrastruktur, performa frontend, dan performa server.
  • Menggunakan kombinasi API platform web (seperti Resource Timing API dan header Server-Timing), PageSpeed Insights (PSI) API, dan Laporan Pengalaman Pengguna Chrome untuk memantau metrik kolom dan lab.
  • Menganalisis gambar dari Lighthouse untuk membantu mengidentifikasi peluang pengoptimalan gambar.
  • Menerapkan anggaran ukuran paket selama continuous integration (CI). Operasi CI akan gagal jika ukuran paket melebihi anggaran.
2,2 skor TTI kedua di beranda (skor Lighthouse: 88). Skor TTI 1,9 kedua pada halaman produk (skor Lighthouse: 86).

Sebagai bisnis e-commerce, akuisisi pengguna adalah jantung kesuksesan kami. Kami menyadari pentingnya web, sehingga kami bersemangat untuk berinvestasi pada semua alat dan fitur yang akan memberikan pengalaman pengguna terbaik kepada pengguna kami.

Dendi Sunardi, Engineering Manager, Web Platform, Tokopedia

Lihat halaman Scale on web case study untuk mengetahui kisah sukses lainnya dari India dan Asia Tenggara.