Daha hızlı bir kullanıcı deneyimi için eBay'in site ve uygulamalarının performansını optimize etme.
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ı. Hatta eBay, arama sayfalarının yüklenme süresini 100 milisaniye hızlandırarak "Sepete Ekle" düğmesine tıklanma oranında% 0, 5 artış yaşadı.
100ms
Yükleme süresinde iyileştirme
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 yapıldıktan sonra türetilmiştir) benimseyerek ve önemli kullanıcı odaklı performans metriklerine odaklanarak site hızında önemli iyileştirmeler elde etti.
…ve Chrome Kullanıcı Deneyimi Raporu verileri de bu iyileştirmeleri vurgulamaktadır.
Yapılacak daha çok iş var ancak eBay'in şimdiye kadar edindiği bilgileri aşağıda bulabilirsiniz.
Web Performansı "kesintileri"
eBay'in yaptığı iyileştirmeler, kullanıcı yolculuğunda yer alan çeşitli öğelerin boyutunda ve süresinde yapılan azaltma veya"kesintiler" sayesinde mümkün oldu. Bu yayında, eBay'a özel konular yerine genel olarak web geliştirici topluluğuyla ilgili konular ele alınmaktadır.
Tüm metin kaynaklarında yükün boyutunu azaltın
Siteleri hızlandırmanın bir yolu 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 birlikte yanıtlarının yükü arttıkça kullanılmayan öğeleri temizlemeden devam ediyordu. Bu durum zaman içinde birikerek performans darboğazına neden oldu. Ekipler genellikle bu temizleme etkinliğini ertelerdi ancak eBay'in ne kadar tasarruf ettiğini görünce şaşıracaksınız.
Buradaki "kesme", yanıt yükündeki boşa harcanan baytlardır.
Sayfa üst kısmındaki içerikler için kritik yol optimizasyonu
Ekranda her piksel aynı öneme sahip değildir. Sayfanın üst kısmındaki içerik, sayfanın alt kısmındaki içerikten daha kritiktır. iOS/Android/masaüstü ve web uygulamaları bunun farkındadır. Peki hizmetler ne durumda? eBay'ın hizmet mimarisinde, ön uçların (platforma özel uygulamalar ve web sunucuları) iletişim kurduğu Deneyim Hizmetleri adlı bir katman vardır. Bu katman, öğe, kullanıcı veya sipariş gibi öğeye dayalı olmak yerine özellikle görüntüye veya cihaza dayalı olacak şekilde tasarlanmıştır. Ardından eBay, Deneyim Hizmetleri için kritik yol kavramını tanıtmıştır. Bu hizmetlere bir istek geldiğinde, diğer yayın öncesi hizmetleri paralel olarak çağırarak sayfanın üst kısmındaki içeriğin verilerini hemen almaya çalışırlar. Veriler hazır olduğunda anında temizlenir. Ekranın altındaki veriler daha sonraki bir parçada gönderilir veya yavaş yüklenir. Sonuç: Kullanıcılar sayfanın üst kısmındaki içeriği daha hızlı görebilir.
Buradaki "kesme", hizmetlerin alakalı içerikleri göstermek için harcadığı süredir.
Resim optimizasyonları
Resimler, sayfa şişmesine en çok katkıda bulunan öğelerden biridir. Küçük optimizasyonlar bile çok faydalı olabilir. eBay, resimler için iki optimizasyon yaptı.
İlk olarak eBay, iOS, Android ve desteklenen tarayıcılar dahil tüm platformlardaki arama sonuçları için WebP resim biçimini standartlaştırdı. Arama sonuçları sayfası, eBay'de en çok resim içeren sayfadır. eBay, WebP'yi zaten kullanıyordu ancak tutarlı bir şekilde değil.
İkinci olarak, eBay'ın listeleme resimleri hem boyut hem de biçim açısından oldukça optimize edilmiş olsa da, seçili resimler (ör. ana sayfada üst modül) için aynı titizlik gösterilmemiştir. eBay'da çeşitli araçlar aracılığıyla yüklenen çok sayıda, özenle seçilmiş resim vardır. Önceden optimizasyonlar yükleyiciye bağlıydı ancak artık eBay, araçlardaki kuralları uyguladığından yüklenen tüm resimler uygun şekilde optimize edilir.
Buradaki "kesme", kullanıcılara gönderilen ve boşa harcanan resim baytlarıdır.
Statik öğelerin tahmine dayalı ön getirmesi
eBay'daki bir kullanıcı oturumu yalnızca bir sayfadan oluşmaz. Bu bir akıştır. Örneğin, akış ana sayfadan bir arama sayfasına ve ardından bir öğe sayfasına giden bir gezinme olabilir. Peki akıştaki sayfalar neden birbirine yardımcı olmaz? Bu, bir sayfanın olası bir sonraki sayfa için gereken statik öğeleri önceden getirdiği tahmini önceden getirme fikridir.
Tahmine dayalı ön getirme özelliği sayesinde, kullanıcı tahmin edilen sayfaya gittiğinde öğeler zaten tarayıcı önbelleği içindedir. Bu işlem, URL'lerin önceden alınabildiği CSS ve JavaScript öğeleri için yapılır. Burada dikkat edilmesi gereken nokta, bu özelliğin yalnızca ilk kez gezinirken yardımcı olmasıdır. Sonraki gezinmelerde statik öğeler zaten önbellekte olur.
Buradaki "kesme", ilk gezinmedeki CSS ve JavaScript statik öğelerinin ağ süresidir.
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 ilk 10'unda yer alan bir öğeye gitme olasılığının yüksek olduğunu gösterir. Bu nedenle eBay artık aramadaki öğeleri önceden getirip kullanıcı gezinirken hazır tutar. Ön getirme işlemi 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 ediyor. Sunucu tarafı önbelleğe alma, platforma özel uygulamalar tarafından kullanılır ve dünya genelinde kullanıma sunulur.
Diğer düzey, Avustralya'da kullanılabilen tarayıcı önbelleğidir. Öğelerin dinamik yapısı nedeniyle öğelerin önceden getirilmesi gelişmiş bir optimizasyondu. Ayrıca sayfa gösterimleri, kapasite, açık artırma öğeleri vb. gibi birçok nüans vardır. Bu konu hakkında daha fazla bilgiyi LinkedIn'in Performans Mühendisliği Meetup sunumunda bulabilir veya eBay'ın mühendislerinin konuyla ilgili 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ğ süresi olabilir.
Arama resimlerinin hızlı indirilmesi
Arama sonuçları sayfasında, genel 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 öğeleri gönderim maliyetleri gibi kullanıcı bağlamıyla ilgili ek bilgilerle zenginleştirmektir. eBay artık ilk 10 öğe resmini başlık ile birlikte bir blok halinde tarayıcıya hemen gönderir. Böylece indirmeler, işaretlemenin geri kalanı gelmeden önce başlayabilir. Sonuç olarak, resimler artık daha hızlı görünecek. Bu değişiklik, web platformu için dünya genelinde kullanıma sunulmuştur.
Buradaki "kesme", arama sonucu resimlerinin indirilmeye başladığı zamandır.
Otomatik öneri verileri için uç önbelleğe alma
Kullanıcılar arama kutusuna harf girdiğinde öneriler açılır. Bu öneriler, harf kombinasyonları için en az bir gün boyunca değişmez. Bu tür istekler, bir veri merkezine kadar giden istekler yerine önbelleğe alınmak ve bir CDN'den (en fazla 24 saat boyunca) yayınlanmak için ideal adaylardır. Uluslararası pazarlar özellikle CDN önbelleğe alma özelliğinden yararlanır.
Ancak bir sorun vardı. eBay, öneriler pop-up'ında etkili bir şekilde önbelleğe alınamayan bazı kişiselleştirme öğelerine sahipti. Kişiselleştirme ve öneriler için kullanıcı arayüzü ayrılabildiğinden, bu sorun platforma özgü uygulamalarda yaşanmadı. Uluslararası pazarlardaki web siteleri için gecikme, kişiselleştirmenin sağladığı küçük avantajdan daha önemliydi. Bu sorunun çözülmesinin ardından eBay, platforma özel uygulamalar için dünya genelinde ve eBay.com için ABD dışındaki pazarlar için CDN önbelleğinden otomatik öneriler sunmaya başladı.
Buradaki "kesinti", 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ılar için ana sayfa içeriği belirli bir bölgede aynıdır. Bunlar, eBay'i ilk kez kullanan veya yeni bir oturum başlatan kullanıcılardır. Bu nedenle kişiselleştirme yapılmaz. Ana sayfa reklam öğeleri sık sık değişse de önbelleğe alma işlemine yine de yer vardır.
eBay, tanınmayan kullanıcı içeriğini (HTML) kısa bir süre için uç ağında (PoPs) önbelleğe almaya karar verdi. İlk kez eBay'i kullananlar artık ana sayfa içeriğini uzak bir veri merkezinden değil, yakınlarındaki bir sunucudan alabilir. eBay, bu özelliğin daha büyük bir etkisi olacağı uluslararası pazarlarda denemeye devam ediyor.
Buradaki "kesme", 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 uygulama ayrıştırma iyileştirmeleri
iOS/Android uygulamaları, yanıt biçimi genellikle JSON olan arka uç hizmetleriyle iletişim kurar. Bu JSON yük verileri büyük olabilir. Ekranda bir şey oluşturmak için JSON'un tamamını ayrıştırmak yerine eBay, hemen gösterilmesi gereken içerik için optimizasyon yapan verimli bir ayrıştırma algoritması kullanıma sundu.
Kullanıcılar artık içeriği daha hızlı görebilir. Ayrıca Android uygulamasında eBay, kullanıcı arama kutusuna yazmaya başlar başlamaz arama görünümü denetleyicilerini başlatmaya başlar (iOS'te bu optimizasyon zaten mevcuttu). Daha önce bu durum yalnızca kullanıcılar arama düğmesine bastıktan sonra gerçekleşiyordu. Artık kullanıcılar arama sonuçlarına daha hızlı ulaşabilir. Buradaki "kesinti", cihazların alakalı içerik göstermek için harcadığı süredir.
Android uygulamalarının başlatma süresinde iyileştirmeler
Bu, Android uygulamaları için baştan başlatma süresi optimizasyonları için geçerlidir. Bir uygulama baştan başlatıldığında hem işletim sistemi düzeyinde hem de uygulama düzeyinde çok sayıda başlatma işlemi gerçekleşir. Uygulama düzeyinde başlatma süresini kısaltmak, kullanıcıların ana ekranı daha hızlı görmesine yardımcı olur. eBay, bazı profilleme çalışmaları yaparak içeriği görüntülemek için tüm başlatma işlemlerinin gerekli olmadığını ve bazılarının ertelenebilir şekilde yapılabileceğini fark etti.
Daha da önemlisi eBay, ekranda oluşturmayı geciktiren bir engelleyen üçüncü taraf analiz çağrısı olduğunu gözlemledi. Engelleyici çağrıyı kaldırıp asynkron hale getirmek, soğuk başlatma sürelerine daha da yardımcı oldu. Buradaki "kesinti", Android uygulamalarının gereksiz başlatma süresidir.
Sonuçlar
eBay'ın yaptığı tüm performans "kesintileri", toplu olarak işleri ilerletmeye yardımcı oldu ve bu süreç bir süre içinde gerçekleşti. Sürümler yıl boyunca aşamalı olarak kullanıma sunuldu. Her sürüm, onlarca milisaniyelik bir süre tasarrufu sağladı ve eBay'in şu anki durumuna ulaştı:
Performans, bir özellik ve rekabet avantajı sağlar. Optimize edilmiş deneyimler, kullanıcı etkileşimini, dönüşümleri ve YG'yi artırır. eBay'in durumunda bu optimizasyonlar, az çaba gerektirenlerden birkaç gelişmiş yönteme kadar çeşitlilik gösteriyordu.
Daha fazla bilgi edinmek için Bin küçük değişiklikle hız başlıklı makaleyi inceleyin ve eBay mühendislerinin yakın gelecekte performans çalışmalarıyla ilgili daha ayrıntılı makalelerini takip edin.