Rakuten 24, gerçek kullanıcıların Web Verileri'ni ölçen iyi bir Largest Contentful Paint (LCP) sayesinde de %61,13 dönüşüm oranı artışı sağlayabileceğini belirledi.
Rakuten 24; sağlık, içecek, evcil hayvan malzemeleri ve bebek ürünleri gibi çok çeşitli günlük ihtiyaç ürünleri sunmak için hem çok uluslu hem de yerel ölçekte büyük tüketici ürünleri üreticileriyle birlikte çalışan bir online mağazadır. Bu mağaza, internet hizmetleri alanında dünya lideri olan Rakuten Group, Inc. tarafından sağlanıyor ve Japonya'daki dijital pazar yeri platformunda en iyi performans gösteren mağazalar arasında yer alıyor.
Web performansının kullanıcı deneyimi üzerindeki etkisini anlayan Rakuten 24 ekibi, Core Web Vitals ve diğer metrikleri sürekli olarak ölçüyor, optimize ediyor ve izliyor.
Bunun sonucunda kullanıcılarının% 75'inden fazlası, iyi Largest Contentful Paint (LCP), First Input Delay (FID) ve First Contentful Paint (FCP) deneyimleri yaşamaktadır. Ancak Cumulative Layout Shift (CLS) iyileştirmeleri üzerinde çalışmaya devam ediyorlar.
Rakuten 24, ana sayfa verilerini analiz ettikten sonra, iyi bir LCP puanının şunlara neden olabileceğini tespit etti:
- Dönüşüm oranında% 61,13'e varan artış.
- Ziyaretçi başına gelirde% 26,09.
- ortalama sipariş değerinde% 11,26 artış oldu.
- İyi bir FID puanı, dönüşüm oranında% 55,88'e varan artış sağlayabilir.
Rakuten 24, Core Web Vitals ile işletme metriklerini daha da ilişkilendirmek için Core Web Vitals ve ilgili metrikleri optimize etmeye odaklanan bir A/B testi de gerçekleştirerek şu alanlarda iyileşme elde etmiştir:
- Ziyaretçi başına gelirde% 53,37.
- dönüşüm oranında% 33,13.
- ortalama sipariş değerinde% 15,20 artış olduğunu gösteriyor.
- harcanan ortalama süre% 9,99.
- Çıkış oranında% 35,12 azalma.
Fırsatı vurgulayın
Web performansını optimize etmek, kullanıcı deneyimini iyileştirmek ve iş büyümesini iyileştirmek için akıllıca bir yatırım olsa da Rakuten 24 ekibi paydaşları Core Web Vitals'ı kullanmaya ve web performansına odaklanmaya ikna etmenin ne kadar zor olabileceğinin farkında. Paydaşlara performans optimizasyonunun tam olarak ne tür bir Yatırım Getirisi (YG) sağlayabileceğini göstermenin, onları sürece dahil etmenin en iyi yolu olduğuna inanıyorlar.
Nispeten yeni ve bağımsız bir hizmet olan Rakuten 24, bu zorluğun üstesinden gelmek için esneklik avantajından yararlandı. Vaka analizinin sonucunun hem gelecekte daha veri odaklı kararlar almalarına hem de diğer geliştiricilerin çalışmalarının etkisini ölçmelerine ve paydaşlarını performansı iyileştirmenin yatırıma değer olduğuna ikna etmelerine yardımcı olacağına inanıyorlar. Bunu nasıl yaptıklarını bu gönderiden öğrenebilirsiniz.
![Rakuten 24'ün ana sayfasını gösteren örnek ekran görüntüleri. Her ekran görüntüsünün etrafında mobil cihaz çerçeveleri gösteriliyor.](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=5&hl=tr)
JavaScript'i ve kaynakları optimize edin
- Oluşturmayı engelleyen kaynakları ortadan kaldırın.
- Kodu bölün ve dinamik
import()
kullanın. - Tüm içeriği ayrı parçalara bölebilir ve ekranın alt kısmındaki HTML dosyalarını geç yükleyebilirsiniz.
- JavaScript'i isteğe bağlı olarak çalıştırın ve yükleyin.
<script>
etiketlerinde eşzamansız özelliğini kullanarak ve önemli kaynaklara (dns-prefetch
,preconnect
vepreload
gibi kaynak ipuçları) erken bağlantılar kurarak yavaş JavaScript kaynaklarını belirleyin ve yükleme sürecini optimize edin.- Kullanılmayan kodları kaldırın ve kodu küçültüp sıkıştırın.
- CDN kullanın.
- Workbox ile Service Worker'ı kullanarak önbelleğe almayı denetleyin.
Resimleri optimize edin
- Ekranın alt kısmındaki resimleri geç yükleyin.
- CDN ile resimleri optimize edin, uygun boyutlu resimler yayınlayın, resimleri sıkıştırın ve iş için doğru resim biçimlerini (WebP, SVG, Web Yazı Tipleri) kullanın.
CLS'yi optimize etme
- Resimler yüklenirken CSS'yi
aspect-ratio
kullanarak resimler için gerekli alanı ayırın. - Öğeler geç yüklenirken düzen kaymalarını en aza indirmek için CSS'yi
min-height
kullanın.
Performans ölçümü
Ekip, web sitesini denetlemek için PageSpeed Insights'ı kullanmanın yanı sıra, kullanıcıların sahada gerçekten neler yaşadığını öğrenmenin daha iyi bir yolunu bulmak istiyordu. Bu nedenle Rakuten 24, Core Web Vitals ile sahadaki diğer metrikleri ölçmek ve verileri şirket içi analiz aracına göndermek için web-vitals JavaScript kitaplığını kullanmaya karar verdi.
![Rakuten 24'ün web vitals izleme entegrasyonu akışı. İlk adım, komut dosyasını Rakuten 24 web sitesine ekleyerek web-vitals kitaplığını entegre etmektir. Bunun ardından, web vitals verileri gerçek kullanıcı metriklerinden ölçülebiliyor ve veriler Rakuten 24'ün şirket içi veri toplama aracına gönderiliyor.](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=5&hl=tr)
Performans analizi
Ekip, Önemli Web Verileri ve temel işletme metrikleri arasında herhangi bir bağlantı olup olmadığını belirlemek için toplanan alan verilerini analiz etti. Dönüşüm gerçekleştiren kullanıcıların, dönüşüm sağlamayan kullanıcılara göre daha iyi bir LCP elde etme eğiliminde olduğunu tespit ettiler.
![LCP'ye göre dönüşüm gerçekleştiren kullanıcılarla gerçekleştirmeyenlerin karşılaştırılması. Daha sık dönüşüm gerçekleştiren kullanıcı grubu, daha düşük bir LCP ile karşılaştı.](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=5&hl=tr)
Toplanan veriler şunları da ortaya çıkardı:
- İyi bir LCP, dönüşüm oranında% 61,13'e, ziyaretçi başına gelirde% 26,09'a ve ortalama sipariş değerinde% 11,26'ya varan artışa yol açabilir.
- İyi bir FID, genel ortalama verilere kıyasla dönüşüm oranında% 55,88'e varan bir artışa yol açabilir.
![Dönüşüm oranı ve LCP süresine göre gruplandırılmış LCP. LCP daha düşük olduğunda daha sık dönüşüm gerçekleştiren kullanıcılar ve kullanıcıların% 61, 13'ü bir saniye veya daha düşük LCP ile dönüşüm gerçekleştiriyor.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=5&hl=tr)
![Ziyaretçi başına gelire ve LCP süresine göre gruplandırılmış LCP. Daha düşük LCP'ye sahip kullanıcılar daha fazla gelir sağladı ve LCP bir saniye veya daha düşük olduğunda kullanıcı başına% 26, 09 daha fazla gelir sağlandı.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=5&hl=tr)
![Ortalama sipariş değeri ve LCP süresine göre gruplandırılmış LCP. Daha düşük LCP'ye sahip kullanıcıların ortalama sipariş değeri, LCP bir saniye veya daha düşükken% 11,26 daha yüksekti.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=5&hl=tr)
![FID, dönüşüm oranı ve FID zamanına göre gruplandırılmıştır. FID daha düşük olduğunda daha sık dönüşüm gerçekleştiren kullanıcılar ve FID değeri 50 milisaniye veya daha düşük olan kullanıcıların% 55, 88'i dönüşüm gerçekleştirir.](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=5&hl=tr)
Performans izleme
Ekip, sahada toplanan verileri ve iş zekası aracını kullanarak bir performans izleme kontrol paneli oluşturdu. Bu adım, ilerlemenin izlenmesi ve regresyonların önlenmesi açısından önemlidir.
![Her Önemli Web Verileri (LCP, CLS ve FID) için Rakuten 24 dahili performans izleme kontrol panelinin ekran görüntüsü.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=5&hl=tr)
A/B testi
A/B testlerinin performans optimizasyonlarının işletme üzerindeki etkisini ölçmek için iyi bir yol olduğuna inanan ekip, açılış sayfalarından birini Core Web Vitals için optimize etti ve ardından bir ay boyunca A/B testi aracılığıyla optimize edilmiş sürümü orijinal sayfayla karşılaştırdı. Testin anlamlı sonuçlar elde edebilmesi için önemli miktarda trafik ve dönüşüm sağlayan bir açılış sayfası seçmiştir. Test süresi boyunca, trafiğin% 50'si optimize edilmiş açılış sayfasına (A sürümü) ve% 50'si orijinal sayfaya (B sürümü) gönderildi. Sürüm A ile sürüm B arasındaki tek fark, sürüm A'nın Core Web Vitals için optimize edilmiş olması ve başka işlevsel veya görsel fark olmamasıydı.
![Rakuten 24 web sitesi için mobil A/B testinin ekran görüntüsü. Her sürüm görsel ve işlevsel olarak aynıydı, daha iyi Core Web Vitals için optimize edilmiş A sürümü vardı.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=5&hl=tr)
Optimize edilmiş A sürümü, mobil yük testinde yüklemeyi 0,4 saniye daha önce tamamlamıştır ve belirgin bir düzen değişikliği göstermiyor. Öyle ki, A sürümünün CLS'si B sürümüne kıyasla% 92,72 iyileşti. Diğer Web Verileri puanları da arttı: FID%7,95, FCP%8,45 ve TTFB%18,03 iyileşti.
![Rakuten 24 ana sayfasının startup karşılaştırması. 2 saniye içinde yüklenen B Sürümüne kıyasla, Sürüm A'nın yüklenmesi 1,6 saniye içinde ve daha iyi yüklenmesi için optimize edilmiştir.](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=5&hl=tr)
Rakuten 24, optimize edilmiş A sürümü ile optimize edilmemiş B sürümünün karşılaştırılmasında, A sürümünün şunları sağladığını tespit etmiştir:
- Ziyaretçi başına gelirde% 53,37 artış.
- %33,13 arttı.
- Ortalama sipariş değerinde% 15,20 artış.
- Harcanan ortalama sürede% 9,99 artış.
- Çıkış oranında% 35,12 azalma.
![Rakuten 24 ana sayfası için Core Web Vitals iyileştirmelerinin ekran görüntüsü. İstatistikler, ziyaretçi başına gelirde% 53,37, dönüşüm oranında% 33,13, ortalama sipariş değerinde% 15,2 artış, sayfalarda geçirilen ortalama sürede% 9,99 artış ve çıkış oranında% 35,12 oranında düşüş elde etti.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=5&hl=tr)
Sonuç
Web performansı optimizasyonu zorlu ancak ödüllendirici bir süreçtir. Rakuten 24, veriye dayalı bir yaklaşım benimseyerek başarılı bir şekilde daha iyi kullanıcı deneyimi sundu ve işletme üzerindeki olumlu etkiyi ölçtü. Bunun varış noktası değil yolculuğun yalnızca bir parçası olduğunu fark eden şirket, internetten alışveriş yapan kullanıcılara daha keyifli deneyimler sunmak için web sitelerini iyileştirmeye devam edecek.
Optimizasyon için ortak çalışma yapılması gerekir ve geliştiriciler bu yolculukta yalnız olmak zorunda değildir. Rakuten 24, mücadelelerini ve başarılarını paylaşarak daha fazla geliştiricinin Core Web Vitals verilerini kullanarak paydaşlarla karşılıklı bir anlayış geliştirmesini, ardından yüksek kaliteli kullanıcı deneyimi ve iş büyümesi için birlikte çalışmasını umuyor.