Dengan menggunakan alat pemantauan pengguna sebenarnya dan berfokus pada peningkatan Core Web Vitals 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, tanah, peralatan, dan jasa keuangan pertanian. Pada Kuartal 3 2020, tim pengembangan beranggotakan 4 orang di Agrofy menghabiskan waktu satu bulan untuk mengoptimalkan situs mereka karena mereka berhipotesis bahwa peningkatan performa akan mengurangi rasio pantulan. Mereka secara khusus berfokus untuk meningkatkan LCP, yang merupakan salah satu Core Web Vitals. Pengoptimalan performa ini menghasilkan peningkatan LCP sebesar 70%, yang berkorelasi dengan penurunan pengabaian pemuatan sebesar 76% (dari 3,8% menjadi 0,9%).
70%
LCP yang lebih rendah
76%
Pengabaian pemuatan yang lebih rendah
Masalah
Saat mempelajari metrik bisnis, tim pengembangan di Agrofy melihat bahwa rasio pantulan mereka tampaknya lebih tinggi daripada tolok ukur industri. Utang teknis juga meningkat di codebase situs.
Solusi
Tim Agrofy mengajukan proposal kepada 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 ini memerlukan waktu 2 bulan. Selain tim pengembangan beranggotakan 4 orang yang disebutkan sebelumnya, migrasi ini juga melibatkan spesialis produk dan UX serta seorang arsitek software. Tim pengembangan yang terdiri dari 4 orang memerlukan waktu 1 bulan untuk menyelesaikan project pengoptimalan. Mereka berfokus pada LCP, CLS (metrik Data Web Inti lainnya), dan FCP. Pengoptimalan tertentu mencakup:
- Memuat lambat semua elemen yang tidak terlihat dengan Intersection Observer API.
- Mengirimkan resource statis lebih cepat dengan jaringan penayangan konten.
- Pemuatan lambat gambar
dengan
loading="lazy". - Rendering sisi server konten jalur rendering kritis.
- Melakukan pramuat dan prakoneksi resource penting untuk meminimalkan waktu handshake.
- Menggunakan alat pemantauan pengguna sebenarnya (RUM) untuk mengidentifikasi halaman detail produk mana yang mengalami banyak perubahan tata letak, lalu melakukan penyesuaian pada arsitektur codebase.
Lihat postingan blog engineering Agrofy untuk mengetahui detail teknis selengkapnya.
Setelah mengaktifkan codebase baru di 20% traffic, mereka meluncurkan situs baru kepada semua pengunjung pada awal September 2020.
Hasil
Pengoptimalan tim pengembangan menghasilkan peningkatan yang dapat diukur dalam banyak metrik yang berbeda:
- LCP meningkat sebesar 70%.
- CLS meningkat 72%.
- Pemblokiran permintaan JS berkurang 100% dan pemblokiran permintaan CSS berkurang 80%.
- Tugas panjang berkurang 72%.
- CPU Pertama Tanpa Aktivitas meningkat 25%.
Selama jangka waktu yang sama, data pemantauan pengguna sebenarnya (juga dikenal sebagai data lapangan) menunjukkan bahwa rasio pengabaian pemuatan di halaman detail produk turun 76%, dari 3,8% menjadi 0,9%:
