hız bir şirket çapında girişim 2019’da eBay için, birçok ekip siteyi ve uygulamaları kullanıcılar için olabildiğince hızlı hale getirmeye kararlı. Aslında, eBay, arama sayfası yükleme süresindeki her 100 milisaniyelik iyileştirme için “Sepete Ekle” sayısında %0,5’lik bir artış gördü.
100Hanım
Yükleme süresinde iyileştirme
0,5%
“Sepete Ekle” sayısında artış
Performans Bütçelerinin kabul edilmesiyle (kurumla rekabetçi bir çalışma yapıldıktan sonra elde edilen Chrome Kullanıcı Deneyimi Raporu) ve temel kullanıcı merkezli performans ölçümlerine odaklanan eBay, site hızında önemli iyileştirmeler yapabildi.
…ve Chrome Kullanıcı Deneyimi Raporu verileri de bu iyileştirmeleri vurgulamaktadır.
Hala daha yapılacak çok iş var ama işte eBay’in şu ana kadar öğrendikleri.
Web Performansı “keser” #
eBay’in yaptığı iyileştirmeler, bir kullanıcının yolculuğunda yer alan çeşitli varlıkların azaltılması veya “kesilmesi” (boyut ve zaman açısından) nedeniyle mümkün olmuştur. Bu gönderi, eBay’e özgü konular yerine genel olarak web geliştirici topluluğuyla ilgili konuları kapsar.
Tüm metin kaynaklarında yükü azaltın #
Siteleri hızlı hale getirmenin bir yolu, daha az kod yüklemektir. eBay, kullanıcılara sunulan tüm kullanılmayan ve gereksiz JavaScript, CSS, HTML ve JSON yanıtlarını kırparak metin yüklerini azalttı. Önceden, her yeni özellikle eBay, kullanılmayanları temizlemeden yanıtlarının yükünü artırmaya devam ediyordu. Bu zamanla arttı ve bir performans darboğazına dönüştü. Ekipler genellikle bu temizleme faaliyetini erteledi, ancak eBay’in ne kadar tasarruf ettiğini görseniz şaşırırsınız.
Buradaki “kesme”, yanıt yükündeki boşa harcanan baytlardır.
Ekranın üst kısmındaki içerik için kritik yol optimizasyonu #
Ekrandaki her piksel eşit derecede önemli değildir. İçerik ekranın üst kısmı ekranın altındaki bir şeyden daha kritiktir. iOS/Android/masaüstü ve web uygulamaları bunun farkındadır, peki ya hizmetler? eBay’in hizmet mimarisi, adı verilen bir katmana sahiptir. Deneyim Hizmetleri, ön uçların (platforma özel uygulamalar ve web sunucuları) konuştuğu. Bu katman, öğe, kullanıcı veya sipariş gibi varlık tabanlı olmaktan ziyade görünüm veya cihaz tabanlı olacak şekilde özel olarak tasarlanmıştır. Ardından eBay, Deneyim Hizmetleri için kritik yol kavramını tanıttı. Bu servislere bir istek geldiğinde, paralel olarak diğer upstream servisleri çağırarak, ekranın üst kısmındaki içerik için verileri anında almaya çalışırlar. Veriler hazır olduğunda anında temizlenir. Ekranın alt kısmındaki veriler daha sonraki bir öbekte veya geç yüklenmiş olarak gönderilir. Sonuç: kullanıcılar ekranın üst kısmındaki içeriği daha hızlı görebilir.
Buradaki “kesim”, hizmetlerin ilgili içeriği görüntülemek için harcadığı süredir.
Görüntü optimizasyonları #
Görüntüler sayfa şişmesine en çok katkıda bulunanlardan biri. Küçük optimizasyonlar bile uzun bir yol kat ediyor. eBay, resimler için iki optimizasyon yaptı.
İlk olarak, eBay, iOS, Android ve desteklenen tarayıcılar. Arama sonuçları sayfası, eBay’deki en çok resim içeren sayfadır ve zaten WebP kullanıyorlardı, ancak tutarlı bir modelde değiller.
İkincisi, eBay’in listeleme görselleri büyük ölçüde optimize edilmiş olsa da (hem boyut hem de format olarak), aynı titizlik küratörlüğünü yapılan görseller için geçerli değildi (örneğin, ana sayfa). eBay, çeşitli araçlarla yüklenen çok sayıda elle seçilmiş görsele sahiptir. Daha önce optimizasyonlar yükleyiciye bağlıydı, ancak şimdi eBay, araçlardaki kuralları zorunlu kılıyor, bu nedenle yüklenen tüm resimler uygun şekilde optimize edilecek.
Buradaki “kes”, kullanıcılara gönderilen boşa harcanan resim baytlarıdır.
Statik varlıkların tahmine dayalı önceden getirilmesi #
eBay’de bir kullanıcı oturumu yalnızca bir sayfa değildir. Bu bir akış. Örneğin, akış, ana sayfadan bir arama sayfasına ve bir öğe sayfasına bir gezinme olabilir. Peki akıştaki sayfalar neden birbirine yardımcı olmuyor? Bu, bir sayfanın bir sonraki olası sayfa için gereken statik varlıkları önceden getirdiği tahmine dayalı önceden getirme fikridir.
Tahmine dayalı önceden getirme ile, bir kullanıcı tahmin edilen sayfaya gittiğinde, varlıklar zaten tarayıcı önbelleğindedir. Bu, URL’lerin önceden alınabileceği CSS ve JavaScript varlıkları için yapılır. Burada dikkat edilmesi gereken bir nokta, yalnızca ilk kez yapılan navigasyonlarda yardımcı olmasıdır. Sonraki gezinmelerde, statik varlıklar zaten önbellekte olacaktır.
Buradaki “kesim”, ilk gezintide CSS ve JavaScript statik varlıklarının ağ süresidir.
En iyi arama sonuçlarını önceden getirme #
Bir kullanıcı eBay’de arama yaptığında, eBay’in analitik verileri, kullanıcının arama sonuçlarının ilk 10’undaki bir öğeye gitme olasılığının yüksek olduğunu gösteriyor. Böylece eBay, aramadaki öğeleri önceden getirir ve kullanıcı gezindiğinde onları hazır tutar. Ön getirme iki düzeyde gerçekleşir.
İlk seviye, öğe hizmetinin arama sonuçlarında ilk 10 öğeyi önbelleğe aldığı sunucu tarafında gerçekleşir. Kullanıcı bu öğelerden birine gittiğinde, eBay artık sunucu işlem süresinden tasarruf ediyor. Sunucu tarafı önbelleğe alma, platforma özgü uygulamalar tarafından kullanılır ve dünya çapında kullanıma sunulur.
Diğer düzey, Avustralya’da bulunan tarayıcı önbelleğinde gerçekleşir. Öğe önceden getirme, öğelerin dinamik doğası nedeniyle gelişmiş bir optimizasyondu. Ayrıca birçok nüansı vardır: sayfa gösterimleri, kapasite, açık artırma öğeleri vb. Bu konuda daha fazla bilgi edinebilirsiniz. LinkedIn’in Performans Mühendisliği Buluşması sunumuveya eBay mühendislerinden konuyla ilgili ayrıntılı bir blog yazısı için bizi izlemeye devam edin.
Buradaki “kesim”, öğenin önbelleğe alındığı yere bağlı olarak sunucu işlem süresi veya ağ süresi olabilir.
Arama resimlerinin isteyerek indirilmesi #
Arama sonuçları sayfasında, yüksek düzeyde bir sorgu yayınlandığında iki şey olur. 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 nakliye maliyetleri gibi ek kullanıcı içeriğiyle ilgili bilgilerle artırmaktır. eBay şimdi ilk 10 öğe görüntüsünü başlıkla birlikte bir parça halinde tarayıcıya hemen gönderir, böylece indirmeler işaretlemenin geri kalanı gelmeden başlayabilir. Sonuç olarak, resimler artık daha hızlı görünecektir. Bu değişiklik, web platformu için küresel olarak kullanıma sunuldu.
Buradaki “kes”, arama sonucu görselleri için indirme başlangıç zamanıdır.
Otomatik öneri verileri için Edge önbelleğe alma #
Kullanıcılar arama kutusuna harf yazdığında öneriler açılır. Bu öneriler en az bir gün boyunca harf kombinasyonları için değişmez. Önbelleğe alınmak ve bir yerden sunulmak için ideal adaylardır. CDN (en fazla 24 saat boyunca), isteklerin bir veri merkezine kadar gitmesi yerine. Uluslararası pazarlar özellikle CDN önbelleğinden yararlanır.
Yine de bir sorun vardı. eBay, öneriler açılır penceresinde verimli bir şekilde önbelleğe alınamayan bazı kişiselleştirme unsurlarına sahipti. Neyse ki, kişiselleştirme ve öneriler için kullanıcı arayüzü ayrılabileceğinden, platforma özel uygulamalarda bir sorun olmadı. Web için uluslararası pazarlarda gecikme, kişiselleştirmenin küçük avantajından daha önemliydi. eBay artık platforma özel uygulamalar ve eBay.com için ABD dışındaki pazarlar için küresel olarak bir CDN önbelleğinden sunulan otomatik önerilere sahip.
Buradaki “kesim”, otomatik öneriler için ağ gecikmesi ve sunucu işlem süresidir.
Tanınmayan ana sayfa kullanıcıları için Edge önbelleğe alma #
Web platformu için, tanınmayan kullanıcılar için 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 yoktur. Ana sayfa reklam öğeleri sık sık değişmeye devam etse de önbelleğe alma için hala yer vardır.
eBay, uç ağlarında tanınmayan kullanıcı içeriğini (HTML) önbelleğe almaya karar verdi (PoP’lar) kısa bir süre için. İlk kez kullananlar artık ana sayfa içeriğinin uzaktaki bir veri merkezi yerine yakınlarındaki bir sunucudan sunulmasını sağlayabilir. eBay, daha büyük bir etkiye sahip olacağı uluslararası pazarlarda hala bunu deniyor.
Buradaki “kesme” yine tanınmayan kullanıcılar için hem ağ gecikmesi hem de sunucu işlem 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 konuşur. Bu JSON yükleri büyük olabilir. eBay, ekranda bir şey oluşturmak için tüm JSON’u ayrıştırmak yerine, hemen görüntülenmesi gereken içeriği optimize eden verimli bir ayrıştırma algoritması sundu.
Kullanıcılar artık içeriği daha hızlı görebilir. Ek olarak, Android uygulaması için eBay, kullanıcı arama kutusuna yazmaya başlar başlamaz arama görünümü denetleyicilerini başlatmaya başlar (iOS zaten bu optimizasyona sahipti). Daha önce bu, yalnızca kullanıcılar arama düğmesine bastıktan sonra oluyordu. Artık kullanıcılar arama sonuçlarına daha hızlı ulaşabilir. Buradaki “kesim”, cihazların ilgili içeriği görüntülemek için harcadığı süredir.
Android uygulaması başlatma süresi iyileştirmeleri #
Bu …. için geçerlidir soğuk başlangıç Android uygulamaları için zaman optimizasyonları. Bir uygulama soğuk başlatıldığında, hem işletim sistemi düzeyinde hem de uygulama düzeyinde çok sayıda başlatma gerçekleşir. Uygulama düzeyinde başlatma süresinin azaltılması, kullanıcıların ana ekranı daha hızlı görmelerine yardımcı olur. eBay bazı profillemeler yaptı ve içeriği görüntülemek için tüm başlatma işlemlerinin gerekli olmadığını ve bazılarının tembelce yapılabileceğini fark etti.
Daha da önemlisi, eBay, ekranda görüntülemeyi geciktiren, bloke eden bir üçüncü taraf analiz çağrısı olduğunu gözlemledi. Engelleme çağrısını kaldırmak ve zaman uyumsuz hale getirmek, soğuk başlatma sürelerine daha fazla yardımcı oldu. Buradaki “kesme”, Android uygulamaları için gereksiz başlatma süresidir.
Sonuçlar #
eBay’in yaptığı tüm performans “kesimleri” toplu olarak iğneyi hareket ettirmeye katkıda bulundu ve bu, belirli bir süre içinde gerçekleşti. Bültenler, yıl boyunca aşamalı olarak uygulandı, her sürüm onlarca milisaniyeyi azalttı ve sonunda eBay’in şu anda bulunduğu noktaya ulaştı:
Performans bir özellik ve rekabet avantajıdır. Optimize edilmiş deneyimler, daha yüksek kullanıcı etkileşimi, dönüşümler ve yatırım getirisi sağlar. eBay’in durumunda, bu optimizasyonlar düşük çaba gerektiren şeylerden gelişmiş birkaç şeye kadar değişiyordu.
Çıkış yapmak Bin kesimle hız daha fazla bilgi edinmek ve yakın gelecekte eBay mühendislerinin performans çalışmaları hakkında daha ayrıntılı makaleler için tetikte olmak için.