Dengan menggunakan alat pemantauan pengguna sebenarnya dan berfokus pada peningkatan Data Web Inti dalam memfaktorkan ulang aplikasi, mereka juga meningkatkan CLS sebesar 72%, serta responsivitas aplikasi.
Agrofy adalah marketplace online untuk pasar agribisnis Amerika Latin. Mereka mencocokkan pembeli dan penjual mesin pertanian, tanah, peralatan, dan jasa keuangan. Pada K3 2020, tim pengembangan yang terdiri dari 4 orang di Agrofy menghabiskan waktu satu bulan untuk mengoptimalkan situs mereka karena mereka berhipotesis bahwa peningkatan performa akan menyebabkan penurunan rasio pantulan. Mereka khususnya berfokus pada peningkatan LCP, yang merupakan salah satu Data Web Inti. Pengoptimalan performa ini menghasilkan peningkatan LCP sebesar 70%, yang berhubungan dengan pengurangan pengabaian pemuatan sebesar 76% (dari 3,8% menjadi 0,9%).
70%
LCP lebih rendah
76%
Pengabaian beban lebih rendah
Masalah
Saat mempelajari metrik bisnis, tim pengembangan di Agrofy melihat bahwa rasio pantulan mereka tampak lebih tinggi daripada tolok ukur industri. Utang teknis juga meningkat pada codebase situs.
Solusi
Tim Agrofy mempromosikan eksekutif mereka dan mendapatkan dukungan untuk:
- Bermigrasi dari framework lama yang tidak digunakan lagi ke framework baru yang didukung secara aktif.
- Optimalkan performa pemuatan codebase baru.
Migrasi memerlukan waktu 2 bulan. Selain tim pengembangan yang beranggotakan 4 orang yang disebutkan sebelumnya, migrasi ini juga melibatkan spesialis produk dan UX serta arsitek software. Proyek pengoptimalan membutuhkan waktu 1 bulan bagi tim pengembangan yang beranggotakan 4 orang. Mereka berfokus pada LCP, CLS (metrik Data Web Inti lainnya), dan FCP. Pengoptimalan spesifik mencakup:
- Pemuatan lambat untuk semua elemen yang tidak terlihat dengan Intersection Observer API.
- Mengirimkan resource statis lebih cepat dengan jaringan pengiriman konten.
- Gambar pemuatan lambat
dengan
loading="lazy". - Rendering sisi server untuk jalur rendering penting konten.
- Melakukan pramuat dan preconnect resource penting untuk meminimalkan waktu handshake.
- Menggunakan alat pemantauan pengguna (RUM) yang sebenarnya untuk mengidentifikasi halaman detail produk mana yang mengalami banyak pergeseran tata letak, lalu melakukan penyesuaian pada arsitektur codebase.
Lihat postingan blog Agrofy engineering untuk mengetahui detail teknis selengkapnya.
Setelah mengaktifkan codebase baru pada 20% traffic, mereka meluncurkan situs baru ini kepada semua pengunjung pada awal September 2020.
Hasil
Pengoptimalan tim pengembangan menghasilkan peningkatan terukur dalam banyak metrik yang berbeda:
- LCP meningkat 70%.
- CLS meningkat 72%.
- Pemblokiran permintaan JS berkurang 100% dan memblokir permintaan CSS sebesar 80%.
- Tugas panjang berkurang 72%.
- First CPU Idle meningkat 25%.
Selama jangka waktu yang sama, data pemantauan pengguna yang sebenarnya (juga dikenal sebagai data kolom) menunjukkan bahwa rasio pengabaian pemuatan pada halaman detail produk turun 76%, dari 3,8% menjadi 0,9%:
