Sınıfının en iyisi web deneyimini sunan bir startup'ın öyküsü.
Hakkında
2015'te kurulan Truebil, %100 sertifikalı ikinci el arabalar satan Hindistan merkezli bir online ticaret sitesidir. Aylık 1,4 milyonu aşkın aktif kullanıcıyla ipotek devri, sigorta, kredi ve hizmet garantilerini kapsayan bir çözüm sunar. Potansiyel müşteriler, sitenin "Karşılaştırma" ve "Truescore" özellikleriyle, görüntüler ve ayrıntılı denetim raporları içeren ayrı ürün sayfalarını görebilir ve araç değerlendirmeleri alabilir. Truebil; makine öğrenimine dayalı kişiselleştirilmiş öneriler, favorilere ekleme özelliği, araba paylaşma özelliği ve daha fazlası gibi zengin özelliklerle ürününü öne çıkarıyor.
Zorluk
Truebil, düşük sıklıkta ve yüksek değerli işlemlere sahip yalın bir girişimdir. Bu nedenle, öncelik verilecek ve yatırım yapılacak doğru platformu seçmek kritik öneme sahipti.
Truebil, hedef platformu olarak mobil ortamı tanımladı ve web'in kolay bulunabilir olması ve iletişimin zorlayıcı olması nedeniyle ilk uygulamaları 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ı sağlar ve önemli ölçüde daha düşük müşteri edinme maliyetleri sunar. Ayrıca Truebil, bir progresif web uygulaması (PWA) oluşturarak web'in tüm avantajlarından ve iOS/Android'in avantajlarından yararlanabilir.
Çözüm
Şirket içi bir ekibin React, Django ve Preact (üretim taşıması için) kullanarak Truebil Lite'ı geliştirmesi dört ay sürdü. Kullanıcı hedeflerine dayanarak web uygulaması için net yol gösterici ilkeler belirledi. Deneyimin şöyle olması gerekiyordu:
- İlk yüklemede 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 ilgi çekici; bu nedenle kullanıcılar geri dönmek isteyecektir.
Hızlı ilk yükleme ve gezinme için optimize edin
Performans optimizasyonlarına yön vermek için Lighthouse'u kullanan ekip, yeni özellikleri uygularken performansa öncelik veren bir kültürü benimsedi. Truebil, İlk Zengin İçerikli Boyama ve Etkileşime Hazır Olma Süresi (TTI) metriklerine öncelik vererek ve hızlı ilk yüklemeler, tekrarlanan ziyaretler ve sorunsuz gezinme için optimizasyon yaparak kullanıcı deneyimini önemli ölçüde iyileştirmeyi başardı. 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 belirleyin
Performans öncelikli bir yaklaşım benimseyen Truebil ekibi, deneyimini ilk yükleme için sunucu tarafında oluşturma ve sonraki yüklemeler için istemci tarafında oluşturma ile tek sayfalık uygulama olarak tasarlamayı seçti. Web uygulamalarını istemci tarafında oluşturma performansı yüksek olacak şekilde tutmak zor olabilir. Bu nedenle Truebil, özellikle yeni özellikler eklendikçe hızdan ödün vermemek için çok katı performans bütçeleri belirler.
Ekip, TTI için ara hedefi temel alan sıkı bütçeler belirler. Bütçeyi beş saniyenin altında tutmak amaçlanır. Bu hedefe ulaşmak için hiçbir derlemenin 250 KB JavaScript paketi boyutunu aşmayacağını manuel olarak sağladılar, resim boyutlarını sürekli kontrol ettiler ve uygulamanın Lighthouse performans puanını sürekli olarak izlediler.
JavaScript paketlerini optimize edin
Ekip, JavaScript yüklerini önceden önbelleğe alıp optimize etmek için PRPL kalıbı kullanarak ve kritik JavaScript paketleri sunmak için HTTP/2'ye geçerek temel konulardan başladı.
Kritik olmayan kaynakları geç yüklemek amacıyla, ekranın alt kısmındaki parçaları yüklemek için çerçeve düzeyindeki geç yükleme bileşenlerini kullandılar.
JavaScript paketi ile ilgili olası performans sorunlarını ortadan kaldırmak için ekip, kod bölme yöntemiyle yükleri azalttı. Bileşen ve rota tabanlı öteleme tekniğini kullanarak ana paket boyutunu küçülttü ve yükleme sürelerini %44 oranında iyileştirdiler. TTI 6 saniyeden yaklaşık 5 saniyeye, İlk Anlamlı Boyama (FMP) ise 4,1 saniyeden 3,6 saniyeye düştü.
Kritik CSS'leri satır içine alın
Ekip, FMP'yi daha da iyileştirmek amacıyla, performans optimizasyonlarının etkisini bulmak ve doğrulamak için Lighthouse'u kullandı. Lighthouse, oluşturma engelleme CSS'sini azaltmanın en büyük etkiye sahip olacağını belirttiğinden Truebil tüm kritik CSS'leri ve ertelenmiş kritik olmayan CSS'leri satır içine aldı. Bu teknik, FMP'yi yaklaşık 2 saniye azaltmıştır.
Varış noktalarına birden fazla ve maliyetli gidiş gelişten kaçının
Truebil, DNS ve TLS'den kaynaklanan ek yükü azaltmak için <link rel="preconnect"> ve <link rel="dns-prefetch"> ağlarını kullandı. Bu yaklaşım, tarayıcının sayfa yüklenirken TLS el sıkışmasını mümkün olan en kısa sürede tamamlamasına ve merkezler arası alan adlarını önceden çözmesine olanak tanıyarak güvenli ve hızlı bir kullanıcı deneyimi sunar.
<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 tür durumlarda uygulama, kullanıcılara sorunsuz gezinme deneyimi sunmak için <link rel=prefetch> kullanarak sonraki sayfa kaynağını dinamik olarak indirir. Ekip, önceden getirilecek bağlantıları manuel olarak tanımlarken, bu bağlantıların JS'sini gruplandırmak için webpack'i kullanır.
Resimleri ve yazı tiplerini optimize etme
Her ürün listesinde 40 adede kadar resimle birlikte resimler, Truebil'in ürün deneyiminin ve güvenilirliğinin önemli bir parçasıdır. Ekip, resimlerin sayfa yüklemeyi engellemediğinden emin olmak için tüm kaynaklarını bir CDN'den yayınlamayı ve resim optimizasyonu için imagemagick'i kullanmayı seçti. Ayrıca, yükleme süresini daha da kısaltmak için resimler, JavaScript ve CSS dahil olmak üzere tüm sıkıştırılabilir kaynakları Gzip ile sıkıştırdılar.
Truebil, yükleme süresini mümkün olduğunca kısa tutarken görünmez metnin yanıp sönmesini önlemek için CSS'sini, harici yazı tipleri yüklenene kadar yedek olarak sistem yazı tiplerini kullanacak şekilde ayarladı.
Diğer optimizasyonlar
Ekip, uygulama hazır olduğunda tedarikçi paketinin boyutunu ve JavaScript yürütme süresini daha da azaltmak istediği için üretimde React uygulamasını Preact olarak değiştirdiler. (React koleksiyonunda daha fazla bilgi edinin.) Bu yaklaşım sayesinde tedarikçi paketi boyutunu 82,3 KB'tan 51,2 KB'a düşürdüler.
Güvenilirlik sağlayın
Hindistan pazarına odaklanan Truebil kullanıcılarının büyük bir çoğunluğu ürünlerine, bazen 2G gibi düşük bant genişliklerine sahip olan düzensiz ağlar üzerinden erişiyor. Bu nedenle dayanıklı bir deneyim oluşturmak, yalnızca kısıtlı ağ koşullarında performansı artırmak için değil, aynı zamanda kullanıcılarının güvenebilecekleri ve her zaman işe yarayan bir ürün sunmak için de son derece önemliydi.
Güvenilir yükleme için karma önbelleğe alma stratejisi
Truebil'in içeriğinin etkileşimi ve değişim hızı oldukça farklılık gösteriyor. Tüm içeriğinin hem yeni hem de güvenilir olmasını sağlamak için Truebil ekibi; ağ öncelikli, önbellek öncelikli ve en hızlı öncelikli stratejilerin bir kombinasyonunu kullanarak API önbelleğe alma işlevini uyguladı.
Truebil, abonelikler sayfası gibi statik sayfalar için önbellek öncelikli bir strateji kullanarak önce abonelik API önbelleğine gidiyor ve daha sonra ağa geri dönüyor.
Truebil, ürün listeleme veya ayrıntı sayfaları gibi nadiren değişen dinamik içeriğe sahip sayfalarda, ağ öncelikli bir strateji kullanır. Böylece tarayıcı, ağ kullanılamadığında API önbelleğine dönmeden önce ilk olarak içeriği kontrol eder.
Truebil, ana sayfa, filtre, arama ve şehir sayfaları gibi sık sık değişen dinamik sayfalarda, hangisinin önce gerçekleştiğine bağlı olarak ağ veya önbellek arasında seçim yapmak için en hızlı ilk stratejiyi kullanır. İçeriğin yeni olduğundan emin olmak için, ağ yanıtı önbellektekilerden farklı olduğunda önbellek güncellenir.
Eksiksiz bir çevrimdışı deneyim için Service Worker'lar
Truebil'in içeriğinin büyük bir bölümü son derece dinamik olmasına rağmen (arabalar herhangi bir zamanda eklenebilir veya satın alınabilir) olsa da ekip, kullanıcılarının ister düz yapılı ağlardan geçerken ister tamamen çevrimdışı olsalar bile etkileşimde bulunabilecekleri bazı içeriklere sahip olduklarından emin olmak istiyordu.
Ekip, Service Worker sayesinde hem statik verileri hem de kullanıcının daha önce etkileşim kurduğu dinamik verileri önbelleğe alıp, kullanıcıların bu verileri çevrimdışı olarak görüntülemesini sağladı. Ekip, kullanıcıların tekrar çevrimiçi olduklarında içeriğin değişebileceğini bilmelerini sağlamak için, çevrimdışı modu belirtmek üzere kullanıcı arayüzünü 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 listelemelere ve ürün sayfalarına göz atabilir ancak listelemede veya üründe yapılan güncellemeleri göremez.
Kullanıcıların geri gelmesini sağlamak için etkileşimi artırın
İlgi çekici bir ilk deneyim
Kullanıcılarının çoğu ücretli kanallardan geldiğinden Truebil, hızlı yüklenen web uygulamasını dönüşümleri artırmak için 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, sistemi ilk kez giriş yapan kullanıcılar için çalışmaz.
Ekip, uygulamayı ilk kez kullananların beklemeye başlamasını önlemek için dijital pazarlama çalışmalarını kullanarak bir öneri sistemi entegre etti. Marka, öneri sistemi tarafından okunan ve gösterilen ürünlere yansıtılan bir UTM parametresi aracılığıyla reklamın hedef URL'sine araba modeli, fiyat ve kasa tipi gibi ürün ayrıntılarını ekler. Sistem, URL'de bu tür ayrıntıları okumadığı takdirde, popüler arabalara gider. Bu, popüler modellerin, popüler bütçelerin ve son birkaç hafta veya gün içinde popüler olan arabaların bir birleşimidir.
Yüklenebilir bir web uygulaması
İlgi çekici bir kullanıcı deneyimi sunan hızlı, tam özellikli bir web uygulaması geliştiren Truebil, kullanıcılarının geri gelmeye devam etmesini sağlamak istiyordu. Uygulamayı yüklenebilir hale getirmenin yinelenen ziyaretleri çok daha sorunsuz hale getireceğini fark ettiler.
Ekip, ürününü eksiksiz bir progresif web uygulaması (PWA) haline getirmek için Ana ekrana ekle özelliğini kullandı. Bu yaklaşım, kullanıcıların Truebil Lite'ı ana ekrana eklemelerine ve tam ekran modunda başlatmalarına olanak tanıdı. Ekip, daha önce çevrimdışı modu uyguladıkları için yeni özelliği kolayca ekleyebiliyordu.
Ekip, kullanıcılarının spam'e maruz kalmadığından emin olmak ve kullanıcıların uygulamayı yükleme olasılığını artırmak için kısa süre önce PWA yüklemesini tanıtma stratejisini güncelledi. Böylece yükleme istemleri, farklı türde kullanıcılar için gerçekten faydalı olacakları zaman gösterilecek. Truebil üç bölümden oluşan bir strateji üzerinde karar kıldı:
- Kullanıcı bir işlemi tamamladığında veya boşta kaldığında istem göster.
- Yetişkin kullanıcılara bağlamsal istemler göster.
- Kullanıcı sitede belirli bir süre geçirdiğinde bir banner gösterin.
İşlem tamamlandığında ve yüksek trafik alan sayfalarda varsayılan banner'lar
Ekip, kullanıcı bir görevi tamamladığında veya yüksek trafiğe sahip sayfalarda olduğu halde boşta kaldığında (kaydırma ya da formu doldurma gibi bir işlem gerçekleştirmediğinde) bir yükleme banner'ı göstermeye karar verdi. Bu yaklaşım, kullanıcı etkinliğini kesintiye uğratmaktan kaçınmalarını sağladı.
Yetişkin kullanıcılar için içeriğe dayalı istemler
Ekip, bir süredir uygulamayla etkileşimde bulunan kullanıcılara, uygulamayı ana ekrana yüklemenin değerini göstermek için bağlama dayalı özel mesajlar kullandı:
Zamana dayalı istemler için özel banner
Son olarak, bir giriş sayfasını açma gibi belirli etkinliklerde veya kullanıcının uygulamada belirli bir süre geçirmesinden sonra tetiklenen bildirim benzeri bir tasarıma sahip rahatsız edici olmayan bir banner oluşturdular:
Bu iyileştirmeler sayesinde Truebil'in dönüşüm ve etkileşim oranları, % 26 daha uzun kullanıcı oturumu ve % 61 daha fazla dönüşüm ile önemli ölçüde arttı. Her dönüşümün yüksek işlem değeri göz önünde bulundurulduğunda, bu değer işletmesi için önemli bir nokta.
Kısıtlı kaynaklara sahip 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 PWA'ya geçiş, artan dönüşümler ve web'in sorunsuz erişimi sayesinde gelirden pazarlamaya kadar olan harcamalarımızı %80 artırmamızı sağladı.
Rakesh Raman, Kurucu Ortak, Ürün ve Veri Bilimi Şefi, Truebil
%44
Yükleme süresinde iyileşme
%26
Daha uzun kullanıcı oturumları
%61
Dönüşüm artışı
%80
Pazarlama harcamalarına yapılan gelir artışı