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

Bir startup'ın sınıfının en iyisi web deneyimini oluşturma hikayesi.

Hakkında

2015 yılında kurulan Truebil, %100 sertifikalı ikinci el arabaların satıldığı bir Hint online pazar yeridir. Aylık etkin kullanıcı sayısı 1,4 milyonu aşan bu platform; tapu devri, sigorta, kredi ve servis garantileri gibi hizmetleri tek bir noktada sunar. Potansiyel müşteriler, resimlerin ve ayrıntılı inceleme raporlarının yer aldığı ürün sayfalarını tek tek görebilir. Ayrıca, sitenin "Karşılaştır" ve "Truescore" özelliklerini kullanarak araç değerlendirmeleri alabilir. Truebil, makine öğrenimine dayalı kişiselleştirilmiş öneriler, favorilere ekleme özelliği ve araba paylaşma özelliği gibi zengin özelliklerle ürününü farklılaştırıyor.

Zorluk

Truebil, düşük sıklıkta ve yüksek değerli işlemlerin yapıldığı bir yalın başlangıç şirketi olduğundan öncelik verilecek ve yatırım yapılacak doğru platformu seçmek kritik önem taşıyordu.

Truebil, hedef platform olarak mobil cihazları belirledi ve web'in kolay keşfedilmesi ve düşük sürtünme oranı nedeniyle ilk uygulaması Truebil Lite için web'i seçti. 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 sunar. Truebil, Progressive Web App (PWA) oluşturarak web'in tüm avantajlarından ve iOS/Android'in faydalarından yararlanabilir.

Çözüm

Şirket içi bir ekip, React, Django ve Preact'i (üretim geçişi için) kullanarak Truebil Lite'ı dört ayda geliştirdi. Kullanıcı hedeflerine dayalı olarak web uygulaması için net yol gösterici ilkeler belirlediler. Deneyim şu şekilde olmalıydı:

• İlk yüklemede ve sonraki gezinmelerde hızlı
• Güvenilir, kullanıcının ağ veya cihaz kısıtlamalarından bağımsız ve
• Etkileşimli (özellikle küçük mobil ekranlar için), böylece kullanıcılar geri dönmek isteyecek.

Hızlı ilk yükleme ve gezinme için optimizasyon

Performans optimizasyonlarına rehberlik etmek için Lighthouse'u kullanan ekip, yeni özellikleri uygularken performansa öncelik veren bir kültür benimsedi. Truebil, First Contentful Paint ve Time to Interactive (TTI) metriklerine öncelik vererek ve hızlı ilk yüklemeler, tekrar ziyaretler ve sorunsuz gezinme için optimizasyon yaparak kullanıcı deneyimini önemli ölçüde iyileştirdi. Ekip, performans bütçeleri belirleyerek ve bu bütçelere ulaşmak için çeşitli teknikler kullanarak bu sonuçları elde etti.

Performans bütçeleri belirleme

Performansı öncelikli tutan bir yaklaşımla Truebil ekibi, deneyimlerini ilk yükleme için sunucu tarafında oluşturma, sonraki yüklemeler için ise istemci tarafında oluşturma ile tek sayfalık bir uygulama olarak tasarlamayı tercih etti. İstemci tarafında 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, etkileşim süresini beş saniyenin altında tutmak amacıyla katı kilometre taşı tabanlı bütçeler belirledi. Bu hedefe ulaşmak için derlemelerin 250 KB JavaScript paketi boyutunu aşmadığından manuel olarak emin oldular, resim boyutlarını sürekli kontrol ettiler ve uygulamanın Lighthouse performans puanını sürekli olarak takip ettiler.

JavaScript paketlerini optimize etme

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

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

Ekip, JavaScript paketiyle ilgili darboğazları gidermek için kod bölme yoluyla yükleri azalttı. Ana paketin boyutunu küçültmek için bileşen ve rotaya dayalı parçalama yöntemini kullandılar.Bu sayede yükleme sürelerini %44 iyileştirdiler.Etkileşime Hazır Olma Süresi (TTI) 6 saniyeden yaklaşık 5 saniyeye, İlk Anlamlı Boyama (FMP) ise 4,1 saniyeden 3,6 saniyeye düştü.

Önemli CSS'yi satır içine yerleştirme

Ekip, FMP'yi daha da iyileştirmek için Lighthouse'u kullanarak performans optimizasyonlarının etkisini doğruladı ve fırsatları belirledi. Lighthouse, oluşturmayı engelleyen CSS'nin azaltılmasının en büyük etkiyi yaratacağını belirtti. Bu nedenle Truebil, tüm kritik CSS'yi satır içine yerleştirdi ve kritik olmayan CSS'yi erteledi. Bu teknik, FMP'yi yaklaşık 2 saniye azalttı.

Herhangi bir kaynağa birden fazla ve maliyetli gidiş-dönüş yolculuk yapmaktan kaçının.

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

Sonraki sayfayı dinamik olarak önceden getirme

Ekip, verilerini analiz ederek optimize edebilecekleri 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, önceden getirilmesi gereken bağlantıları manuel olarak tanımlarken bu bağlantıların JS'sini paketlemek için webpack'i kullanır.

Resimleri ve yazı tiplerini optimize etme

Resimler, Truebil'in ürün deneyimi ve güvenilirliğinin önemli bir parçasıdır. Her ürün listelemesi 40'a kadar resim içerir. Resimlerin sayfa yüklemesini engellememesi için ekip, tüm kaynaklarını bir CDN'den sunmayı ve resim optimizasyonu için imagemagick 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.

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

Diğer optimizasyonlar

Uygulama hazır olduğunda ekip, satıcı paketi boyutunu ve JavaScript yürütme süresini daha da azaltmak istedi. Bu nedenle, üretimdeki React uygulamasını Preact'e geçirdi. (Daha fazla bilgiyi React koleksiyonunda bulabilirsiniz.) Bu yaklaşım, satıcı paketi boyutunu 82,3 KB'tan 51,2 KB'a düşürmelerine yardımcı oldu.

Güvenilirliği artırın

Hindistan pazarına odaklanan Truebil'in kullanıcılarının büyük bir çoğunluğu, ürünlerine bazen 2G kadar düşük bant genişliklerine sahip olan düzensiz ağlardan 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, 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şim düzeyi ve değişim hızı büyük ölçüde farklılık gösteriyor. Truebil ekibi, içeriklerinin tümünün hem güncel hem de güvenilir olmasını sağlamak için ağa öncelik, önbelleğe öncelik ve en hızlıya öncelik stratejilerinin bir kombinasyonunu kullanarak API önbelleğe alma özelliğini uyguladı.

Truebil, abonelikler sayfası gibi statik sayfalar için önce abonelik API önbelleğine gidip ardından ağa geri dönen bir önbellek öncelikli strateji kullanır.

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

Truebil, ana sayfa, filtre, arama ve şehir sayfaları gibi sık sık değişen dinamik sayfalar için önce ağ veya önbellek arasında seçim yapmak üzere önce en hızlı olanı kullanma stratejisini kullanır. İçeriğin güncel olmasını sağlamak için ağ yanıtı önbellekteki içerikten 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ı oldukça dinamik olsa da (arabalar herhangi bir zamanda eklenebilir veya satın alınabilir) ekip, kullanıcılarının kesintili ağ bağlantısı kullanıyor olsalar veya tamamen çevrimdışı olsalar bile etkileşim kurabilecekleri bazı içeriklere sahip olmasını istiyordu.

Ekip, service worker'ları kullanarak hem statik verileri hem de kullanıcının daha önce etkileşimde bulunduğu dinamik verileri önbelleğe alabildi. Böylece kullanıcı, bu verileri çevrimdışı olarak görüntüleyebildi. Ekip, kullanıcıların tekrar internete bağlandıklarında içeriğin değişebileceğini anlamaları için kullanıcı arayüzünü çevrimdışı modu gösterecek şekilde gri tonlamalı olarak değiştirdi. Ürün sayfalarına göz atmak, 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 listelere ve ürün sayfalarına göz atabilir ancak listede veya üründe yapılan güncellemeleri göremez.

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

Etkileşimli 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 kullanıyor ancak bu sistem, ilk kez giriş yapan kullanıcılar için çalışmıyor.

Ekip, ilk kez kullanan kullanıcıların yeni başlatma sorunu yaşamaması için dijital pazarlama çalışmalarını kullanarak bir öneri sistemi entegre etti. Bu platformlar, araba modeli, fiyat ve gövde tipi gibi ürün ayrıntılarını, öneri sistemleri tarafından okunan ve gösterilen ürünlere yansıtılan bir UTM parametresi aracılığıyla reklamın hedef URL'sine ekler. Sistem URL'de bu tür ayrıntılar okuyamazsa popüler arabalara geri döner. Bu, popüler modellerin, popüler bütçelerin ve son birkaç hafta veya gün içinde popüler olan arabaların bir kombinasyonudur.

Yüklenebilir bir 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 geri gelmeye devam etmesini sağlamak istiyordu. Uygulamanın yüklenebilir olmasının, tekrar ziyaretleri çok daha sorunsuz hale getireceğini fark ettiler.

Ekip, ürünlerini 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ıyordu. Çevrimdışı modu daha önce uygulamış olan ekip, yeni özelliği kolayca ekleyebildi.

Kullanıcılarına spam gönderilmesini önlemek ve kullanıcıların 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ı türdeki kullanıcılara gerçekten faydalı olacağı zamanlarda gösterilecek. Truebil üç aşamalı bir stratejiye karar verdi:

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

İşlem tamamlandığında ve yüksek trafikli sayfalarda varsayılan banner'lar

Ekip, kullanıcı bir görevi tamamladığında veya yüksek trafikli sayfalarda ancak boşta olduğunda (ör. kaydırma veya form doldurma gibi bir işlem yapmadığında) yükleme banner'ı göstermeye karar verdi. Bu yaklaşım, kullanıcının etkinliğinin kesintiye uğramasını önlemelerini sağladı.

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

Uygulamayla bir süredir etkileşimde bulunan kullanıcılar için ekip, uygulamayı ana ekrana yüklemenin değerini göstermek amacıyla bağlama uygun özel mesajlar kullandı:

Zamana dayalı istemler için özel banner

Son olarak ekip, belirli etkinliklerde (ör. bir listeleme sayfasını açma veya kullanıcının uygulamada belirli bir süre geçirmesi) tetiklenen, bildirim benzeri bir tasarıma sahip, rahatsız etmeyen bir banner oluşturdu:

Bu iyileştirmeler sayesinde Truebil'in dönüşüm ve etkileşim oranları önemli ölçüde arttı. Kullanıcı oturumları% 26 daha uzun sürdü ve % 61 daha fazla dönüşüm elde edildi. Her dönüşümün yüksek işlem değeri göz önüne alındığında bu artışlar işletme için büyük önem taşıyor.

Kaynakları sınırlı olan bir startup için doğru platformu seçmek, işletmenin başarısı açısından kritik öneme sahip olabilir. Hız, esneklik ve etkileşime odaklanan bir PWA'ya geçiş yaparak dönüşümlerin artması ve web'in sorunsuz erişimi sayesinde gelirin pazarlama harcamalarına oranını %80 artırdık.

Rakesh Raman, Truebil'in kurucu ortağı ve Ürün ve Veri Bilimi Başkanı