Les optimisations des fiches produit optimisées ont permis à redBus d'augmenter ses ventes d'environ 7%
Le Web et ses fonctionnalités évoluent rapidement. Vous pouvez désormais créer des expériences Web riches et complètes qui peuvent réaliser une grande partie de ce que les applications natives peuvent faire en termes de fonctionnalités.
JavaScript est un moteur principal de l'interactivité sur le Web, mais s'il n'est pas utilisé avec précaution, les interactions peuvent sembler lentes et les utilisateurs peuvent penser que votre site Web ne répond pas ou est complètement défectueux. Heureusement, la métrique Interaction to Next Paint (INP) a été créée pour résoudre ce problème spécifique d'expérience utilisateur.
L'INP mesure toutes les interactions effectuées avec une page au cours de son cycle de vie et renvoie une valeur unique représentative de la rapidité avec laquelle un site Web répond aux entrées utilisateur. En d'autres termes, si l'INP d'une page est égal ou inférieur au seuil acceptable, toutes les interactions effectuées avec cette page peuvent être considérées comme rapides et fiables.
redBus, un site Web de réservation et de billetterie de bus basé en Inde, a déployé des efforts considérables pour améliorer l'INP de son site Web, même lorsqu'il était encore considéré comme une métrique expérimentale. Grâce à ces efforts, il a pu augmenter ses ventes de 7%, ce qui illustre une fois de plus la relation entre les performances Web et la santé de l'entreprise. Voici ce que redBus a fait pour améliorer l'INP de son site Web.
Principaux objectifs
Lorsque redBus s'est lancé dans l'optimisation de l'INP de son site Web, trois objectifs étaient à l'ordre du jour:
- Offrez une meilleure expérience utilisateur en vous concentrant sur la latence d'interaction, quelle que soit la vitesse du réseau et les fonctionnalités de l'appareil.
- Optimiser son site Web pour que les interactions soient aussi rapides que possible.
- Assurez-vous que les réponses de leur API sont aussi légères que possible pour garantir un transfert de données rapide vers l'interface utilisateur.
Le parcours
redBus a catégorisé la latence d'interaction de deux manières:
- Latence d'interaction causée par le blocage de JavaScript sur le client. Lorsque les interactions utilisent du code JavaScript excessif qui bloque le thread principal, le rendu est retardé, ce qui affecte l'INP d'une page.
- Latence réseau causée par les appels d'API. Bien que l'INP ne mesure pas l'activité réseau, une interaction reposant sur un appel à une API distante peut sembler lente sur des réseaux plus lents ou si les requêtes génèrent des réponses volumineuses.
redBus était initialement assez confiant quant à l'INP de son site Web, mais les données de surveillance des utilisateurs réels (RUM) pour cette métrique au 95e percentile racontaient une autre histoire.
Comment redBus a mesuré l'INP
redBus s'est appuyé sur la bibliothèque JavaScript web-vitals conçue par Google pour suivre non seulement l'INP, mais aussi toutes les métriques importantes sur l'expérience utilisateur pour toutes les pages de son site Web. En plus de la bibliothèque JavaScript web-vitals, redBus a utilisé ELK pour analyser les données INP collectées côté client.
Toutefois, la façon dont vous suivez l'INP de votre site Web dans le domaine peut être très différente de celle de redBus. Nous vous recommandons vivement de découvrir comment trouver les interactions lentes sur le terrain pour savoir comment suivre au mieux l'INP de vos sites Web, puis comment les reproduire en laboratoire avant de commencer à optimiser les interactions.
Une fois que redBus a mis en place un système de suivi de l'INP, il a pu analyser les données afin de mieux comprendre où l'interactivité lente était présente.
Cas d'utilisation
Lorsque les utilisateurs recherchent des tarifs sur le site Web de redBus, ils peuvent modifier la date sur la page de recherche pour filtrer les tarifs sélectionnés pour la destination souhaitée. L'interaction permettant de modifier la date sur cette page était lente et a entraîné un faible INP.
De plus, lorsqu'un utilisateur fait défiler les tarifs, d'autres tarifs sont chargés de manière différée à partir de l'API. Bien que le défilement lui-même ne soit pas pris en compte dans la mesure de l'INP, l'écouteur d'événements scroll planifie lui-même de nombreuses tâches qui doivent s'exécuter sur le thread principal. Cette tâche provoquait des conflits sur le thread principal, ce qui augmentait la latence d'interaction, ce qui entraînait une mauvaise INP sur la page de recherche.
Comment redBus a optimisé l'INP pour la page de recherche
Pour améliorer l'INP de la page de recherche, redBus a effectué plusieurs optimisations:
- Le gestionnaire d'événements
scrolla été déboulé afin de réduire le nombre de fois où le rappel d'événement se déclenchera au cours d'une période donnée. En réduisant la fréquence d'exécution du rappel d'événementscroll, le thread principal a pu répondre plus rapidement aux interactions des utilisateurs sur la page de recherche. - Le travail de rendu qui en résulte a été priorisé à l'aide d'un rappel
requestAnimationFrame.requestAnimationFrameindique au navigateur que le travail du rappel doit être effectué avant le frame suivant.
En outre, nous avons apporté les optimisations suivantes à la page des résultats de recherche:
- De nouveaux lots de résultats ont été récupérés sur la penúltime fiche de la page de résultats de recherche afin d'améliorer l'expérience utilisateur et les performances visuelles en déclenchant le chargement différé plus tôt.
- Moins de résultats ont été récupérés à chaque appel réseau lors du chargement paresseux. En réduisant le nombre de résultats à extraire de 30 à 10, nous avons constaté une réduction des plages d'INP de 870 à 900 à 350 à 370.
Bien que ces modifications aient considérablement amélioré l'INP de la page de recherche, le problème persistait : l'événement change dans les champs de saisie de la page de recherche appelait une fonction de réduction coûteuse pour mettre à jour l'interface utilisateur. Cela a entraîné un rendu inutile de l'interface utilisateur, ce qui a affecté l'INP de la page.
Pour optimiser cette interaction, redBus a géré l'état des composants d'entrée localement et l'a synchronisé avec le magasin Redux uniquement lorsque l'événement blur d'une entrée était déclenché. Cette modification a réduit le nombre de re-rendus et éliminé les re-rendus indésirables de l'interface utilisateur en appelant le réducteur moins fréquemment.
Grâce à ce changement, l'INP de la page a augmenté de 72%, ce qui a permis d'offrir une expérience utilisateur plus rapide et plus fluide, qui incite les utilisateurs à interagir avec la page.
Impact sur l'entreprise
La relation entre la santé de l'entreprise et les performances des pages est bien connue. Bien que l'INP soit une métrique relativement récente par rapport aux autres Core Web Vitals, redBus a constaté de meilleurs résultats commerciaux en se concentrant sur l'amélioration de cette métrique de performance importante axée sur l'utilisateur. Résultat : une augmentation globale de 7% des ventes.
En résumé, l'INP a permis de dresser un tableau des problèmes de performances d'exécution sur le site Web de redBus. Sachant qu'il y avait des améliorations à apporter, redBus a pu observer le problème, le reproduire et utiliser ces informations cruciales pour optimiser son application et son activité.