Trouver une corrélation entre les performances du site et les métriques commerciales a été la clé du succès de ses efforts d'optimisation.
Swappie est une start-up prospère qui vend des téléphones reconditionnés. Pendant quelques années, il a privilégié l'ajout de nouvelles fonctionnalités aux performances du site. Toutefois, lorsqu'il a remarqué que les résultats commerciaux du site mobile étaient à la traîne par rapport à la version pour ordinateur, il a changé de stratégie. Elle s'est concentrée sur l'optimisation des performances et a rapidement constaté une augmentation des revenus générés sur mobile.
42%
Augmentation des revenus provenant des visiteurs sur mobile
10 pp*
*Augmentation du taux de conversion sur mobile relatif de x points de pourcentage
Mettre en avant l'opportunité
Le taux de conversion sur mobile relatif (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 associer à des métriques métier peut s'avérer très délicat. Étant donné que les mêmes campagnes et les mêmes saisons touchent à la fois les mobiles et les ordinateurs, la métrique Rel mCvR élimine l'influence de ces paramètres externes et n'indique que si le site mobile s'améliore ou non.
La moyenne des dix plus grands sites d'e-commerce aux États-Unis est de 50%pour le taux de conversion sur mobile relatif, mais Swappie a enregistré 24%. Cela indique que le site mobile présente des difficultés et que l'entreprise perd des revenus, 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 mobile relatif et du temps de chargement moyen des pages mobiles à l'aide de ce modèle de feuille de calcul. (Consultez 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 en place, les développeurs ont commencé à travailler sur les performances du site.
Après seulement trois mois de travail, l'impact était clair : le taux de conversion relatif sur mobile est passé de 24% à 34 %, et les revenus générés par les mobiles ont augmenté de 42 %.
23%
Temps de chargement moyen de la page plus faible
55%
LCP plus faible
91 %
CLS plus faible
90%
FID inférieur
Optimisations
Optimiser pour le LCP et le CLS
L'équipe de développement de Swappie a constaté qu'il y avait beaucoup de place pour améliorer les petites choses qui avaient été négligées pendant longtemps. L'étude du site sur différents écrans et dans différentes langues a mis en évidence des problèmes de LCP et de CLS faciles à résoudre, mais qui avaient 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 est possible, a entraîné une diminution du LCP.
La détection des décalages de mise en page était difficile, car ils pouvaient varier considérablement en fonction du viewport et de la connexion. Après avoir transmis les Core Web Vitals des utilisateurs à leurs données analytiques, ils ont su qu'ils étaient 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 à la mise à l'échelle appropriée. Ils préchargent les images principales (par exemple, le LCP), mais ne chargent les images en dehors du viewport que si nécessaire.
Polices
Swappie a optimisé les polices en changeant de fournisseur. Cela a eu un impact important, car ils avaient besoin d'un moyen optimal de gérer les polices de caractères requises par différentes langues.
Scripts tiers
Swappie a déployé beaucoup d'efforts pour examiner chaque script et widget tiers, leur utilisation et les fonctionnalités qu'ils fournissaient. Après avoir discuté avec toutes les personnes concernées, il a planifié de réduire l'impact des scripts sur le site, tout en conservant les fonctionnalités. Il a supprimé ce qui était inutile et optimisé le reste, ce qui a considérablement réduit 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 JavaScript et CSS inutilisés ont permis d'améliorer légèrement les performances du site Swappie. Toutefois, ces petites améliorations s'accumulent au fil du temps. Il a également optimisé sa configuration de regroupement.
Créer une culture de la performance chez Swappie
Le résultat obtenu par Swappie ne découle pas seulement des modifications apportées au code, mais également 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 aux métriques métier pour en souligner l'importance. Tout se résume à la hiérarchisation lorsque vous manquez de temps et de ressources, ce qui est toujours le cas. Prioriser la valeur client est la bonne voie à suivre, mais il est trop facile de se concentrer sur de nouvelles fonctionnalités et des améliorations plus directes des conversions si vous considérez que la vitesse du site ne fait qu'améliorer l'expérience utilisateur. Il n'est pas toujours facile d'associer la vitesse du site aux métriques commerciales. C'est là que le calcul avec Rel mCvR nous a beaucoup aidés.
Teemu Huovinen
Une fois que l'équipe de développeurs a eu la possibilité de se concentrer entièrement sur la vitesse du site pendant un trimestre, elle a été plus motivée à approfondir ses recherches.
Combiner notre impact à la croissance de notre équipe est ce qui rend notre travail encore plus impressionnant. Quatre de nos sept développeurs avaient commencé à travailler sur les performances dans le mois. Tout le mérite revient à l'équipe. C'est vraiment incroyable de voir comment nous avons pu nous mobiliser autour de ce sujet et avoir un impact aussi important.
Teemu Huovinen
Teemu souligne également l'importance de prendre le temps au début de créer des plans basés sur les données, d'apprendre à utiliser l'onglet "Performances" de DevTools et de configurer les données analytiques sur l'expérience utilisateur 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. En examinant les métriques Core Web Vitals sur le terrain, ainsi que les scores Lighthouse (basés sur des tests en laboratoire), ils ont pu se concentrer sur les éléments à optimiser qui affecteraient le plus d'utilisateurs.