Web performansına odaklanıldığında Tokopedia'nın tıklama oranı nasıl %35 arttı?

İşletmenizin başarılı olmasını sağlamak için web performans gösterge tablosu oluşturma ve JavaScript'i, kaynakları ve ana sayfayı optimize etme.

Tokopedia, Endonezya'daki en büyük e-ticaret şirketlerinden biridir. Ülke çapında 2, 7 milyondan fazla satıcı ağı, 18 milyondan fazla ürün listelemesi ve ayda 50 milyondan fazla ziyaretçi ile web ekibi, web performansına yatırım yapmanın çok önemli olduğunu biliyordu. Performansa öncelik veren bir kültür oluşturarak tıklama oranlarında (TO) %35, dönüşüm sayısında (DO) %8 artış elde ettiler.

35%

TO artışı

8%

DO'daki artış

4sn

TTI'da iyileştirme

Fırsatı vurgulama

Web ekibi, kullanıcı deneyimini ve etkileşimini artırmak için web performansına yatırım yapmanın önemiyle ilgili lider ekibiyle konuştu ve 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 çeşitli adımlar attı:

  • Kritik oluşturma yolu için optimizasyon sağlamak amacıyla üçüncü taraf komut dosyalarını seçerek yüklemek için komut dosyası denetleyici kitaplığı oluşturuldu.
  • Ağır kitaplıklar, daha hafif kitaplıklarla 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 cihazlar için yüksek kaliteli resimler yüklendi, yavaş ağlardaki cihazlar için ise düşük kaliteli resimler kullanıldı).
  • Ekranın alt kısmındaki geç yüklenen resimler.
  • Kritik olmayan JavaScript'lerin yüklenmesi ertelendi.
Komut dosyası denetleyici kitaplığı TTI'yı 4 saniye iyileştirdi

Ana sayfa optimizasyonu

Ekip, web sitesine ilk kez gelen ziyaretçiler için ana sayfanın basit sürümünü oluşturmak amacıyla Svelte'ı kullandı ve böylece hızlı bir web sitesi deneyimi sundu. Bu sürüm, hafif olmayan öğeleri arka planda önbelleğe almak için bir hizmet çalışanı da kullandı.

Uygulama JavaScript boyutu %88 azaltıldı (320 KB'tan 37 KB'ye). Lighthouse puanı 90 puan yükseltildi. 1 saniyeden kısa bir sürede FCP elde edildi. %35 TO artışı. DO'da% 8 artış.

Performans için bütçe oluşturma ve izleme

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

  • Ağ kalitesini, altyapı izlemeyi, ön uç performansını ve sunucu performansını ölçer.
  • Saha ve laboratuvar metriklerini izlemek için web platformu API'leri (ör. Resource Timing API ve Server-Timing başlığı), PageSpeed Insights (PSI) API ve Chrome Kullanıcı Deneyimi Raporu verilerinin bir kombinasyonunu kullanır.
  • Resim optimizasyonu fırsatlarını belirlemek için Lighthouse'daki resimleri analiz eder.
  • Sürekli entegrasyon (CI) sırasında paket boyutunda bütçe zorunlu kılar. Paket boyutu bütçeyi aşarsa CI çalıştırması başarısız olur.
Ana sayfada 2,2 saniyelik TTI puanı (Lighthouse puanı: 88). Ürün sayfalarında 1,9 saniyelik TTI puanı (Lighthouse puanı: 86).

Bir e-ticaret işletmesi olarak, kullanıcı edinme başarımızın temelini oluşturuyor. Web'in öneminin farkındayız ve kullanıcılarımıza en iyi kullanıcı deneyimini sağlayacak tüm araçlara ve özelliklere yatırım yapma konusunda tutkuyla çalışıyoruz.

Dendi Sunardi, Mühendislik Yöneticisi, Web Platformu, Tokopedia

Hindistan ve Güneydoğu Asya'dan diğer başarı öyküleri için Web'de ölçeklendirin: örnek olaylar sayfasına göz atın.