Daha hızlı bir kullanıcı deneyimi için eBay'in site ve uygulamalarının performansını optimize ediyoruz.
Hız, 2019'da eBay için şirket genelinde bir girişimdi. Birçok ekip, siteyi ve uygulamaları kullanıcılar için mümkün olduğunca hızlı hale getirmeye kararlıydı. Aslında, eBay, arama sayfasının yüklenme süresindeki her 100 milisaniye iyileşme için "Alışveriş Sepetine Ekleme" sayısında% 0,5'lik bir artış elde etti.
100ms
Yükleme süresinde iyileşme
%0,5
"Alışveriş Sepetine Ekleme" sayısında artış
eBay, Performans Bütçeleri'ni (Chrome Kullanıcı Deneyimi Raporu ile rekabetçi bir çalışma yaptıktan sonra türetilmiş) benimseyerek ve önemli kullanıcı merkezli performans metriklerine odaklanarak site hızında önemli iyileştirmeler yapmayı başardı.
...ve Chrome Kullanıcı Deneyimi Raporu verileri de bu iyileştirmeleri vurguluyor.
Hâlâ yapılacak çok şey var, ancak eBay'in şimdiye kadar öğrendiklerini burada bulabilirsiniz.
Web Performansı "kesmeleri"
eBay'in yaptığı iyileştirmeler, kullanıcının yolculuğunda yer alan çeşitli öğelerin küçülmesi veya"kesimi" (boyut ve zaman açısından) sayesinde mümkün oldu. Bu gönderi, eBay'e özgü konulardan ziyade, genel olarak web geliştirici topluluğunu ilgilendiren konuları kapsamaktadır.
Tüm metin kaynaklarında yükü azaltın
Siteleri hızlandırmanın bir yolu da daha az kod yüklemektir. eBay, kullanıcılara sunulan JavaScript, CSS, HTML ve JSON yanıtlarının tüm kullanılmayan ve gereksiz baytlarını kırparak metin yüklerini azalttı. Daha önce, eBay her yeni özellikle, kullanılmayan yanıtları temizlemeden yanıtlarının yükünü artırmaya devam ediyordu. Bu durum zamanla arttı ve bir performans sıkıntısına dönüştü. Ekipler genellikle bu temizlik etkinliğini ertelemişlerdi, ancak eBay'in bu kadar çok tasarruf etmesi sizi şaşırtacaktı.
Buradaki "cut" öğesi, yanıt yükünde boşa giden bayt sayısıdır.
Ekranın üst kısmındaki içerik için kritik yol optimizasyonu
Ekrandaki her piksel aynı derecede önemli değildir. Ekranın üst kısmındaki içerik, ekranın alt kısmındaki bir şeyden daha kritiktir. iOS/Android/masaüstü ve web uygulamaları bunun farkındadır, peki ya hizmetler? eBay'in hizmet mimarisi, ön uçların (platforma özel uygulamalar ve web sunucuları) konuştuğu Deneyim Hizmetleri adlı bir katmana sahiptir. Bu katman öğe, kullanıcı veya sipariş gibi varlık tabanlı değil, özellikle görünüm veya cihaz tabanlı olacak şekilde tasarlanmıştır. Daha sonra eBay, Deneyim Hizmetleri için kritik yol kavramını kullanıma sundu. Bu hizmetlere bir istek geldiğinde söz konusu hizmetler, paralel olarak diğer yukarı akış hizmetlerini çağırarak ekranın üst kısmındaki içeriklerin verilerini hemen almaya çalışır. Veriler hazır olduğunda anında boşaltılır. Ekranın alt kısmı verileri daha sonraki bir parça halinde veya geç yüklenerek gönderilir. Sonuç: Kullanıcılar ekranın üst kısmındaki içeriği daha hızlı görür.
Buradaki "kesilen" kısmı, alakalı içerikleri görüntülemek için hizmetler tarafından harcanan süredir.
Resim optimizasyonları
Resimler sayfa şişmesine en çok katkıda bulunanlardan biridir. Küçük optimizasyonlar bile büyük fayda sağlar. eBay resimler için iki optimizasyon gerçekleştirdi.
eBay ilk olarak iOS, Android ve desteklenen tarayıcılar da dahil olmak üzere tüm platformlardaki arama sonuçları için WebP resim biçimini standart hale getirdi. Arama sonuçları sayfası, eBay'in en yoğun görsel ağırlıklı sayfasıydı ve bu sayfa zaten WebP kullanıyordu, ancak tutarlı bir düzende değildi.
İkinci olarak, eBay'in listeleme resimleri yoğun bir şekilde optimize edilmiş olsa da (hem boyut hem de biçim açısından), seçilmiş resimler (örneğin, ana sayfadaki üst modül) için aynı özeni göstermiyordu. eBay, çeşitli araçlar kullanılarak yüklenen, elle seçilmiş birçok resme sahip. Önceden optimizasyonlar yükleyiciye bağlıydı, ancak eBay şimdi araçların içindeki kuralları uyguluyor. Böylece, yüklenen tüm resimler uygun şekilde optimize edilecek.
Buradaki "kesilen" kısım, kullanıcılara gönderilen boşa giden resim baytlarıdır.
Statik öğelerin tahmine dayalı önceden getirmesi
eBay'de kullanıcı oturumu yalnızca bir sayfadan ibaret değildir. Bu bir akıştır. Örneğin akış, ana sayfadan arama sayfasına ve öğe sayfasına gitmek şeklinde olabilir. Öyleyse akıştaki sayfalar neden birbirine yardımcı olmuyor? Bu, bir sayfanın bir sonraki olası sayfa için gerekli statik öğeleri önceden getirdiği tahmini önceden getirme fikrine dayanır.
Tahmine dayalı önceden getirme sayesinde, kullanıcı tahmin edilen sayfaya gittiğinde öğeler zaten tarayıcı önbelleğindedir. Bu işlem, URL'lerin önceden alınabildiği CSS ve JavaScript öğeleri için yapılır. Burada unutulmaması gereken bir nokta, yalnızca ilk navigasyonda yardımcı olduğudur. Sonraki gezinmelerde statik öğeler zaten önbellekte bulunur.
Buradaki "kesim", ilk gezinmedeki CSS ve JavaScript statik öğelerinin ağ süresini belirtir.
En popüler arama sonuçlarını önceden getirme
Bir kullanıcı eBay'de arama yaptığında, eBay'in analiz verileri kullanıcının arama sonuçlarının en iyi 10 listesinde yer alan bir öğeye gitme olasılığının çok yüksek olduğunu gösteriyor. Böylece eBay artık öğeleri aramadan önceden getiriyor ve bunları, kullanıcı gezinirken hazır durumda tutuyor. Önceden getirme iki düzeyde gerçekleşir.
İlk düzey sunucu tarafında gerçekleşir. Burada öğe hizmeti, arama sonuçlarındaki ilk 10 öğeyi önbelleğe alır. Kullanıcı bu öğelerden birine gittiğinde eBay artık sunucu işlem süresinden tasarruf etmektedir. Sunucu tarafı önbelleğe alma, platforma özgü uygulamalar tarafından kullanılır ve tüm dünyada kullanıma sunulur.
Diğer düzey, Avustralya'da bulunan tarayıcı önbelleğinde gerçekleşir. Öğelerin dinamik doğası nedeniyle öğeleri önceden getirme işlemi, gelişmiş bir optimizasyondu. Bunda da birçok nüans vardır: sayfa gösterimleri, kapasite, açık artırma öğeleri vb. LinkedIn'in Performans Mühendisliği Buluşması'nda daha fazla bilgi edinebilir veya eBay'in mühendislerinin bu konuyla ilgili olarak paylaştığı ayrıntılı blog yayınını takip edebilirsiniz.
Buradaki "kesme", öğenin önbelleğe alındığı yere bağlı olarak sunucu işleme süresi veya ağ saati olabilir.
Arama resimlerini hızlıca indirme
Arama sonuçları sayfasında, üst düzeyde bir sorgu gönderildiğinde iki şey olur. Bunlardan biri, sorguyla eşleşen en alakalı öğelerin döndürüldüğü geri çağırma/sıralama adımıdır. İkinci adım, geri çağrılan öğelerin gönderim maliyetleri gibi kullanıcı bağlamıyla ilgili ek bilgilerle genişletilmesidir. eBay artık ilk 10 öğenin resmini başlıkla birlikte bir grup halinde tarayıcıya hemen gönderir. Böylece indirme işlemleri, işaretlemenin geri kalanı gelmeden başlayabilir. Böylece resimler artık daha hızlı görünür. Bu değişiklik, web platformu için dünya genelinde kullanıma sunulmuştur.
Buradaki "kesme" kısmı, arama sonucu resimleri için indirme başlangıç zamanını belirtir.
Otomatik öneri verileri için uç önbelleğe alma
Kullanıcılar arama kutusuna harf yazdığında öneriler açılır. Bu öneriler, harf kombinasyonları için en az bir gün boyunca değişmez. Tüm istekler veri merkezine gitmeye gerek kalmadan önbelleğe alınıp bir CDN'den (maksimum 24 saat boyunca) sunulmak için ideal adaylardır. Uluslararası pazarlar CDN önbelleğe alma özelliğinden özellikle yararlanır.
Ancak dikkat çeken bir nokta vardı. eBay, verimli bir şekilde önbelleğe alınamayan öneri pop-up penceresinde, kişiselleştirmeyle ilgili bazı öğelere sahipti. Kişiselleştirme ve öneriler için kullanılan kullanıcı arayüzü ayrılabildiği için neyse ki platforma özgü uygulamalarda bu sorun yaşanmamıştı. Uluslararası pazarlarda, web için gecikme, kişiselleştirmenin küçük bir avantajından daha önemliydi. Bu engeli ortadan kaldıran eBay, artık platforma özel uygulamalar ve eBay.com için ABD dışındaki pazarlar için dünya genelinde bir CDN önbelleğinden sunulan otomatik öneriler sunuyor.
Buradaki "kesme" kısmı, otomatik öneriler için ağ gecikmesi ve sunucu işleme süresidir.
Tanınmayan ana sayfa kullanıcıları için uç önbelleğe alma
Web platformunda, tanınmayan kullanıcılara ilişkin ana sayfa içeriği belirli bir bölge için aynıdır. Bunlar, eBay'i ilk kez kullanan veya yeni bir oturum başlatan kullanıcılardır, dolayısıyla kişiselleştirme yapılmaz. Ana sayfa reklam öğeleri sık sık değişmeye devam etse de, önbelleğe almak için hala yer vardır.
eBay, uç ağlarında (PoPs) tanınmayan kullanıcı içeriğini (HTML) kısa bir süreliğine önbelleğe almaya karar verdi. İlk kez kullanan kullanıcılar artık ana sayfa içeriğini uzak bir veri merkezi yerine yakındaki bir sunucudan alabiliyor. eBay, daha büyük bir etkisi olacağı uluslararası pazarlarda bu konuda hala denemeler yapıyor.
Buradaki "kesme" de tanınmayan kullanıcılar için hem ağ gecikmesi hem de sunucu işleme süresidir.
Diğer platformlar için optimizasyonlar
iOS/Android uygulaması ayrıştırma iyileştirmeleri
iOS/Android uygulamaları, yanıt biçimi genellikle JSON olan arka uç hizmetleriyle iletişim kurar. Bu JSON yükleri büyük olabilir. eBay, ekranda bir şey oluşturmak için JSON dosyasının tamamını ayrıştırmak yerine, hemen görüntülenmesi gereken içeriği optimize eden verimli bir ayrıştırma algoritması geliştirdi.
Kullanıcılar artık içeriği daha hızlı görebilir. Ayrıca eBay, Android uygulaması için, kullanıcı arama kutusuna yazmaya başlar başlamaz (iOS zaten bu optimizasyona sahipti), arama görünümü denetleyicilerini başlatmaya başlar. Daha önce bu durum yalnızca kullanıcılar arama düğmesine bastıktan sonra gerçekleşiyordu. Kullanıcılar artık arama sonuçlarına daha hızlı ulaşabiliyor. Buradaki "kesilen" kısmı, alakalı içerikleri görüntülemek için cihazlar tarafından harcanan süredir.
Android uygulaması başlatma süresiyle ilgili iyileştirmeler
Bu durum, Android uygulamaları için sıfırdan başlatma süresi optimizasyonları için geçerlidir. Bir uygulama baştan başlatılırken hem işletim sistemi hem de uygulama düzeyinde birçok başlatma işlemi gerçekleşir. Uygulama düzeyinde başlatma süresini azaltmak kullanıcıların ana ekranı daha hızlı görmelerine yardımcı olur. eBay bazı profil çıkarmaları yaptı ve içeriği görüntülemek için tüm başlatma işlemlerinin gerekli olmadığını ve bazı işlemlerin geç yapılabileceğini fark etti.
Daha da önemlisi, eBay ekranda oluşturma işlemini geciktiren, engelleyen bir üçüncü taraf analiz çağrısı olduğunu gözlemledi. Engelleme çağrısının kaldırılması ve eşzamansız hale getirilmesi, baştan başlatma sürelerine katkıda bulundu. Buradaki "kesilen" kısmı, Android uygulamaları için gereksiz başlatma süresidir.
Sonuçlar
eBay'in yaptığı tüm "kesintiler" performansı iğneyi harekete geçirmeye toplu olarak katkıda bulundu ve bu, zaman içinde gerçekleşti. Yıl boyunca aşamalı olarak yayınlanan sürümler, onlarca milisaniye hızlandı ve nihayetinde eBay'in şu an ulaştığı noktaya ulaştı:
Performans bir özelliktir ve rekabet avantajıdır. Optimize edilmiş deneyimler daha yüksek kullanıcı etkileşimi, dönüşüm ve YG sağlar. eBay'in durumunda, bu optimizasyonlar az çaba gerektiren optimizasyonlardan gelişmiş birkaç optimizasyona kadar değişiyordu.
Daha fazla bilgi edinmek için Hızla bin gösterim sayfasına göz atın ve eBay mühendislerinin yakın gelecekte kendi performans çalışmalarıyla ilgili olarak hazırladığı daha ayrıntılı makaleleri takip edin.