Web performansına odaklanmak, Tokopedia'nın tıklama oranını nasıl yüzde 35 artırdı

İş / işletme başarısına ulaşmak için bir web performans panosu oluşturmak ve JavaScript’i, kaynakları ve ana sayfayı optimize etmek üzerine Google verilerine dayanarak bir vaka çalışması örneği daha veriyoruz.

Tokopedia, Endonezya’daki en büyük e-ticaret şirketlerinden biridir.

2,7 milyondan fazla ülke çapında satıcı ağı, 18 milyondan fazla ürün listesi ve aylık 50 milyondan fazla ziyaretçi ile web ekibi, web performansına yatırımın önemli olduğunu biliyordu.

Önce performans kültürü oluşturarak tıklama oranlarında (TO veya CTR- click through rate) %35 ve dönüşümlerde (DO veya CVR- conversion rate) %8 artış elde ettiler.

web performansına odaklanmak tıklama oranını yükseltir

Fırsatı vurgulamak

Web ekibi, kullanıcı deneyimini ve katılımını iyileştirmek için web performansına yatırım yapmanın önemi konusunda lider ekipleriyle konuştu ve ayrıca gelişmiş kalıplar ve API’ler kullanarak performansın etkisini gösterdi.

Kullandıkları yaklaşım

JavaScript ve kaynak optimizasyonu

Oluşturmayı engelleyen veya uzun süre çalışan JavaScript, performans sorunlarının yaygın bir nedenidir.

Ekip bunu en aza indirmek için birkaç adım attı:

  • Kritik oluşturma yolunu optimize etmek üzere üçüncü taraf komut dosyalarını seçerek yüklemek için bir komut dosyası denetleyici kitaplığı oluşturun.
  • Daha ağır kitaplıklar, daha hafif kitaplıklar ile değiştirildi.
  • Kod bölme uygulandı ve ekranın üst kısmındaki içerik için optimize edildi.
  • Uyarlanabilir yükleme uygulandı, ör. yalnızca hızlı ağlardaki aygıtlar için yüksek kaliteli görüntüler yükleme ve yavaş ağlardaki aygıtlar için daha düşük kaliteli görüntüler kullanma.
  • Tembel yüklenen üst ekranın alt kısmındaki resimler.
  • Kritik olmayan JavaScript’in ertelenmiş olarak yüklenmesi.

Ana sayfa optimizasyonu

Ekip, Svelte (ücretsiz ve açık kaynaklı bir ön uç derleyici) ilk kez ziyaret edenler için ana sayfanın basit bir sürümünü oluşturmak için kullandı ve hızlı bir web sitesi deneyimi sağladı. Bu sürüm ayrıca, hafif olmayan varlıkları arka planda önbelleğe almak için bir hizmet çalışanı kullandı.

Performans bütçeleme ve izleme

Ekip, web sayfalarının kalitesini artırmak için Google Lighthouse ve diğer araçları kullanarak bir performans izleme panosu oluşturdu:

  • Ağ kalitesini, altyapı izlemeyi, ön uç performansını ve sunucu performansını ölçer.
  • Saha ve laboratuvar ölçümlerini izlemek için web platformu API’leri, Sayfa Hızı İçgörüleri (PageSpeed Insights – PSI) API’si ve Chrome Kullanıcı Deneyimi Raporu verilerinin bir kombinasyonunu kullanır.
  • Görüntü optimizasyonu fırsatlarının belirlenmesine yardımcı olmak için Lighthouse’dan gelen görüntüleri analiz eder.
  • Sürekli entegrasyon (CI – continious integration) sırasında paket boyutunda bir bütçe uygular. Paket boyutu bütçeyi aşarsa CI çalıştırması başarısız olur.
etki analizi

Tokopedia Web Platformu Mühendislik Müdürü Dendi Sunardi şunları söyledi:

”Bir e-ticaret işletmesi olarak kullanıcı edinme başarımızın merkezinde yer alıyor. Web’in öneminin farkındayız ve bu nedenle kullanıcılarımıza en iyi kullanıcı deneyimini sağlayacak tüm araçlara ve özelliklere yatırım yapma konusunda tutkuluyuz.”

Bu yazının İngilizce orijinali Google tarafından yayınlandı (bu bağlantıdan ulaşabilirsiniz).

Bu vaka çalışması da (TurboPak’dan bağımsız olarak), web performansına odaklanmanın ve gerekenleri yapmanın ne derece gerekli ve etkili olduğunu gösteren gerçek dünya örneklerinden bir başkasıdır. Size TurboPak olarak web sitemizde sunduğumuz vaka çalışmalarından bir diğeridir.

TurboPak - Web Sitenizi Hızlandırın