La réussite de leurs efforts d'optimisation consistait essentiellement à établir un lien entre les performances des sites et les métriques commerciales.
Swappie est une start-up prospère qui vend des téléphones reconditionnés. Pendant quelques années, l'entreprise a privilégié l'ajout de nouvelles fonctionnalités aux performances du site. Toutefois, lorsqu'elle a remarqué que les résultats commerciaux sur le site mobile étaient en retard par rapport à la version pour ordinateur, un changement s'est produit. L'entreprise s'est concentrée sur l'optimisation des performances et a très vite constaté une augmentation des revenus sur mobile.
42%
Augmentation du chiffre d'affaires généré par les visiteurs sur mobile
10pp*
*augmentation en points de pourcentage du taux de conversion sur mobile
Mise en évidence des opportunités
Le taux de conversion relatif sur mobile (Rel mCvR) est calculé en divisant le taux de conversion sur mobile par le taux de conversion sur ordinateur. Il existe de nombreuses possibilités de suivre les métriques de vitesse, mais les relier aux métriques métier peut s'avérer assez délicat. Étant donné que les mêmes campagnes et événements saisonniers sont diffusés à la fois sur mobile et sur ordinateur, la métrique "Rel mCvR" élimine l'influence de ces paramètres externes et indique uniquement si le site mobile s'améliore ou non.
La moyenne des 10 plus grands sites d'e-commerce des États-Unis est un taux de conversion sur mobile de 50%, contre 24 % pour Swappie. Cela indique que le site mobile présentait des difficultés et que l'entreprise passait à côté de revenus potentiels, ce qui a conduit au lancement du projet d'amélioration des performances.
Mesurer l'impact des améliorations des performances
Swappie a utilisé Google Analytics pour configurer le suivi quotidien du taux de conversion sur mobile relatif au taux de conversion et du temps de chargement moyen des pages sur mobile à l'aide de ce modèle de feuille de calcul. (Lisez les instructions d'utilisation de la feuille de calcul.) Elle a également commencé à suivre les Core Web Vitals via Google Analytics et BigQuery. Une fois le suivi mis en place, les développeurs ont commencé à travailler sur les performances du site.
Après seulement trois mois de travail, l'impact était évident : le taux de conversion sur mobile de Rel est passé de 24% à 34 %, et les revenus sur mobile ont augmenté de 42 %.
23%
Temps de chargement moyen des pages réduit
55%
LCP plus faible
91%
CLS inférieur
90%
FID inférieur
Optimisations
Optimiser le LCP et le CLS
L'équipe de développement de Swappie a constaté qu'il existait beaucoup de marge d'amélioration pour les petites choses qui ont été négligées pendant longtemps. L'étude du site sur différentes fenêtres d'affichage et différentes langues a mis en évidence les problèmes de LCP et de CLS faciles à résoudre et ayant un impact important sur les performances globales. Par exemple, l'affichage de l'élément LCP sur le serveur plutôt que sur le client lorsque cela était possible a entraîné une diminution du LCP.
Il était difficile de détecter les décalages de mise en page, car ils pouvaient varier considérablement en fonction de la fenêtre d'affichage et de la connexion. Après avoir transmis les Core Web Vitals des utilisateurs à leurs analyses, l'équipe savait qu'elle était sur la bonne voie, car le CLS avait diminué.
Images
Les images ont été optimisées grâce au préchargement, au chargement différé et au dimensionnement approprié. Elles préchargent les images principales (par exemple, le LCP), tout en ne chargeant des images en dehors de la fenêtre d'affichage que si nécessaire.
Polices
Remplacez les polices optimisées en changeant de fournisseur. Cela a eu un impact important, car l'entreprise avait besoin d'un moyen optimal de gérer les polices de caractères requises par différentes langues.
Scripts tiers
Swappie a consacré beaucoup d'efforts à examiner chaque script et widget tiers, où ils étaient utilisés et les fonctionnalités qu'ils proposaient. Après avoir discuté avec toutes les personnes concernées, elle a prévu de réduire l'impact des scripts sur le site, tout en conservant les fonctionnalités. Elle a supprimé les éléments inutiles et optimisé le reste, ce qui a permis de réduire considérablement la quantité de code JavaScript tiers sur le site.
Supprimer le code inutilisé et optimiser le regroupement
L'optimisation des importations et la suppression des fichiers JS et CSS inutilisés ont permis d'améliorer légèrement les performances du site de Swappie, mais ces petites améliorations s'accumulent au fil du temps. Elle a également optimisé la configuration des offres groupées.
Créer une culture de la performance chez Swappie
Le résultat obtenu par Swappie découle non seulement des modifications apportées au code, mais aussi des changements apportés à l'organisation et à ses priorités.
Teemu Huovinen, responsable de l'ingénierie, explique:
Vous devez associer la vitesse du site à vos métriques métier pour bien mettre en avant l'importance de cette vitesse. Tout se résume à établir des priorités lorsque vous manquez de temps et de ressources, ce qui est toujours le cas. Il est préférable de donner la priorité à la valeur client, mais il est trop facile de se concentrer sur de nouvelles fonctionnalités et des améliorations plus directes des conversions si vous constatez que la vitesse du site ne fait qu'améliorer l'"sentiment" du site. Il n'est pas toujours facile d'établir un lien entre la vitesse du site et les métriques commerciales. C'est là que le calcul à l'aide de Rel mCvR nous a beaucoup aidés.
Teemu Huovinen
Une fois que l'équipe de développeurs a eu l'opportunité de se concentrer entièrement sur la vitesse du site pendant un trimestre, elle a été davantage motivée pour approfondir le sujet.
C'est d'autant plus vrai en raison de notre impact et de la croissance de notre équipe. Quatre de nos sept développeurs avaient commencé à travailler sur les performances dans le mois qui s'est écoulé. Tout le crédit que nous tenons à l'équipe est impressionnant de voir comment nous avons pu nous rassembler autour du sujet et avoir un tel impact.
Teemu Huovinen
Teemu souligne également l'importance de consacrer du temps au début pour élaborer des plans basés sur les données, apprendre à utiliser l'onglet "Performances" des outils de développement et configurer les analyses sur les utilisateurs avant d'apporter des améliorations. Les graphiques (en particulier ceux qui vont dans la bonne direction) sont une excellente source de commentaires et de validation pour votre travail. L'examen des Core Web Vitals sur le terrain parallèlement aux scores Lighthouse (basés sur des fonctionnalités expérimentales) a permis à l'équipe de se concentrer sur l'optimisation des éléments pertinents susceptibles d'affecter le plus d'utilisateurs.