Yayınlanma tarihi: 28 Ocak 2025
Bu örnek olayda, Ray-Ban'ın ön oluşturma özelliğini kullanarak kullanıcıların gelecekteki gezinmelerini hızlandırmak için Speculation Rules API'yi kullanarak LCP metriklerini nasıl iyileştirdiği ve bunun Ray-Ban'ın e-ticaret platformunun iş performansını nasıl iyileştirdiği açıklanmaktadır. Bu denemedeki başarı, Ray-Ban'ı performansı benzer şekilde iyileştirmek için sayfaları bfcache için uygun hale getirme gibi diğer seçenekleri incelemeye teşvik etti.
Ray-Ban, klasik tasarımları modern trendlerle harmanlayan Aviator ve Wayfarer gibi zamansız stilleri ile tanınan ikonik bir gözlük markasıdır. Gözlük sektörünün liderlerinden biri olan Ray-Ban'ın e-ticaret kanalı, yıllık 80 milyondan fazla tekil ziyaretçi çekerek şirketin rekabet gücünü sağlamada kritik bir rol oynuyor.
Ray-Ban, ana iş kanalı olarak e-ticaret platformunun kullanıcı deneyimini iyileştirmeye devam ediyor ve Core Web Vitals'ın öneminin ve platformun kullanıcı deneyimi üzerindeki doğrudan etkisinin farkında.
Ray-Ban'ın kritik kullanıcı yolculuğunu iyileştirmek için sürekli yaklaşımı
Ray-Ban'ın e-ticaret platformunda kullanılan MPA (Çok Sayfalı Uygulama) mimarisinin doğası gereği, kullanıcı yeni bir sayfa gerektiren bir bağlantı veya düğmeyle her etkileşime geçtiğinde tarayıcı sunucuya bir gezinme isteği gönderir. Sunucu da yeni bir HTML sayfasıyla yanıt verir. Bu durum, Ray-Ban'ın özellikle en sık kullanılan giriş noktalarından biri olarak tanımlanan ve dönüşüm hunisinin kritik bir parçası olan Ürün Ayrıntıları Sayfası'nda (PDP) kullanıcılara sorunsuz bir gezinme deneyimi sunmasını zorlaştırıyordu.
Ray-Ban, kısa süre önce tamamlanan bir yeniden tasarım sayesinde Core Web Vitals metriklerinde iyileşme elde etti. Ancak özellikle etkileşimli bir kullanıcı deneyimi sağlamak için harici kitaplıkların yoğun şekilde kullanılmasının gerektiği durumlarda, diğer sayfalara kıyasla en büyük içerikli sayfa (LCP) metriğinin artması nedeniyle iyileştirmeye açık alanlar mevcuttur.
Bu nedenle Ray-Ban, sitedeki kritik kullanıcı yolculuğunu iyileştirmek için tahmini yükleme özelliğini uygulamayı tercih etti. Tahmin kuralları, kullanıcının sonraki ziyaret edeceği sayfaların içeriğini önceden yükleyip önceden oluşturarak gelecekteki gezinmelerde algılanan sayfa yükleme hızını azaltmak için en etkili çözümlerden biri olabilir.
Ray-Ban'ın cihaza özel ön oluşturma stratejisi
Ray-Ban, masaüstü ve mobil cihazlar arasındaki davranış ve kaynaklardaki farklılıkları hesaba katmak için iki ayrı ön oluşturma stratejisi benimsedi. Bu stratejiler, web sitesinin mevcut özelliklerinden veya kullanıcı deneyiminden ödün vermeden performansı en üst düzeye çıkarmak için tasarlanmıştır.
Masaüstünde ön oluşturma, fareyle Ürün Listeleme Sayfası'ndaki (PLP) ürün kartlarının üzerine gelerek, "moderate" isteklilik ayarı kullanılarak ve seçici olarak aynı kartların tanımlayıcı sınıfı geçirilerek gerçekleştirilir.
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);
hover etkinliği mobil cihazlarda etkili bir şekilde kullanılamadığından, önceden oluşturma işlemi, en çok tıklananlar olduğu tespit edilen ilk dört karoda immediate isteklilik ayarı kullanılarak yürütülür.
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);
Sonuçları önceden oluşturma
İki ön oluşturma stratejisi, Ray-Ban'ın PDP sayfaları için Core Web Vitals metrikleri ve işletme KPI'leri trendleri üzerinde önemli bir etki yarattı.
| Cihaz | LCP | Dönüşüm Oranı değişikliği | Çıkış oranı değişikliği | Önceden oluşturma oranı | ||
|---|---|---|---|---|---|---|
| Önce | Sonra | Değiştir | ||||
| Mobil | 4,69 sn. | 2,66 sn. | %43,28 | +%101,47 | -%13,25 | %29 |
| Masaüstü | 3,03 sn. | 1,74 saniye | %42,57 | +%156,16 | -%13,18 | %50 |
Sunucudan sunulan PDP'ye göz atan kullanıcıların işletme metrikleri, önceden oluşturulmuş PDP'ye göz atan kullanıcıların işletme metrikleriyle karşılaştırıldı. API'yi destekleyen tarayıcılara (Chrome gibi) sahip kullanıcılar için Adobe izleme çalışma alanından veri topladıktan sonra Ray-Ban, kullanıcıların sitede daha sorunsuz bir şekilde gezinebildiğini gösteren önemli iyileştirmeler olduğunu ortaya çıkardı. Ray-Ban, ön oluşturmanın desteklenmediği diğer tarayıcılarda masaüstünde hover etkinliği sırasında ve mobil cihazlarda PLP'nin ilk dört karosu için kaynakları önceden yüklemeye karar verdi.
Önceden işleme için Speculation Rules API'nin uygulanması, Ray-Ban'ın e-ticaret platformu için oyunun kurallarını değiştirdi. Ray-Ban, bu yenilikçi stratejiler sayesinde hem masaüstünde hem de mobil cihazlarda LCP'de% 43 artış elde ederek kullanıcı deneyimini önemli ölçüde iyileştirdi.
Bu optimizasyon, yalnızca sayfaların neredeyse anında yüklenmesini sağlamakla kalmadı, aynı zamanda özellikle PDP gibi kritik sayfalarda mevcut MPA mimarisini korurken SPA tarzı mimarinin birçok avantajından yararlanmamızı sağladı.
A/B testinin de doğruladığı gibi, bu iyileştirmeler işletme açısından dönüşümsel olmuştur:
- Dönüşüm oranlarında artış:
- PDP'lerdeki mobil dönüşüm oranları %101,47 oranında önemli ölçüde arttı.
- Masaüstü dönüşüm oranlarında ise daha da etkileyici bir %156,16 artış yaşandı.
- Geliştirilmiş kullanıcı etkileşimi:
- Oturum başına görüntülenen ortalama sayfa sayısı mobilde %51,95, masaüstünde ise %65,30 arttı. Bu durum, daha sorunsuz bir gezinme deneyimi ve kullanıcıların daha uzun süre sitede kaldığını gösteriyor. Not: Etkinleştirilmemiş önceden oluşturulmuş sayfalar "görüntülendi" olarak değerlendirilmedi.
- Düşük çıkış oranları:
- Çıkış oranları (bir sayfadan ayrılan kullanıcıların, ilgili sayfanın sayfa görüntüleme sayısına oranı), mobilde %13,25 ve masaüstünde %13,18 oranında düşüş gösterdi. Bu da kritik alışveriş anlarında daha yüksek bir elde tutma oranının olduğunu gösteriyor.
Daha fazla anında kullanıcı gezinmesi sunmak için genişletiliyor
PDP'lerin ön oluşturmasından elde edilen mükemmel sonuçlar göz önüne alındığında Ray-Ban, menüdeki PLP bağlantılarını da ön oluşturarak Speculation Rules API'nin potansiyelini daha da en üst düzeye çıkarmaya karar verdi. Bu yaklaşım, hem katalog hem de ürün sayfası türlerinin yüklenme hızını ve dolayısıyla LCP'yi önemli ölçüde iyileştirmeyi mümkün kılar.
Önceden oluşturma, gelecekteki gezinmelerde yardımcı olsa da Ray-Ban, PLP ile PDP arasında gidip gelen gezinmelerin önemli bir bölümünü de gözlemliyor. Ön oluşturma deney sonuçları, optimize edilmiş kullanıcı gezinmesinin doğrudan iyi işletme metrikleriyle ilişkili olduğunu açıkça gösterdiğinden Ray-Ban, geri/ileri önbelleği (bfcache) de inceledi.
Bfcache, tarayıcı geçmişindeki uygun sayfaların anlık görüntüsünü bellekte saklayarak ve bunları ağa girmeden geri yükleyerek anında ileri ve geri gezinme olanağı sunan bir tarayıcı optimizasyonudur. Ray-Ban'ın PDP ve PLP'sinin bfcache için uygun olmasını sağlamak amacıyla birkaç hızlı güncelleme yapıldı:
unloadetkinliğini devre dışı bırakır veunload=(), bluetooth=(), andaccelerometer=()değerine sahip birPermissions-Policybaşlık değeri kullanarak cihazın Bluetooth ve ivmeölçer API'lerine erişimi kısıtlar.pagehideetkinliğinde RTC ve IndexedDB bağlantılarını kapatın.Cache-Control: no-storeyanıt başlığını gereksiz yere kullanmaktan kaçının.
Geri/ileri gezinmenin trafiğin% 40'ına kadarını oluşturduğu, ancak bfcache isabet oranının 0 olduğu PLP'lerde bfcache desteğinin kullanıma sunulması, LCP'de yaklaşık% 30 ve CLS'de% 83 oranında iyileşme sağladı.
| Metrikler | 13.10.2024 > 9.11.2024 | 2024-11-24 > 2024-12-21 | Delta |
|---|---|---|---|
| LCP | 3725ms | 2.674 ms | -%28,21 |
| INP | 521ms | 395ms | -%24,18 |
| CLS | 0,46 | 0,08 | -%82,61 |
| Geri-İleri Önbellek isabet oranı | %0,02 | %72,90 | +72,87 puan |
Sonuç
Bu sonuçlar, ön oluşturmanın bir e-ticaret sitesinin performansını önemli ölçüde iyileştirme potansiyelini göstermektedir. Ray-Ban, gelecekteki gezinmeler için sayfaları kullanıcı davranışına göre önceden oluşturarak hem Core Web Vitals'ı iyileştirdi hem de daha iyi kullanıcı etkileşimi sağladı ve satışları artırdı. Bu avantaj, Ray-Ban'ın yalnızca gelecekteki gezinmeler için değil, bfcache tarafından sağlanan geri/ileri gezinmeler için de sorunsuz gezinme sunma taahhüdünü güçlendirdi.
Bu örnek olayda, modern web performansı tekniklerinin kullanılmasının teknik metrikler ile işletme TPG'leri arasındaki boşluğu nasıl doldurabileceği ve kullanıcı deneyimi ile e-ticaret başarısı için yeni bir karşılaştırma ölçütü oluşturabileceği vurgulanmaktadır.
Bu çalışmaya katkıda bulunan Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard ve Jeremy Wagner'a özel teşekkürler.