En utilisant de vrais outils de surveillance des utilisateurs et en se concentrant sur l'amélioration des Core Web Vitals pour refactoriser son application, l'équipe a é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é de l'agribusiness en Amérique latine. Ils mettent en relation les acheteurs et les vendeurs de machines, de terres, 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 a supposé que l'amélioration des performances entraînerait une réduction des taux de rebond. Ils se sont particulièrement concentrés sur l'amélioration du LCP, qui fait partie des Core Web Vitals. Ces optimisations des performances ont permis d'améliorer de 70% le LCP, qui est corrélée à une réduction de 76% des abandons de chargement (de 3,8% à 0,9%).
70%
LCP plus faible
76%
Réduction de l'abandon de chargement
Problème
En étudiant ses métriques commerciales, une équipe de développement d'Agrofy a remarqué que leurs taux de rebond semblaient plus élevés que les benchmarks du secteur. Les contraintes techniques augmentaient également dans le codebase du site Web.
Solution
L'équipe d'Agrofy a présenté un argumentaire à ses dirigeants et a obtenu l'adhésion de:
- Migrez d'un ancien framework obsolète vers un framework plus récent, bénéficiant d'une assistance active.
- Optimiser les performances de chargement du nouveau codebase.
La migration a pris deux mois. Outre l'équipe de développement de quatre personnes mentionnée précédemment, cette migration a nécessité l'intervention de spécialistes des produits et de l'expérience utilisateur, ainsi que d'un architecte logiciel. Le projet d'optimisation a duré un mois à l'équipe de développement de quatre personnes. Elles se concentrent sur le LCP, le CLS (autre métrique Core Web Vitals) et le FCP. Optimisations spécifiques incluses:
- Chargement différé de tous les éléments non visibles avec l'API Intersection Observer.
- Fourniture plus rapide des ressources statiques avec un réseau de diffusion de contenu
- Images à chargement différé avec
loading="lazy". - Rendu côté serveur du contenu du chemin de rendu critique
- Précharger et préconnecter des ressources critiques pour réduire les temps de handshake
- Utiliser des outils de surveillance des utilisateurs réels (RUM) pour identifier les pages d'informations détaillées sur les produits qui ont connu de nombreux décalages de mise en page, puis apporter des ajustements à l'architecture du codebase.
Consultez l'article de blog sur l'ingénierie d'Agrofy pour obtenir plus de détails techniques.
Après avoir activé le nouveau codebase sur 20% du trafic, l'entreprise a lancé le nouveau site auprès de tous les visiteurs début septembre 2020.
Résultats
Les optimisations apportées par l'équipe de développement ont entraîné des améliorations mesurables dans de nombreuses métriques différentes:
- LCP a augmenté de 70%.
- Le CLS a augmenté de 72%.
- Le blocage des requêtes JS a diminué de 100% et le blocage des requêtes CSS de 80%.
- Réduction de 72 % des tâches longues
- La métrique Premier processeur inactif a augmenté de 25%.
Sur la même période, les données de surveillance des utilisateurs réels (également appelées données de champ) ont montré que le taux d'abandon de chargement sur les pages d'informations détaillées sur les produits a chuté de 76%, passant de 3,8% à 0,9%:
