Ayrıca, gerçek kullanıcı izleme araçları kullanarak ve uygulamalarını yeniden düzenlemede Core Web Vitals'ı iyileştirmeye odaklanarak CLS'yi ve uygulama duyarlılığını %72 oranında iyileştirdiler.
Agrofy, Latin Amerika'nın tarım ticareti pazarı için online pazar yeridir. Tarım makinelerinin, arazilerin, ekipmanların ve finansal hizmetlerin alıcılarını ve satıcılarını eşleştirir. 2020'nin 3. çeyreğinde Agrofy'de çalışan 4 kişilik bir geliştirme ekibi, performansın iyileştirilmesinin hemen çıkma oranlarının azalmasına yol açacağı hipotezine başvurarak bir ay boyunca web sitesini optimize etti. Özellikle Önemli Web Verileri'nden biri olan LCP'yi iyileştirmeye odaklandılar. Bu performans optimizasyonları LCP'de% 70'lik bir iyileşme sağladı ve bu da, yükten vazgeçme oranında% 76'lık bir düşüşe (%3,8'den %0,9'a) karşılık geliyordu.
%70
Daha düşük LCP
%76
Daha düşük yükten vazgeçme
Sorun
Agrofy'deki bir geliştirme ekibi, işletme metriklerini incelerken hemen çıkma oranlarının sektör karşılaştırmalarından daha yüksek göründüğünü fark etti. Web sitesinin kod tabanındaki teknik borç da artıyordu.
Çözüm
Agrofy ekibi, yöneticilerini bilgilendirdi ve şunları kabul etti:
- Kullanımdan kaldırılmış eski bir çerçeveden etkin olarak desteklenen daha yeni bir çerçeveye geçiş yapın.
- Yeni kod tabanının yükleme performansını optimize edin.
Taşıma işlemi 2 ay sürdü. Bu geçiş süreci, daha önce bahsedilen 4 kişilik geliştirme ekibinin yanı sıra ürün ve kullanıcı deneyimi uzmanları ile bir yazılım mimarını da içeriyordu. Optimizasyon projesi için 4 kişilik geliştirme ekibi 1 ay harcadı. LCP, CLS (başka bir Core Web Vitals metriği) ve FCP'ye odaklandılar. Dahil olan belirli optimizasyonlar:
- Intersection Observer API ile görünür olmayan tüm öğeleri geç yükleme.
- İçerik yayınlama ağı ile statik kaynakları daha hızlı sunma.
loading="lazy"ile resimlerin geç yüklenmesi.- Kritik oluşturma yolu içeriğinin sunucu tarafında oluşturulması.
- El sıkışma sürelerini en aza indirmek için kritik kaynakları önceden yükleme ve önceden bağlama.
- Gerçek kullanıcı izleme (RUM) araçlarını kullanarak hangi ürün ayrıntısı sayfalarında çok fazla düzen değişikliği olduğunu belirleyin ve ardından kod tabanı mimarisinde düzenlemeler yapın.
Daha fazla teknik ayrıntı için Agrofy Engineering blog yayınına göz atın.
Yeni kod tabanını trafiğin% 20'sinde etkinleştirdikten sonra, Eylül 2020'nin başlarında yeni siteyi tüm ziyaretçilerin kullanımına sundular.
Sonuçlar
Geliştirme ekibinin yaptığı optimizasyonlar, birçok farklı metrikte ölçülebilir iyileştirmeler sağladı:
- LCP %70 iyileşti.
- CLS %72 iyileşti.
- JS isteklerinin engellenmesi% 100, CSS isteklerinin engellenmesi ise %80 oranında azaldı.
- Uzun görevler %72 azaldı.
- İlk Boş CPU %25 arttı.
Aynı zaman diliminde, gerçek kullanıcı izleme verileri (alan verileri olarak da bilinir), ürün ayrıntıları sayfalarındaki yüklemeden vazgeçme oranının %3,8'den% 0,9'a düşerek %76 düştüğünü gösterdi:
