En utilisant des outils de surveillance des utilisateurs réels et en se concentrant sur l'amélioration des Core Web Vitals lors de la refactorisation de leur application, ils ont également amélioré le CLS de 72 %, ainsi que la réactivité de l'application.
Agrofy est une place de marché en ligne pour le marché agro-industriel de l'Amérique latine. Ils mettent en relation les acheteurs et les vendeurs de machines agricoles, de terrains, d'équipements et de services financiers. Au troisième trimestre 2020, une équipe de développement de quatre personnes chez Agrofy a passé un mois à optimiser son site Web, car elle supposait que l'amélioration des performances entraînerait une réduction des taux de rebond. Ils se sont spécifiquement concentrés sur l'amélioration du LCP, qui fait partie des métriques Core Web Vitals. Ces optimisations des performances ont permis d'améliorer le LCP de 70 %, ce qui a entraîné une baisse de 76 % de l'abandon des chargements (de 3,8 % à 0,9 %).
70%
Baisse du LCP
76%
Abandon de charge réduit
Problème
En étudiant ses métriques commerciales, une équipe de développement chez Agrofy a remarqué que ses taux de rebond semblaient plus élevés que les benchmarks du secteur. La dette technique augmentait également dans le codebase du site Web.
Solution
L'équipe Agrofy a présenté son projet à ses dirigeants et obtenu leur adhésion pour :
- Migrez d'un ancien framework obsolète vers un framework plus récent et activement pris en charge.
- Optimisez les performances de chargement du nouveau codebase.
La migration a pris deux mois. En plus de l'équipe de développement de quatre personnes mentionnée précédemment, cette migration a également impliqué des spécialistes produit et UX, ainsi qu'un architecte logiciel. Le projet d'optimisation a pris un mois à l'équipe de développement de quatre personnes. Ils se sont concentrés sur le LCP, le CLS (une autre métrique Core Web Vitals) et le FCP. Voici quelques optimisations spécifiques :
- Chargement différé de tous les éléments non visibles avec l'API Intersection Observer.
- Diffusion plus rapide des ressources statiques grâce à un réseau de diffusion de contenu.
- Chargement différé des images avec
loading="lazy". - Affichage côté serveur du contenu du chemin critique de rendu.
- Préchargez et préconnectez les ressources critiques pour réduire les temps d'établissement de la poignée de main.
- En utilisant des outils de surveillance des utilisateurs réels (RUM) pour identifier les pages d'informations détaillées sur les produits qui subissaient de nombreux changements de mise en page, puis en apportant des ajustements à l'architecture du codebase.
Pour en savoir plus sur les détails techniques, consultez l'article de blog de l'équipe technique d'Agrofy.
Après avoir activé le nouveau codebase sur 20 % du trafic, elle a lancé le nouveau site pour tous les visiteurs début septembre 2020.
Résultats
Les optimisations de l'équipe de développement ont entraîné des améliorations mesurables de nombreuses métriques différentes :
- Le LCP a augmenté de 70 %.
- Le CLS a augmenté de 72 %.
- Le blocage des requêtes JavaScript a été réduit de 100 % et celui des requêtes CSS de 80 %.
- Les tâches longues ont été réduites de 72 %.
- Premier processeur inactif amélioré de 25 %.
Au cours de la même période, les données de surveillance des utilisateurs réels (également appelées données sur le terrain) ont montré que le taux d'abandon de chargement sur les pages d'informations produit a chuté de 76 %, passant de 3,8 % à 0,9 % :
