Ürün ayrıntıları sayfalarının etkileşimini optimize ederek Lighthouse'ta maksimum potansiyel FID'de% 90 oranında düşüş ve Chrome Kullanıcı Deneyimi Raporu'nda FID'de% 9 oranında artış elde edildi.
Mercado Libre, Latin Amerika'nın en büyük e-ticaret ve ödeme ekosistemidir. 18 ülkede faaliyet gösteren bu uygulama, Brezilya, Meksika ve Arjantin'de (benzersiz ziyaretçilere ve sayfa görüntülemelere göre) pazar lideridir.
Web performansı uzun süredir şirketin odak noktasıydı ancak yakın zamanda performansı izlemek ve sitenin farklı bölümlerinde optimizasyonlar uygulamak için bir ekip oluşturdular.
Bu makalede, Mercado Libre'nin ön uç mimari ekibinden Guille Paz, Pablo Carminatti ve Oleh Burkhay'ın, Önemli Web Verileri'nden biri olan ilk giriş gecikmesi (İGG) ve laboratuvar proxy'si toplam engelleme süresi (TBT) için yaptıkları çalışmalar özetlenmiştir.
%90
Lighthouse'ta Maksimum Olası İlk Giriş Gecikmesi'nde azalma
%9
CrUX'ta FID'yi "Hızlı" olarak algılayan daha fazla kullanıcı
Uzun görevler, ilk giriş gecikmesi ve toplam engelleme süresi
Pahalı JavaScript kodlarının çalıştırılması, tarayıcının ana iş parçacığında 50 ms'den uzun süre çalışan uzun görevlere neden olabilir.
FID (ilk giriş gecikmesi), kullanıcının bir sayfayla ilk kez etkileşime geçtiği andan (ör. bir bağlantıyı tıkladığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye gerçekten başlayabildiği ana kadar geçen süreyi ölçer. Pahalı JavaScript kodu yürüten bir sitede muhtemelen birkaç uzun görev bulunur. Bu görevler, FID'yi olumsuz yönde etkiler.
İyi bir kullanıcı deneyimi sağlamak için sitelerde First Input Delay'in 100 milisaniyeden daha kısa olması gerekir:
Mercado Libre'nin sitesi çoğu bölümde iyi performans gösteriyordu ancak Chrome Kullanıcı Deneyimi Raporu'nda ürün ayrıntıları sayfalarının FID'sinin düşük olduğu tespit edildi. Bu bilgilere dayanarak, çalışmalarını sitedeki ürün sayfalarının etkileşimini iyileştirmeye odaklamaya karar verdiler.
Bu sayfalar kullanıcının karmaşık etkileşimler gerçekleştirmesine olanak tanır. Bu nedenle, değerli işlevlere müdahale etmeden etkileşim optimizasyonu hedeflenmiştir.
Ürün ayrıntıları sayfalarının etkileşimini ölçme
FID için gerçek bir kullanıcı gerekir ve bu nedenle laboratuvarda ölçülemez. Bununla birlikte, Total Blocking Time (TBT) metriği laboratuvarda ölçülebilir, sahadaki FID ile iyi ilişkilidir ve etkileşimi etkileyen sorunları da yakalar.
Örneğin, aşağıdaki izlemede ana iş parçacığında görev çalıştırırken harcanan toplam süre 560 ms olsa da bu sürenin yalnızca 345 ms'si toplam engelleme süresi (her görevin 50 ms'yi aşan bölümlerinin toplamı) olarak kabul edilir:
Mercado Libre, gerçek dünyadaki ürün ayrıntıları sayfalarının etkileşimini ölçmek ve iyileştirmek için laboratuvarda TBT'yi proxy metrik olarak kullandı.
Genel yaklaşımları şu şekildeydi:
- Gerçek bir cihazda ana iş parçacığının hangi komut dosyalarının meşgul tuttuğunu tam olarak belirlemek için WebPageTest'i kullanın.
- Maksimum Olası İlk Giriş Gecikmesi (Maksimum Olası FID)'ndeki değişikliklerin etkisini belirlemek için Lighthouse'u kullanın.
Uzun görevleri görselleştirmek için WebPageTest'i kullanma
WebPageTest (WPT), dünyanın farklı yerlerindeki gerçek cihazlarda testler yapmanıza olanak tanıyan bir web performansı aracıdır.
Mercado Libre, gerçek kullanıcılara benzer bir cihaz türü ve konum seçerek kullanıcılarının deneyimini yeniden oluşturmak için WPT'yi kullandı. Özellikle, Meksika'daki Mercado Libre kullanıcılarının deneyimine benzer bir deneyim sunmak istedikleri için Moto 4G cihaz ve Dulles, Virginia'yı seçtiler. Mercado Libre, WPT'nin ana iş parçacığı görünümünü gözlemleyerek ana iş parçacığının 2 saniye boyunca engellenmesine neden olan birkaç art arda gelen uzun görev olduğunu tespit etti:
İlgili şelaleyi analiz ettiklerinde, bu iki saniyenin önemli bir kısmının analiz modülünden geldiğini tespit ettiler. Uygulamanın ana paketi büyüktü (950 KB) ve ayrıştırılması, derlenmesi ve yürütülmesi uzun sürdü.
Maksimum Olası İlk Giriş Gecikmesi'ni belirlemek için Lighthouse'u kullanma
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 faydalı bir araçtır.
Mercado Libre, Lighthouse'u ürün ayrıntıları sayfalarında çalıştırdığında Maksimum Potansiyel FID'nin 1710 ms değerinde kırmızıyla işaretlenen tek metrik olduğunu tespit etti.
Bu bilgiler doğrultusunda Mercado Libre, Lighthouse ve WebPageTest gibi bir laboratuvar aracında maksimum potansiyel FID puanını iyileştirmeyi hedefledi. Bu iyileştirmelerin gerçek kullanıcılarını etkileyeceği ve dolayısıyla Chrome Kullanıcı Deneyimi Raporu gibi gerçek kullanıcı izleme araçlarında gösterileceği varsayıldı.
Uzun görevleri optimize etme
İlk iterasyon
Mercado Libre, ana iş parçacığı izlemesine dayanarak 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ılabilen, CPU'ya yoğun bir görev içeriyordu. Bu sayede sitenin tamamında JavaScript'te% 2 oranında düşüş elde edildi.
Ardından genel paket boyutunu iyileştirme üzerinde çalışmaya başladılar:
Mercado Libre, optimizasyon fırsatlarını tespit etmek için webpack-bundle-analyzer'ı kullandı:
- Başlangıçta Lodash modülünün tamamı gerekiyordu. Bu, kitaplığın tamamı yerine yalnızca bir alt kümesini yüklemek için yöntem başına require ile değiştirildi ve Lodash'ı daha da küçültmek için lodash-webpack-plugin ile birlikte kullanıldı.
Ayrıca aşağıdaki Babel optimizasyonlarını da uyguladılar:
- Babel'in yardımcılarını kodda yeniden kullanmak ve paketin boyutunu önemli ölçüde azaltmak için @babel/plugin-transform-runtime kullanma
- Ana paketteki büyük bir yapılandırma dosyasını kaldırmak için derleme sırasında jetonları değiştirmek üzere babel-plugin-search-and-replace kullanma
- Özellik türlerini kaldırarak biraz daha bayt tasarrufu sağlamak için babel-plugin-transform-react-remove-prop-types eklendi.
Bu optimizasyonlar sonucunda paket boyutu yaklaşık%16 oranında küçültüldü.
Etkiyi ölçme
Yapılan değişikliklerle Mercado Libre'nin art arda gelen uzun görevleri iki saniyeden bir saniyeye düşürüldü:
Lighthouse, Maksimum Olası İlk Giriş Gecikmesi'nde % 57 oranında düşüş olduğunu gösterdi:
İkinci iterasyon
Ekip, daha sonra yapılacak iyileştirmeleri bulmak için uzun görevleri incelemeye 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 küçültmeye devam edin (ör. farklı modüller arasındaki 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ölme özelliğini uygulayın.
- Ana ileti dizisinin daha akıllıca kullanılmasına olanak tanımak için bileşenlerin hizalanmasını erteleyin. Bu teknik genellikle kısmi hidrasyon olarak adlandırılır.
Etkiyi ölçme
Elde edilen WebPageTest izlemesi, daha da küçük JS yürütme parçaları gösterdi:
Ayrıca Lighthouse'taki Maksimum Olası İlk Giriş Gecikmesi süresi %60 daha azaltıldı:
Gerçek kullanıcıların ilerleme durumunu görselleştirme
WebPageTest ve Lighthouse gibi laboratuvar test araçları, geliştirme sırasında çözümler üzerinde iterasyon yapmak için mükemmel olsa da asıl amaç gerçek kullanıcıların deneyimini iyileştirmektir.
Chrome Kullanıcı Deneyimi Raporu, gerçek dünyadaki Chrome kullanıcılarının popüler web hedeflerinde yaşadığı kullanıcı deneyimleri hakkında metrikler sağlar. Rapordaki veriler, BigQuery, PageSpeedInsights veya CrUX API'de sorgu çalıştırılarak elde edilebilir.
CrUX kontrol paneli, temel metriklerin ilerleme durumunu görselleştirmenin kolay bir yoludur:
Sonraki adımlar
Web performansı hiçbir zaman tamamlanmış bir iş değildir. Mercado Libre, bu optimizasyonların kullanıcılarına sağladığı değeri anlıyor. Ürün listeleme sayfalarında prefetching, resim optimizasyonları ve diğerleri dahil olmak üzere site genelinde çeşitli optimizasyonlar uygulamaya devam ederken toplam engelleme süresini (TBT) ve dolaylı olarak FID'yi 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 iterasyon yapın.
- Üçüncü taraf komut dosyalarının yürütülmesini iyileştirme
- Paketleyici düzeyinde (webpack) öğe paketlemede iyileştirmelere devam ediyoruz.
Mercado Libre, performansa bütünsel bir bakış açısıyla yaklaştığından sitedeki etkileşimi optimize etmeye devam ederken diğer iki mevcut Core Web Vitals metriği olan LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) metriklerini daha da iyileştirme fırsatlarını değerlendirmeye başladı.