Truebil, web'i nasıl büyüme kanalı haline getirdi?

Bir girişimin sınıfının en iyisi web deneyimi oluşturma hikayesi.

Harleen Batra
Harleen Batra

Hakkında

2015 yılında kurulan Truebil, %100 sertifikalı ikinci el arabalar satan bir Hindistan merkezli online pazar yeridir. Aylık 1,4 milyondan fazla etkin kullanıcısı olan bu platform; mülk devri, sigorta, kredi ve servis garantilerini kapsayan tek noktadan çözüm sunar. Potansiyel müşteriler, resimler ve ayrıntılı muayene raporları içeren ürün sayfalarını tek tek görebilir ve sitenin "Karşılaştır" ve "Truescore" özellikleriyle araç değerlendirmeleri alabilir. Truebil, ürününü makine öğrenimine dayalı kişiselleştirilmiş öneriler, favorilere ekleme özelliği, araç paylaşma özelliği ve daha fazlası gibi zengin özelliklerle farklılaştırıyor.

Zorluk

Truebil, düşük sıklıkta ve yüksek değerli işlemlere sahip, yalın bir girişim. Bu nedenle, öncelik verilecek ve yatırım yapılacak doğru platformu seçmek kritik öneme sahipti.

Truebil, hedef platformu olarak mobil cihazları belirledi ve ilk uygulaması Truebil Lite için web'i seçti. Bunun nedeni, web'in kolay bulunabilirliği ve düşük sürtünmesidir. Web teknolojisi, Android/iOS uygulaması oluşturmaya kıyasla daha düşük geliştirme maliyetleri, daha az veri ve bellek kullanımı ve önemli ölçüde daha düşük müşteri edinme maliyetleri sağlar. Truebil, progresif web uygulaması (PWA) oluşturarak web'in tüm avantajlarını ve iOS/Android'in avantajlarını elde edebildi.

Çözüm

Şirket içi bir ekibin, React, Django ve Preact'i (üretim taşıma için) kullanarak Truebil Lite'ı geliştirmesi dört ay sürdü. Kullanıcı hedeflerine dayalı olarak web uygulaması için net yol gösterici ilkeler belirlediler. Deneyim şu özelliklere sahip olmalıydı:

  • İlk yükleme ve sonraki gezinmelerde hızlı,
  • Kullanıcının ağı veya cihaz kısıtlamalarından bağımsız olarak güvenilir ve
  • Özellikle küçük mobil ekranlar için etkileyici olmalıdır. Böylece kullanıcılar bu sayfaya geri dönmek ister.

İlk yüklemenin ve gezinmelerin hızlı olması için optimizasyon yapın

Performans optimizasyonlarına rehberlik etmek için Lighthouse'u kullanan ekip, yeni özellikleri uygularken performansa öncelik veren bir kültür benimsedi. Truebil, ilk zengin içerikli boyama ve etkileşime geçme süresi (TTI) metriklerine öncelik vererek ve ilk yüklemelerin hızlı olması, tekrar ziyaretler ve sorunsuz gezinme için optimizasyon yaparak kullanıcı deneyimini önemli ölçüde iyileştirebildi. Ekip, performans bütçeleri belirleyerek ve bu hedeflere ulaşmak için çeşitli teknikler kullanarak bu sonuçlara ulaştı.

Performans bütçeleri ayarlama

Performansı önceleyen bir yaklaşımla Truebil ekibi, deneyimlerini ilk yükleme için sunucu tarafı oluşturma ve sonraki yüklemeler için istemci tarafı oluşturma özelliğine sahip tek sayfalık bir uygulama olarak tasarladı. İstemci tarafı oluşturma özelliğine sahip web uygulamalarının performansını korumak zor olabilir. Bu nedenle Truebil, özellikle daha fazla özellik eklerken hızdan ödün vermemek için çok katı performans bütçeleri belirledi.

Ekip, TTI'yi beş saniyenin altında tutmak amacıyla TTI için dönüm noktalarına dayalı katı bütçeler belirledi. Bu hedefe ulaşmak için hiçbir derlemenin 250 KB JavaScript paketi boyutunu aşmadığından manuel olarak emin oldular, görüntü boyutlarını sürekli olarak kontrol ettiler ve uygulamanın Lighthouse performans puanını sürekli olarak izlediler.

JavaScript paketlerini optimize etme

Ekip, JavaScript yüklerini önceden önbelleğe almak ve optimize etmek için PRPL kalıbını kullanarak ve kritik JavaScript paketlerini yayınlamak için HTTP/2'ye geçerek temel bilgilerden başladı.

Kritik olmayan kaynakları gecikmeli yüklemek için çerçeve düzeyindeki gecikmeli yükleme bileşenlerini kullanarak sayfanın altındaki parçaları yüklediler.

Ekip, JavaScript paketi darboğazlarını ortadan kaldırmak için kod bölme yoluyla yük verimini azalttı. Ana paket boyutunu küçültmek ve yükleme süresini %44 oranında iyileştirmek için bileşene ve yola dayalı parçalara ayırma yöntemini kullandılar. Bu sayede TTI 6 saniyeden yaklaşık 5 saniyeye, ilk anlamlı boyama (FMP) ise 4,1 saniyeden 3,6 saniyeye düştü.

Truebil Lite'ın kod bölme işleminden önceki ve sonraki derleme boyutunu gösteren Chrome Geliştirici Araçları ekran görüntüleri.
Blok boyutunu küçültmenin etkisi.

Kritik CSS'leri satır içine alın

Ekip, FMP'yi daha da iyileştirmek için performans optimizasyonlarıyla ilgili fırsatları bulmak ve bu optimizasyonların etkisini doğrulamak amacıyla Lighthouse'u kullandı. Lighthouse, oluşturmayı engelleyen CSS'yi azaltmanın en büyük etkiyi yaratacağını belirtti. Bu nedenle Truebil, tüm kritik CSS'leri satır içine aldı ve kritik olmayan CSS'leri erteledi. Bu teknik, FMP'yi yaklaşık 2 saniye azalttı.

CSS'nin satır içi olarak yerleştirilmesinden önce ve sonra Truebil Lite'ın ilk anlamlı boyaya kadar geçen süreyi gösteren Chrome Geliştirici Araçları ekran görüntüleri.
Kritik CSS'leri satır içine almanın etkisi.

Herhangi bir kaynak için birden fazla, maliyetli gidiş dönüşten kaçının

Truebil, DNS ve TLS'den kaynaklanan yükü azaltmak için <link rel="preconnect"> ve <link rel="dns-prefetch">'ı kullandı. Bu yaklaşım, tarayıcının sayfa yüklenirken TLS el sıkışmasını en kısa sürede tamamlamasına ve kaynak dışı alan adlarını önceden çözmesine neden olarak güvenli ve hızlı bir kullanıcı deneyimi sağlar.

rel=preconnect özelliğinin etkisini gösteren Chrome Geliştirici Araçları ekran görüntüleri.
<link rel=preconnect> eklemenin etkisi.

Sonraki sayfayı dinamik olarak önceden getirme

Ekip, verilerini analiz ederek optimize edebileceği en yaygın kullanıcı yolculuklarını belirledi. Bu durumlarda uygulama, kullanıcıların sorunsuz bir şekilde gezinmesini sağlamak için <link rel=prefetch> kullanarak bir sonraki sayfa kaynağını dinamik olarak indirir. Ekip, ön beslemesi yapılacak bağlantıları manuel olarak tanımlarken bu bağlantılar için JS'yi paketlemek üzere webpack'i kullanır.

Öğeler önceden getirildiği için yaygın gezinmelerde ağ isteklerine gerek olmadığını gösteren Truebil Lit uygulamasının ve Chrome Geliştirici Araçları&#39;nın ekran görüntüleri.
Ortak kullanıcı yolculukları için öğeleri önceden getirmenin etkisi.

Resimleri ve yazı tiplerini optimize etme

Resimler, her ürün listelemesinde 40'a kadar resim bulunduğundan Truebil'in ürün deneyiminin ve güvenilirliğinin önemli bir parçasıdır. Resimlerin sayfa yüklemesini engellemediğinden emin olmak için ekip, tüm kaynaklarını bir CDN'den yayınlamayı ve resim optimizasyonu için imagemagick'i kullanmayı tercih etti. Ayrıca, yükleme süresini daha da kısaltmak için resimler, JavaScript ve CSS dahil olmak üzere sıkıştırılabilir tüm kaynakları Gzip ile sıkıştırdılar.

Yükleme süresini mümkün olduğunca kısa tutarken yazıların görünmeden yanıp sönmesini önlemek için Truebil, CSS'sini harici yazı tipleri yüklenene kadar yedek olarak sistem yazı tiplerini kullanacak şekilde ayarladı.

Daha fazla optimizasyon

Uygulama hazır olduğunda ekip, tedarikçi paketi boyutunu ve JavaScript yürütme süresini daha da azaltmak istedi. Bu nedenle, React uygulamalarını üretimde Preact'e geçirdiler. (React koleksiyonundan daha fazla bilgi edinebilirsiniz.) Bu yaklaşım, tedarikçi paketi boyutunu 82,3 KB'tan 51,2 KB'ya düşürmelerine yardımcı oldu.

Güvenilirlik inşa edin

Hindistan pazarına odaklanan Truebil'in kullanıcılarının büyük bir kısmı, bazen 2G'ye kadar düşük bant genişliklerine sahip olan düzensiz ağlarda ürünlerine erişiyor. Bu nedenle, yalnızca kısıtlı ağ koşullarında performansı artırmak için değil, aynı zamanda kullanıcılarının güvenebileceği bir ürün (her zaman çalışan bir ürün) sunmak için de esnek bir deneyim oluşturmak kritik önem taşıyordu.

Güvenilir yükleme için karma önbelleğe alma stratejisi

Truebil'in içeriğinin etkileşimi ve değişim hızı çok değişken. Truebil ekibi, tüm içeriğin hem güncel hem de güvenilir olmasını sağlamak için ağ öncelikli, önbelleğe alma öncelikli ve en hızlı öncelikli stratejilerin bir kombinasyonunu kullanarak API önbelleğe alma özelliğini uyguladı.

Abonelikler sayfası gibi statik sayfalarda Truebil, önce abonelik API'si önbelleğine gitmek için önbelleğe öncelikli strateji kullanır ve ardından ağa geri döner.

Truebil, ürün listeleme veya ayrıntılar sayfaları gibi nadiren değişen dinamik içeriğe sahip sayfalarda ağ öncelikli bir strateji kullanır. Böylece tarayıcı, ağ kullanılamıyorsa API önbelleği için geri dönmeden önce ağda içerik olup olmadığını kontrol eder.

Ana sayfa, filtre, arama ve şehir sayfaları gibi sık sık değişen dinamik sayfalar için Truebil, önce en hızlı stratejiyi kullanarak ağ veya önbelleğe göre hangisi önce gelirse onu seçer. İçeriğin güncel olduğundan emin olmak için ağ yanıtı önbellekte bulunandan farklı olduğunda önbellek güncellenir.

Tam çevrimdışı deneyim için hizmet çalışanları

Truebil'in içeriğinin büyük bir kısmı son derece dinamik olsa da (arabalar dilediğiniz zaman eklenebilir veya satın alınabilir) ekip, kullanıcılarının bağlantıları kesintili olsa veya tamamen çevrimdışı olsa bile etkileşimde bulunabilecekleri bir içeriğe sahip olmalarını sağlamak istiyordu.

Ekip, hizmet çalışanlarını kullanarak hem statik verileri hem de kullanıcının daha önce etkileşim kurduğu dinamik verileri önbelleğe alarak kullanıcının bunları çevrimdışı olarak görüntüleyebilmesini sağladı. Ekip, kullanıcıların internete geri döndüklerinde içeriğin değişebileceğini bilmesini sağlamak için kullanıcı arayüzünü, çevrimdışı modu belirtmek üzere gri tonlamaya değiştirdi. Ürün sayfalarına göz atma, Truebil kullanıcı yolculuğunun önemli bir parçasıdır. PWA'yı en az bir kez ziyaret eden kullanıcılar, daha önce ziyaret ettikleri girişlere ve ürün sayfalarına göz atabilir ancak girişte veya üründe yapılan güncellemeleri göremez.

Truebil Lite uygulamasının çevrimdışı moddaki ekran görüntüsü.
Truebil Lite, çevrimdışı modda.

Kullanıcıların geri gelmesini sağlamak için etkileşimi artırma

İlgi çekici bir ilk deneyim

Kullanıcılarının çoğu ücretli kanallardan geldiği için Truebil'in, dönüşümleri artırmak amacıyla hızlı yüklenen web uygulamasını son derece alakalı öneriler sunan bir ürünle desteklemesi gerekiyordu. Ekip, mevcut kullanıcılar için gelişmiş filtrelemeye dayalı bir öneri sistemi kullansa da bu sistem ilk kez giriş yapan kullanıcılar için çalışmaz.

İlk kez uygulamayı kullanan kullanıcılara soğuk bir başlangıç yapmamak için ekip, dijital pazarlama çalışmalarını kullanarak bir öneri sistemi entegre etti. Araba modeli, fiyat ve gövde tipi gibi ürün ayrıntılarını bir UTM parametresi aracılığıyla reklamın hedef URL'sine eklerler. Bu parametre, öneri sistemleri tarafından okunur ve gösterilen ürünlere yansıtılır. Sistem, URL'de bu tür ayrıntılar okumazsa popüler modeller, popüler bütçeler ve son birkaç hafta veya gün içinde popüler olan arabaların bir kombinasyonu olan popüler arabalara geçer.

Yüklenebilir web uygulaması

İlgi çekici bir kullanıcı deneyimi sunan hızlı ve tam özellikli bir web uygulaması geliştiren Truebil, kullanıcılarının uygulamaya tekrar tekrar geri dönmesini sağlamak istiyordu. Uygulamayı yüklenebilir hale getirmenin, tekrar ziyaretleri çok daha sorunsuz hale getireceğini fark ettiler.

Ekip, ürününü tam bir progresif web uygulaması (PWA) haline getirmek için Ana ekrana ekle özelliğini uyguladı. Bu yaklaşım, kullanıcıların Truebil Lite'ı ana ekrana eklemesine ve tam ekran modunda başlatmasına olanak tanıdı. Ekip, daha önce çevrimdışı modu uyguladığından yeni özelliği kolayca ekleyebildi.

Kullanıcılarının spam'e maruz kalmamasını sağlamak ve uygulamayı yükleme olasılığını artırmak için ekip, kısa süre önce PWA yüklemesini tanıtma stratejisini güncelledi. Böylece yükleme istemleri, farklı kullanıcı türleri için gerçekten yararlı olacak şekilde gösterilecek. Truebil, üç bölümden oluşan bir stratejiye karar verdi:

  • Kullanıcı bir işlemi tamamladığında veya boştayken istemler gösterin.
  • Yetişkin kullanıcılara bağlama dayalı istemler gösterin.
  • Kullanıcı sitede belirli bir süre geçirdiğinde banner gösterin.

İşlem tamamlandığında ve trafik yoğunluğu yüksek sayfalarda gösterilen varsayılan banner'lar

Ekip, kullanıcı bir görevi tamamladığında veya yüksek trafik alan sayfalardayken ancak etkin olmadığında (yani ekranı kaydırma veya form doldurma gibi bir işlem yapmadığında) bir kurulum banner'ı göstermeye karar verdi. Bu yaklaşım, kullanıcının etkinliğini kesintiye uğratmadan işlem yapmalarına olanak tanıdı.

Truebil Lite&#39;ın yükleme banner&#39;ının ekran görüntüleri.

Yetişkin kullanıcılar için bağlama dayalı istemler

Ekip, uygulamayla bir süredir etkileşimde bulunan kullanıcılara uygulamayı ana ekrana yüklemenin değerini göstermek için son derece bağlama dayalı özel mesajlar kullandı:

Truebil Lite&#39;ın yetişkin kullanıcılar için bağlama dayalı yükleme istemlerinin ekran görüntüleri.

Zamana dayalı istemler için özel banner

Son olarak ekip, bir listeleme sayfasının açılması veya kullanıcının uygulamada belirli bir süre geçirdikten sonra tetiklenen, bildirim benzeri bir tasarıma sahip, kullanıcının dikkatini dağıtmayan bir banner oluşturdu:

Truebil Lite&#39;ın zamana dayalı yükleme istemi banner&#39;ının ekran görüntüsü.

Bu iyileştirmeler sayesinde Truebil'in dönüşüm ve etkileşim oranları önemli ölçüde arttı. Kullanıcı oturumları% 26 daha uzun ve dönüşüm sayısı% 61 arttı. Her dönüşümün yüksek işlem değeri göz önüne alındığında bu durum işletme açısından önemli bir gelişmedir.

Sınırlı kaynaklara sahip bir girişim için doğru platformu seçmek, işletmenin başarısı açısından kritik olabilir. Hıza, esnekliğe ve etkileşime odaklanan bir PWA'ya geçmemiz, artan dönüşümler ve web'in sorunsuz erişimi sayesinde pazarlama harcamalarına oranla gelirimizi %80 artırmamızı sağladı.

Rakesh Raman, Truebil'in Kurucu Ortağı ve Ürün ve Veri Bilimi Müdürü

%44

Yükleme süresinde iyileştirme

%26

Daha uzun kullanıcı oturumları

61%

Dönüşümlerdeki artış

%80

Gelir-pazarlama harcaması oranında artış