Cara Ray-Ban melipatgandakan rasio konversi dan mengurangi rasio keluar sebesar 13% melalui pra-rendering menggunakan Speculation Rules API

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

Dipublikasikan: 28 Januari 2025

Studi kasus ini menjelaskan cara Ray-Ban meningkatkan metrik LCP-nya dengan menggunakan Speculation Rules API untuk mempercepat navigasi pengguna di masa mendatang menggunakan pra-rendering, dan bagaimana hal itu meningkatkan performa bisnis platform e-commerce Ray-Ban. Keberhasilan ini kemudian mendorong Ray Ban untuk melihat opsi lain untuk meningkatkan performa secara serupa, seperti membuat halaman memenuhi syarat untuk bfcache.

Ray-Ban adalah merek kacamata ikonis yang terkenal dengan gayanya yang tak lekang oleh waktu seperti Aviator dan Wayfarer, yang memadukan desain klasik dengan tren modern. Sebagai salah satu pemimpin terkemuka dalam kacamata, saluran e-commerce Ray-Ban memainkan peran penting dalam memastikan daya saing perusahaan, dengan menarik lebih dari 80 juta pengunjung unik setiap tahunnya.

Sebagai saluran bisnis utamanya, Ray-Ban terus meningkatkan pengalaman pengguna platform e-commerce-nya, dan menyadari pentingnya Data Web Inti serta dampaknya secara langsung terhadap pengalaman pengguna platform tersebut.

Pendekatan berkelanjutan Ray-Ban untuk meningkatkan perjalanan penting pengguna

Karena sifat arsitektur MPA (Multi-Page Application) yang digunakan di platform e-commerce Ray-Ban, setiap kali pengguna berinteraksi dengan link atau tombol yang memerlukan halaman baru, browser akan mengirimkan permintaan navigasi ke server, yang merespons dengan halaman HTML baru. Hal ini menimbulkan tantangan bagi Ray-Ban untuk mempertahankan pengalaman penjelajahan yang lancar bagi pengguna, terutama di Halaman Detail Produk (PDP), yang telah diidentifikasi sebagai salah satu titik entri yang paling sering digunakan dan merupakan bagian penting dari funnel konversi.

Berkat desain ulang yang baru saja selesai, Ray-Ban mengalami peningkatan pada metrik Core Web Vitals. Namun, masih ada ruang untuk peningkatan, terutama jika penggunaan library eksternal yang ekstensif diperlukan untuk memberikan pengalaman pengguna yang interaktif, yang meningkatkan metrik Halaman Berisi Konten Terbesar (LCP) dibandingkan dengan halaman lainnya.

Oleh karena itu, Ray-Ban memilih untuk menerapkan pemuatan spekulatif guna meningkatkan perjalanan penting pengguna di situsnya. Menggunakan aturan spekulasi dapat menjadi salah satu solusi yang paling efektif untuk mengurangi kecepatan pemuatan halaman yang dirasakan untuk navigasi mendatang, karena melakukan pramuat, lalu melakukan pra-rendering konten halaman yang akan dikunjungi pengguna berikutnya.

Strategi pra-rendering khusus perangkat Ray-Ban

Ray-Ban mengadopsi dua strategi pra-rendering terpisah untuk memperhitungkan perbedaan perilaku dan resource antara perangkat desktop dan seluler. Strategi ini dirancang untuk memaksimalkan performa tanpa mengorbankan fitur yang ada di situs atau pengalaman pengguna.

Di desktop, pra-rendering dijalankan dengan mengarahkan kursor ke kartu produk di Halaman Listingan Produk (PLP), menggunakan setelan kesiapan "moderate", dan meneruskan class pengidentifikasi kartu yang sama sebagai pemilih.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

Karena peristiwa hover secara efektif tidak tersedia di perangkat seluler, pra-rendering dijalankan menggunakan setelan kesiapan immediate pada empat kartu pertama, yang ditemukan paling banyak diklik.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

Hasil pra-rendering

Kedua strategi pra-rendering tersebut memiliki dampak yang signifikan pada metrik Data Web Inti untuk halaman PDP Ray-Ban dan tren untuk KPI bisnis.

Metrik bisnis pengguna yang menjelajahi PDP yang ditayangkan dari server dibandingkan dengan pengguna yang menjelajahi PDP yang dipra-render. Setelah mengumpulkan data dari ruang kerja pelacakan Adobe untuk pengguna dengan browser yang mendukung API (seperti Chrome), Ray-Ban mengungkapkan peningkatan signifikan yang menunjukkan bahwa pengguna dapat menjelajahi situs dengan lebih lancar. Untuk browser lain, yang tidak mendukung pra-rendering, Ray-Ban memutuskan untuk melakukan pramuat resource pada saat peristiwa hover di desktop, dan untuk empat kartu pertama PLP di perangkat seluler.

Implementasi Speculation Rules API untuk pra-rendering telah menjadi game-changer untuk platform e-commerce Ray-Ban. Dengan strategi inovatif ini, Ray-Ban berhasil meningkatkan LCP sebesar 43% di desktop dan seluler, sehingga meningkatkan pengalaman pengguna secara signifikan.

Pengoptimalan ini tidak hanya memberikan pemuatan halaman yang hampir instan, tetapi juga memungkinkan banyak manfaat dari arsitektur bergaya SPA sekaligus mempertahankan arsitektur MPA saat ini, terutama di halaman penting seperti PDP.

Dari perspektif bisnis, peningkatan ini telah memberikan dampak yang signifikan, seperti yang dikonfirmasi oleh pengujian A/B:

• Meningkatkan rasio konversi:
  • Rasio konversi seluler di PDP meningkat secara signifikan sebesar 101,47%.
  • Rasio konversi desktop mengalami peningkatan yang lebih mengesankan sebesar 156,16%.
• Peningkatan interaksi pengguna:
  • Rata-rata halaman yang dilihat per sesi meningkat sebesar 51,95% di perangkat seluler dan 65,30% di desktop, yang menunjukkan navigasi yang lebih lancar dan minat pengguna yang lebih berkelanjutan. Catatan: kami tidak menganggap halaman yang dipra-render yang tidak diaktifkan sebagai "dilihat".
• Rasio keluar yang lebih rendah:
  • Rasio keluar (% pengguna yang keluar dari halaman berdasarkan kunjungan halaman untuk halaman tersebut) turun sebesar 13,25% di perangkat seluler dan 13,18% di desktop, yang menunjukkan retensi yang lebih tinggi selama momen belanja yang penting.

Memperluas untuk memberikan navigasi pengguna yang lebih instan

Mengingat hasil yang sangat baik yang diperoleh dari pra-rendering PDP, Ray-Ban memutuskan untuk lebih memaksimalkan potensi Speculation Rules API dengan juga melakukan pra-rendering link PLP di menu. Pendekatan ini memungkinkan peningkatan kecepatan pemuatan secara signifikan—dan dengan demikian LCP—dari jenis halaman katalog dan produk.

Meskipun pra-rendering membantu navigasi di masa mendatang, Ray-Ban juga mengamati sebagian besar navigasi bolak-balik antara PLP dan PDP. Karena hasil eksperimen pra-rendering menunjukkan bahwa navigasi pengguna yang dioptimalkan secara langsung berkorelasi dengan metrik bisnis yang baik, Ray-Ban juga memeriksa cache kembali/maju (bfcache).

Bfcache adalah pengoptimalan browser yang menyediakan navigasi mundur dan maju secara instan dengan menyimpan snapshot halaman yang memenuhi syarat di histori browser dalam memori, dan memulihkannya tanpa melalui jaringan. Untuk memastikan bahwa PDP dan PLP Ray-Ban memenuhi syarat untuk bfcache, beberapa pembaruan cepat telah dilakukan:

• Nonaktifkan peristiwa unload dan batasi akses ke API Bluetooth dan akselerometer perangkat menggunakan nilai header Permissions-Policy dari unload=(), bluetooth=(), andaccelerometer=().
• Tutup koneksi RTC dan IndexedDB pada peristiwa pagehide.
• Hindari penggunaan header respons Cache-Control: no-store yang tidak perlu.

Mengaktifkan dukungan bfcache di PLP dengan navigasi kembali/maju yang menyumbang hingga 40% traffic, sementara rasio hit bfcache adalah 0, menghasilkan peningkatan LCP hampir 30% dan peningkatan CLS 83%.

Kesimpulan

Hasil ini menggambarkan potensi pra-rendering untuk meningkatkan performa situs e-commerce secara signifikan. Dengan melakukan pra-rendering halaman berdasarkan perilaku pengguna untuk navigasi mendatang, Ray-Ban tidak hanya meningkatkan Data Web Inti, tetapi juga memberikan interaksi pengguna yang lebih baik dan meningkatkan penjualan. Manfaat ini telah memperkuat komitmen Ray-Ban untuk memberikan navigasi yang lancar, tidak hanya untuk navigasi mendatang, tetapi juga untuk navigasi kembali/maju yang disediakan oleh bfcache.

Studi kasus ini menyoroti bagaimana penggunaan teknik performa web modern dapat menjembatani kesenjangan antara metrik teknis dan KPI bisnis, sehingga menetapkan tolok ukur baru untuk pengalaman pengguna dan kesuksesan e-commerce.

Terima kasih khusus kepada Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard, dan Jeremy Wagner atas kontribusi mereka dalam karya ini.