Chrome Kullanıcı Deneyimi Raporu'nda Maksimum Potansiyel FID metriğinde% 90 azalma ve Chrome Kullanıcı Deneyimi Raporu'nda İGG'de% 9 iyileştirme sağlamak için ürün ayrıntıları sayfalarının etkileşimi optimize edildi.
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 (benzersiz ziyaretçi ve sayfa görüntüleme sayısına göre).
Web performansı uzun süredir şirket için bir odak noktasıydı. Ancak kısa süre önce, performansı izlemek ve sitenin farklı bölümlerinde optimizasyonları uygulamak için bir ekip oluşturdular.
Bu makalede Önemli Web Verileri'nden biri olan First Input Delay (FID) ve laboratuvar proxy'si Toplam Engelleme Süresi (TBT) adlı önemli Web Verileri'ni optimize etmek amacıyla Mercado Libre'ın ön uç mimari ekibinden Guille Paz, Pablo Carminatti ve Oleh Burkhay tarafından yapılan çalışmalar özetlenmektedir.
%90
Lighthouse'da Maksimum Potansiyel FID'de Düşüş
%9
CrUX'te FID'yi "Hızlı" olarak algılayan kullanıcıların sayısı arttı
Uzun görevler, İlk Giriş Gecikmesi ve Toplam Engelleme Süresi
Pahalı JavaScript kodu çalıştırmak, uzun görevlere yol açabilir. Uzun görevler, tarayıcının ana iş parçacığında 50 ms'den uzun süre çalıştırılan görevlerdir.
FID (İlk Giriş Gecikmesi), bir kullanıcının bir sayfayla ilk kez etkileşimde bulunmasından (ö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şlayabileceği ana kadar geçen süreyi ölçer. Pahalı JavaScript kodu yürüten bir sitenin muhtemelen birkaç uzun görevi vardır ve bunlar FID'yi olumsuz yönde etkiler.
İyi bir kullanıcı deneyimi sağlamak için sitelerde İlk Giriş Gecikmesinin 100 milisaniyeden az olması gerekir:
Mercado Libre'nin sitesi çoğu bölümde iyi performans gösterse de Chrome Kullanıcı Deneyimi Raporu'nda, ürün ayrıntıları sayfalarının FID metriğinin düşük olduğunu tespit ettiler. Bu bilgiler ışığında, çalışmalarını sitedeki ürün sayfaları için etkileşimi iyileştirmeye odaklanmaya karar verdiler.
Bu sayfalar kullanıcının karmaşık etkileşimler gerçekleştirmesine olanak sağladığından, amaç değerli işlevlere müdahale etmeden etkileşim optimizasyonu yapmaktır.
Ürün ayrıntısı sayfalarının etkileşimini ölçme
FID için gerçek kullanıcı gerekir. Bu nedenle FID metriği laboratuvarda ölçülemez. Bununla birlikte, Toplam Engelleme Süresi (TBT) metriği laboratuvarla ölçülebilirdir, alandaki FID ile iyi ilişkilidir ve etkileşimi etkileyen sorunları da tespit eder.
Aşağıdaki izde, örneğin ana iş parçacığında görevleri çalıştırmak için 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ısı sayfalarının etkileşimini ölçmek ve iyileştirmek için laboratuvarda proxy metriği olarak TBT'yi kullandı.
Genel yaklaşımı şu şekilde:
- Gerçek bir cihazda ana iş parçacığını tam olarak hangi komut dosyalarının meşgul ettiğini belirlemek için WebPageTest'i kullanın.
- Maks. Potansiyel İlk Giriş Gecikmesi (Maks. Potansiyel İGG) değerindeki değişikliklerin etkisini belirlemek için Lighthouse'u kullanın.
Uzun görevleri görselleştirmek için WebPageTest'i kullanın
WebPageTest (WPT), dünyanın farklı yerlerindeki gerçek cihazlar üzerinde testler gerçekleştirmenizi sağlayan 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'den yararlandı. Özellikle, Meksika'daki Mercado Libre kullanıcılarının deneyimini tahmin etmek istedikleri için, Moto 4G cihazı ve Dulles, Virginia'yı seçtiler. WPT'nin ana iş parçacığı görünümünü gözlemleyen Mercado Libre, ana iş parçacığını 2 saniye boyunca engelleyen ardışık birkaç uzun görev olduğunu tespit etti:
İlgili şelaleyi analiz eden ekip, bu iki saniyenin önemli bir kısmının analiz modüllerinden geldiğini gördü. Uygulamanın ana paket boyutu büyüktü (950 KB) ve ayrıştırması, derlemesi ve yürütülmesi uzun sürdü.
Maksimum Potansiyel İGG'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.
Ürün ayrıntıları sayfalarında Lighthouse'u çalıştırırken Mercado Libre, Max Potential FID (Maksimum Potansiyel FID) metriğinin kırmızı renkle işaretlenen tek metriğin 1710ms değeriyle işaretlendiğini fark etti.
Buna dayanarak Mercado Libre, Lighthouse ve WebPageTest gibi bir laboratuvar aracında Maksimum Potansiyel FID puanını iyileştirmek için bir hedef belirledi. Bu iyileştirmelerin gerçek kullanıcılarını etkileyeceğini ve dolayısıyla, Chrome Kullanıcı Deneyimi Raporu gibi gerçek kullanıcı izleme araçlarında görüneceğini varsayıyor.
Uzun görevleri optimize edin
İlk iterasyon
Mercado Libre, ana iş parçacığı izlemeye 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 öneme sahip olmayan, CPU'dan yoğun bir görev içerdiği için güvenli bir şekilde kaldırılabilir. Bu, sitenin tamamı için JavaScript'te% 2'lik bir düşüşe neden oldu.
Daha sonra genel paket boyutunu küçültmek üzerine çalışmaya başladılar:
Mercado Libre, optimizasyon fırsatlarını tespit etmek için webpack-bundle-analyzer aracını kullandı:
- Başta Lodash modülünün tamamını gerektiriyordu. Bunun yerine, kitaplığın tamamı yerine yalnızca Lodash'in bir alt kümesini yüklemek için yöntem başına şart getirildi ve Lodash'i daha da küçültmek için lodash-webpack-plugin ile birlikte kullanıldı.
Aşağıdaki Babel optimizasyonlarını da uyguladılar:
- @babel/plugin-transform-runtime kullanarak kod genelinde Babel'in yardımcılarını yeniden kullanın ve paketin boyutunu önemli ölçüde küçültün.
- Derleme zamanında jetonları değiştirmek, ana paket içindeki büyük bir yapılandırma dosyasını kaldırmak için babel-plugin-search-and-replace özelliğini kullanma.
- Provizyon türlerini kaldırarak fazladan bayt tasarrufu yapmak için babel-plugin-transform-react-remove-prop-types ekleme.
Bu optimizasyonların bir sonucu olarak, paket boyutu yaklaşık%16 küçültüldü.
Etkiyi ölçün
Değişiklikler, Mercado Libre'in art arda yaptığı uzun görevlerini iki saniyeden bir saniyeye düşürdü:
Lighthouse, Maksimum Potansiyel İlk Giriş Gecikmesi'nde % 57 azalma olduğunu gösterdi:
İkinci iterasyon
Ekip, sonraki iyileştirmeleri bulmak için uzun görevlerin derinliklerini araştırmaya devam etti.
Bu bilgiler doğrultusunda, aşağıdaki değişiklikleri uygulamaya karar verdiler:
- Derleme ve ayrıştırma süresini optimize etmek için (ör. farklı modüllerde yinelenen bağımlılıkları kaldırarak) ana paketin boyutunu küçültmeye devam edin.
- JavaScript'i daha küçük parçalara bölmek ve farklı bileşenlerin daha akıllı bir şekilde yüklenmesini sağlamak için bileşen düzeyinde kod bölme uygulayın.
- Ana iş parçacığının daha akıllı bir şekilde kullanılmasını sağlamak için bileşen sıvısını erteleyin. Bu teknik genellikle kısmi hidrasyon olarak adlandırılır.
Etkiyi ölçün
Ortaya çıkan WebPageTest izi, daha da küçük JS yürütme parçalarını gösterdi:
Ayrıca, Lighthouse'taki Max Potansiyel FID süresi %60 daha azalmıştır:
İlerlemeyi gerçek kullanıcılar için görselleştirme
WebPageTest ve Lighthouse gibi laboratuvar test araçları, geliştirme sırasında çözümleri yinelemek için mükemmel olsa da asıl hedef, gerçek kullanıcıların deneyimini iyileştirmektir.
Chrome Kullanıcı Deneyimi Raporu, gerçek Chrome kullanıcılarının web'deki popüler sitelerde nasıl deneyimler yaşadığına dair kullanıcı deneyimi metrikleri sağlar. Rapordaki veriler; BigQuery'de sorgular, PageSpeedInsights veya CrUX API'de sorgular çalıştırılarak elde edilebilir.
CrUX kontrol paneli, temel metriklerin ilerlemesini görselleştirmenin kolay bir yoludur:
Sonraki adımlar
Web performansı hiçbir zaman tamamlanmış bir görev değildir ve Mercado Libre bu optimizasyonların kullanıcılarına sağladığı değerin farkındadır. Site genelinde, ürün listeleme sayfalarında önceden getirme, resim optimizasyonları ve diğerleri dahil olmak üzere çeşitli optimizasyonlar uygulamaya devam ederken, Toplam Engelleme Süresi'ni (TBT) azaltmak için ürün listeleme sayfalarına ve proxy FID aracılığıyla daha da fazla iyileştirme yapmaya devam ediyorlar. Bu optimizasyonlar şunları içerir:
- Kod bölme çözümünü tekrarlama.
- Üçüncü taraf komut dosyalarının yürütülmesini iyileştirme.
- Paketleyici düzeyinde öğe paketlemedeki iyileştirmelere devam (webpack).
Mercado Libre, performansa bütüncül bir bakış açısı sunar. Bu nedenle, sitedeki etkileşimi optimize etmeye devam ederken bir yandan da mevcut diğer iki Önemli Web Verileri'ndeki (LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift)) iyileştirme fırsatlarını değerlendirmeye de başladılar.