Mercado Libre, Latin Amerika’daki en büyük e-ticaret ve ödeme ekosistemidir. 18 ülkede mevcuttur ve Brezilya, Meksika ve Arjantin’de pazar lideridir (tekil ziyaretçilere ve sayfa görüntülemelerine göre).
Web performansı uzun süredir şirket için bir odak noktası olmuştur, ancak yakın zamanda performansı izlemek ve sitenin farklı bölümlerinde optimizasyonlar uygulamak için bir ekip oluşturdular.
Bu makale, tarafından yapılan çalışmaları özetlemektedir. Guille Paz, pablo carminattiVe Oleh Burkhay Mercado Libre’nin ön uç mimarisi ekibinden Temel Web Verilerinden birini optimize etmek için: İlk Giriş Gecikmesi (FID) ve laboratuvar proxy’si Toplam Engelleme Süresi (TBT).
90%
Deniz Fenerinde Maksimum Potansiyel FID’de Azalma
9%
CrUX’ta FID’yi “Hızlı” olarak algılayan daha fazla kullanıcı
Uzun görevler, İlk Giriş Gecikmesi ve Toplam Engelleme Süresi #
Pahalı JavaScript kodunu çalıştırmak, birden fazla süre boyunca çalışan uzun görevlere yol açabilir. 50ms tarayıcının ana iş parçacığında.
FID (İlk Giriş Gecikmesi), bir kullanıcının bir sayfayla ilk etkileşimde bulunduğu andan (örneğin bir bağlantıya tıkladığında), tarayıcının söz konusu etkileşime yanıt olarak olay işleyicilerini fiilen işlemeye başlayabildiği zamana kadar geçen süreyi ölçer. Pahalı JavaScript kodu çalıştıran bir sitenin muhtemelen birkaç uzun görevi olacaktır ve bu da FID’yi olumsuz yönde etkileyecektir.
İyi bir kullanıcı deneyimi sağlamak için siteler, İlk Giriş Gecikmesi’nin 100 milisaniyeden az olması için çaba göstermelidir:
Mercado Libre’nin sitesi çoğu bölümde iyi performans gösterirken, Chrome Kullanıcı Deneyimi Raporu bu ürün detay sayfalarının FID’si zayıftı. Bu bilgilere dayanarak, çabalarını sitedeki ürün sayfalarının etkileşimini geliştirmeye odaklamaya karar verdiler.
Bu sayfalar, kullanıcının karmaşık etkileşimler gerçekleştirmesine izin verir, bu nedenle amaç, değerli işlevselliğe müdahale etmeden etkileşimi optimize etmekti.
Ürün detay sayfalarının etkileşimini ölçün #
FID, gerçek bir kullanıcı gerektirir ve bu nedenle laboratuvarda ölçülemez. Ancak Toplam Engelleme Süresi (TBT) metriği laboratuvarda ölçülebilir, sahadaki FID ile iyi bir korelasyona sahiptir ve etkileşimi etkileyen sorunları da yakalar.
Aşağıdaki izde, örneğin, toplam zaman ana iş parçacığında görevleri çalıştırmak için harcanan süre 560 ms’dir, bu sürenin yalnızca 345 ms’si dikkate alınır toplam engelleme süresi (50ms’yi aşan her görevin bölümlerinin toplamı):
Mercado Libre, gerçek dünyadaki ürün detay sayfalarının etkileşimini ölçmek ve geliştirmek için TBT’yi laboratuvarda bir proxy metriği olarak aldı.
İşte benimsedikleri genel yaklaşım:
Uzun görevleri görselleştirmek için WebPageTest’i kullanın #
WebPageTest (WPT), dünyanın farklı yerlerindeki gerçek cihazlarda testler yapmanızı sağlayan bir web performans aracıdır.
Mercado Libre, gerçek kullanıcılara benzer bir cihaz türü ve konumu seçerek kullanıcılarının deneyimini yeniden oluşturmak için WPT’yi kullandı. Özellikle, bir Moto 4G cihazı Ve Dulles, Virjinya, çünkü Meksika’daki Mercado Libre kullanıcılarının deneyimine yaklaşmak istediler. Mercado Libre, WPT’nin ana iş parçacığı görünümünü gözlemleyerek, ana iş parçacığını 2 saniye boyunca bloke eden birkaç ardışık uzun görev olduğunu buldu:
Karşılık gelen şelaleyi incelerken, bu iki saniyenin önemli bir kısmının analitik modüllerinden geldiğini gördüler. Uygulamanın ana paket boyutu büyüktü (950KB) ve ayrıştırılması, derlenmesi ve çalıştırılması uzun zaman alıyordu.
Maksimum Potansiyel FID’yi belirlemek için Lighthouse’u kullanın #
Lighthouse, farklı cihazlar ve konumlar arasında seçim yapmanıza izin vermez, ancak siteleri teşhis etmek ve performans önerileri almak için çok kullanışlı bir araçtır.
Mercado Libre, ürün detay sayfalarında Lighthouse’u çalıştırırken, Maksimum Potansiyel FID değeriyle kırmızıyla işaretlenmiş tek metrikti. 1710ms.
Buna dayanarak, Mercado Libre, Lighthouse ve WebPageTest gibi bir laboratuvar aracındaki Maksimum Potansiyel FID puanını, bu iyileştirmelerin gerçek kullanıcılarını etkileyeceği ve bu nedenle Chrome Kullanıcı Deneyimi Raporu gibi gerçek kullanıcı izleme araçlarında görüneceği varsayımıyla iyileştirme hedefi belirledi.
Uzun görevleri optimize edin #
İlk yineleme #
Mercado Libre, ana iş parçacığı izini temel alarak, pahalı kod çalıştıran iki modülü optimize etme hedefini belirledi.
Dahili izleme modülünün performansını optimize etmeye başladılar. Bu modül, modülün çalışması için kritik olmayan ve bu nedenle güvenli bir şekilde kaldırılabilecek CPU ağırlıklı bir görev içeriyordu. Bu, tüm site için JavaScript’te %2’lik bir azalmaya yol açtı.
Ondan sonra çalışmaya başladılar genel paket boyutunu iyileştirme:
Kullanılan Mercado Libre webpack-paket-analizörü optimizasyon fırsatlarını tespit etmek için:
Ayrıca aşağıdakileri uyguladılar: Babil optimizasyonlar:
Bu optimizasyonların bir sonucu olarak paket boyutu küçültüldü. yaklaşık %16 oranında.
Etkiyi ölçün #
Değişiklikler, Mercado Libre’nin ardışık uzun görevlerini azalttı iki saniyeden bir saniyeye:
Deniz feneri gösterdi %57 azalma Maksimum Potansiyel İlk Giriş Gecikmesinde:
İkinci yineleme #
Ekip, daha sonraki iyileştirmeleri bulmak için uzun görevleri araştırmaya devam etti.
Bu bilgilere dayanarak, aşağıdaki değişiklikleri uygulamaya karar verdiler:
- Derleme ve ayrıştırma süresini optimize etmek için ana paket boyutunu azaltmaya devam edin (örneğin, farklı modüller boyunca yinelenen bağımlılıkları kaldırarak).
- JavaScript’i daha küçük parçalara bölmek ve farklı bileşenlerin daha akıllıca yüklenmesini sağlamak için bileşen düzeyinde kod bölmeyi uygulayın.
- ertele bileşen hidrasyonu ana iş parçacığının daha akıllıca kullanılmasına izin vermek için. Bu tekniğe genellikle şu ad verilir: kısmi hidrasyon.
Etkiyi ölçün #
Ortaya çıkan WebPageTest izi, JS yürütmesinin daha da küçük parçalarını gösterdi:
Ve Lighthouse’daki Max Potential FID süreleri azaltıldı ek %60:
Gerçek kullanıcılar için ilerlemeyi görselleştirin #
WebPageTest ve Lighthouse gibi laboratuvar test araçları, geliştirme sırasında çözümleri yinelemek için harika olsa da asıl amaç, gerçek kullanıcılar için deneyimi iyileştirmektir.
bu Chrome Kullanıcı Deneyimi Raporu gerçek dünyadaki Chrome kullanıcılarının web’deki popüler hedefleri nasıl deneyimlediğine ilişkin kullanıcı deneyimi ölçümleri sağlar. Rapordaki veriler şu şekilde elde edilebilir: BigQuery’de sorgu çalıştırmaPageSpeedInsights veya CRUX API’sı.
bu CRUX kontrol paneli temel metriklerin ilerlemesini görselleştirmenin kolay bir yoludur:
Sonraki adımlar #
Web performansı asla bitmiş bir görev değildir ve Mercado Libre, bu optimizasyonların kullanıcılarına getirdiği değeri anlıyor. Ürün listeleme sayfalarında önceden getirme, resim optimizasyonları ve diğerleri dahil olmak üzere site genelinde çeşitli optimizasyonlar uygulamaya devam ederken, Toplam Engelleme Süresini (TBT) ve vekil FID ile daha da azaltmak için ürün listeleme sayfalarına iyileştirmeler eklemeye devam ediyorlar. Bu optimizasyonlar şunları içerir:
- Kod bölme çözümü üzerinde yineleme.
- Üçüncü taraf komut dosyalarının yürütülmesini iyileştirme.
- Paket oluşturucu düzeyinde varlık gruplamasında devam eden iyileştirmeler (web paketi).
Mercado Libre bütünsel bir performans görüşüne sahiptir, bu nedenle sitedeki etkileşimi optimize etmeye devam ederken, aynı zamanda diğer iki mevcut Önemli Web Verilerindeki iyileştirme fırsatlarını da değerlendirmeye başladılar: LCP (En Büyük İçerikli Boyama) ve CLS (Kümülatif Düzen Kayması) daha da fazla.