Gerçek kullanıcı izleme araçlarını kullanarak ve uygulamalarını yeniden yapılandırırken Core Web Vitals'ı iyileştirmeye odaklanarak CLS'yi ve uygulama duyarlılığını da %72 oranında artırdı.
Agrofy, Latin Amerika'nın tarım ticareti pazarına yönelik bir online pazar yeridir. Tarım makineleri, arazi, ekipman ve finansal hizmetler alıcıları ile satıcılarını bir araya getirirler. 2020'nin 3. çeyreğinde Agrofy'deki 4 kişilik bir geliştirme ekibi, performansın iyileştirilmesinin hemen çıkma oranlarının düşmesine yol açacağı hipotezini test etmek için bir ay boyunca web sitelerini optimize etti. Özellikle Core Web Vitals metrikleri arasında yer alan LCP'yi iyileştirmeye odaklandılar. Bu performans optimizasyonları, LCP'de% 70'lik bir iyileşme sağladı. Bu da yüklemeyi bırakma oranında% 76'lık bir düşüşle (%3,8'den %0,9'a) ilişkilendirildi.
%70
Daha düşük LCP
%76
Daha düşük yükleme bırakma oranı
Sorun
Agrofy'daki bir geliştirme ekibi, işletme metriklerini incelerken hemen çıkma oranlarının sektör karşılaştırmalarından daha yüksek olduğunu fark etti. Web sitesi kod tabanında teknik borç da artıyordu.
Çözüm
Agrofy ekibi, üst düzey yöneticilerine sunum yaparak aşağıdakileri kabul ettirdi:
- Desteği sonlandı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ü. Daha önce bahsedilen 4 kişilik geliştirme ekibinin yanı sıra bu taşıma işleminde ürün ve kullanıcı deneyimi uzmanları ile bir yazılım mimarı da yer aldı. 4 kişilik geliştirme ekibi, optimizasyon projesini 1 ay içinde tamamladı. LCP, CLS (başka bir Core Web Vitals metriği) ve FCP'ye odaklandılar. Yapılan optimizasyonlardan bazıları şunlardır:
- Intersection Observer API ile görünmeyen tüm öğeleri gecikmeli yükleme.
- İçerik yayınlama ağı ile statik kaynakları daha hızlı yayınlama.
loading="lazy"ile resimleri geç yükleme- 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ükleyin ve önceden bağlayın.
- Gerçek kullanıcı izleme (RUM) araçlarını kullanarak hangi ürün ayrıntıları sayfalarında çok fazla sayfa düzeni değişikliği yaşandığını belirleme ve ardından kod tabanının mimarisinde düzenlemeler yapma.
Daha fazla teknik bilgi için Agrofy mühendislik blog yayınını inceleyin.
Yeni kod tabanını trafiğin% 20'sinde etkinleştirdikten sonra, Eylül 2020'nin başlarında yeni siteyi tüm ziyaretçilere kullanıma sundu.
Sonuçlar
Geliştirme ekibinin optimizasyonları, birçok farklı metrikte ölçülebilir iyileştirmelere yol açtı:
- LCP %70 oranında iyileşti.
- CLS %72 oranında iyileşti.
- JS isteklerinin engellenmesi% 100, CSS isteklerinin engellenmesi ise %80 oranında azaltmıştır.
- Uzun görevler %72 oranında azaltıldı.
- İlk Boş CPU metriği %25 iyileşti.
Aynı dönemde, gerçek kullanıcı izleme verileri (alan verileri olarak da bilinir) ürün ayrıntıları sayfalarındaki yükleme bırakma oranının %3,8'den% 0,9'a düşerek %76 oranında azaldığını gösterdi:
