Le lien entre la vitesse du site et les métriques commerciales

Utilisez des tests A/B pour évaluer l'impact de la vitesse du site sur vos métriques d'entreprise.

Bart Jarochowski

Martin Schierle

Dikla Cohen

Au cours des dernières années, il a été établi que la vitesse du site est un élément important de l'expérience utilisateur et que l'amélioration de cette vitesse profite à différentes métriques commerciales, telles que les taux de conversion et de rebond. Plusieurs articles et études de cas ont été publiés pour étayer cette affirmation, y compris How Website Performance Affects Conversion Rates (Comment les performances d'un site Web affectent les taux de conversion) de Cloudflare, Milliseconds Make Millions (Les millisecondes génèrent des millions) de Deloitte et Shopping for Speed on eBay.com (Acheter rapidement sur eBay.com), pour n'en citer que quelques-uns.

Même si l'intérêt de la rapidité est évident, de nombreuses entreprises ont du mal à hiérarchiser les tâches qui amélioreront la vitesse de leur site, car elles ne savent pas exactement comment cela affecte leurs utilisateurs et, par conséquent, leur activité.

En l'absence de données, il est facile de retarder le travail sur la vitesse du site et de se concentrer sur d'autres tâches. Il est courant que certains membres de l'entreprise reconnaissent l'importance de la vitesse du site, mais ne parviennent pas à en faire la promotion et à convaincre plusieurs personnes concernées d'investir en conséquence.

Cet article fournit des conseils généraux sur l'utilisation des tests A/B pour évaluer l'impact de la vitesse du site sur les métriques commerciales, ce qui permet de prendre des décisions plus efficaces à ce sujet.

Étape 1: Choisissez une page à tester en mode A/B

Votre objectif est de tester l'hypothèse selon laquelle la vitesse de chargement des pages est liée aux métriques de votre entreprise. Pour simplifier, vous pouvez vous limiter à identifier une seule page pour l'analyse. Le travail futur peut s'étendre à plusieurs pages du même type pour vérifier les résultats, puis à d'autres zones du site. Vous trouverez quelques suggestions pour commencer en bas de cette étape. Plusieurs exigences guident le processus de sélection des pages:

• Le test A/B ne doit être exécuté que sur les appareils des utilisateurs mobiles. À l'échelle mondiale, les sites partenaires que nous accompagnons enregistrent en moyenne plus de 50% (et plus encore) de leur trafic provenant d'appareils mobiles, mais ce chiffre peut augmenter considérablement en fonction de la région et du secteur. Les appareils mobiles sont plus sensibles aux sites Web lents en raison des contraintes de traitement et de mémoire, ainsi que des réseaux moins stables. De plus, les habitudes d'utilisation en déplacement signifient que les attentes en termes de vitesse sont plus élevées.

• La page que vous choisissez pour les tests doit être une partie importante de votre entonnoir de conversion. Chaque site a un objectif différent. Par conséquent, chaque site suit des métriques de réussite différentes. Ces métriques sont généralement liées à un parcours utilisateur analysé à l'aide d'un entonnoir. Par exemple, les utilisateurs d'un site Web d'e-commerce doivent parcourir une page d'accueil, des pages de catégorie, des pages de produits et une page de paiement pour effectuer un achat. Si vous optimisez pour les conversions, l'une de ces pages est un bon choix.

• La page doit avoir un objectif unique. À moins que votre site n'ait une mission très spécifique, il est généralement préférable d'éviter d'utiliser la page d'accueil pour votre test. Les pages d'accueil de nombreux sites commerciaux sont des portails vers une grande variété de fonctionnalités qui rendront votre analyse bruyante. Par exemple, si vous optimisez votre site d'actualités pour les pages vues par session, il peut être préférable d'exclure les parties non commerciales du site et de vous concentrer sur les sections et les articles monétisés.

• La page choisie doit générer suffisamment de trafic pour que vous n'ayez pas à attendre longtemps avant d'obtenir un résultat statistiquement pertinent.

• La page sélectionnée doit se charger relativement lentement. Plus la vitesse est lente, mieux c'est. Cela signifie non seulement que vous aurez probablement plus de facilité à améliorer la page, mais aussi que les données devraient être beaucoup plus claires. Vous pouvez effectuer un rapide examen du rapport sur la vitesse de Google Analytics ou du rapport Core Web Vitals de la Search Console pour identifier les pages les plus lentes.

• La page doit être relativement stable. N'apportez aucune modification aux pages (tout ce qui pourrait avoir un impact sur les métriques commerciales) tant que le test n'est pas terminé. Moins il y a de facteurs externes à prendre en compte, plus l'analyse sera claire.

En vous appuyant sur les informations ci-dessus, vous devriez pouvoir identifier plus facilement les pages qui sont de bons candidats pour votre test. Les pages de destination des annonces sont également un bon choix, car vous avez probablement accès à des métriques commerciales, des tests A/B et des analyses intégrés. Si vous hésitez encore, voici quelques idées par secteur:

• Contenu des sites Web: sections, articles
• Pages de vitrine: pages de catégorie, pages produit
• Lecteurs multimédias: pages de découverte/recherche de vidéos, page de lecture de vidéos
• Services et découverte (voyages, voitures de location, enregistrement de services, etc.) : page de saisie du formulaire initiale

Étape 2: Mesurez les performances

Il existe deux façons générales de mesurer les métriques: en laboratoire et sur le terrain. Nous avons personnellement trouvé que la mesure des métriques sur le terrain (également appelée "Real User Monitoring" ou RUM) était plus utile, car elle reflète l'expérience des utilisateurs réels. Perfume, Firebase Performance Monitoring et Événements Google Analytics sont des exemples de bibliothèques et de services qui peuvent vous aider à créer des rapports sur les données RUM.

Il existe de nombreuses métriques à choisir, car elles visent à capturer différents aspects de l'expérience utilisateur. N'oubliez pas que votre objectif est de déterminer s'il existe une corrélation directe entre votre vitesse et vos métriques commerciales. Il peut donc être utile de suivre quelques métriques de vitesse afin de déterminer celle qui a la corrélation la plus forte avec la réussite de votre entreprise. En général, nous vous recommandons de commencer par les Core Web Vitals. La bibliothèque web-vitals.js peut vous aider à mesurer certains des Core Web Vitals sur le terrain. Notez toutefois que la compatibilité avec les navigateurs n'est pas totale. En plus des Core Web Vitals, les autres métriques Web Vitals méritent également d'être examinées. Vous pouvez également définir des métriques personnalisées, telles que "Temps avant le premier clic sur une annonce".

Étape 3: Créer des variantes de performances de vitesse

À cette étape, vous allez implémenter des modifications pour créer une version plus rapide de la page à tester par rapport à la version actuelle.

Voici quelques points à garder à l'esprit:

1. Évitez de modifier l'UI ou l'expérience utilisateur. En dehors du fait qu'une page est plus rapide que l'autre, les modifications doivent être invisibles pour les utilisateurs.
2. La mesure est également un aspect clé de cette étape. Lors du développement, vous devez utiliser des outils de test en laboratoire tels que Lighthouse pour indiquer l'impact de vos modifications sur les performances. N'oubliez pas que les modifications apportées à une métrique peuvent souvent en influencer une autre. Une fois les pages en ligne, utilisez la RUM pour une évaluation plus précise.

Vous pouvez créer des variantes de performances de différentes manières. Pour les besoins du test, vous devez le faire aussi simplement que possible. Vous trouverez ci-dessous quelques options.

Créer une page plus rapide

• Utilisez un outil tel que Squoosh pour optimiser manuellement les images de votre page de test.
• Utilisez la couverture du code des outils pour les développeurs pour supprimer manuellement le code JavaScript ou CSS inutilisé uniquement pour cette page.
• Charger efficacement des scripts tiers
• Utilisez un outil tel que Critical pour extraire et intégrer le CSS critique.
• Supprimez le code JavaScript non critique qui n'a pas d'impact sur l'expérience utilisateur et dont vous pouvez vous passer pour le test (par exemple, certaines bibliothèques tierces).
• Implémentez le chargement paresseux au niveau du navigateur, qui n'est pas compatible avec tous les navigateurs, mais peut néanmoins améliorer considérablement les performances lorsqu'il est pris en charge.
• Supprimez les balises d'analyse non essentielles ou chargez-les de manière asynchrone.

Pour découvrir d'autres optimisations à prendre en compte, consultez Temps de chargement rapide et Checklist des performances du front-end. Vous pouvez également utiliser PageSpeed Insights pour exécuter Lighthouse, qui identifie les opportunités d'amélioration des performances.

Ralentir la page

Il s'agit peut-être du moyen le plus simple de créer des variantes. Pour ce faire, ajoutez un script simple, ralentissez les temps de réponse du serveur, chargez des images plus grandes, etc. Le Financial Times a opté pour cette option lorsqu'il a testé l'impact des performances sur ses métriques métier: consultez Un FT.com plus rapide.

Accélérez le chargement des pages

Dans les cas où la page de test (par exemple, une page d'informations détaillées sur un produit) est principalement liée à une autre page (par exemple, la page d'accueil), le prefetching ou le prérendu de la page produit directement depuis la page d'accueil pour le groupe de test accélère le chargement ultérieur de la page. Notez que dans ce cas, la répartition du test A/B (étape 4) est effectuée sur la page d'accueil. De plus, tout cela peut ralentir la première page. Veillez donc à le mesurer et à en tenir compte lorsque vous analyserez les résultats du test (étape 5).

Étape 4: Créer un test A/B

Une fois que vous avez deux versions de la même page, dont l'une est plus rapide que l'autre, l'étape suivante consiste à répartir le trafic pour mesurer l'impact. En général, il existe de nombreuses techniques et de nombreux outils pour effectuer des tests A/B, mais sachez que toutes les méthodes ne sont pas adaptées pour mesurer l'impact sur les performances de vitesse.

Si vous utilisez un outil de test A/B tel que Optimizely ou Optimize, nous vous recommandons vivement de configurer un test côté serveur plutôt qu'un test côté client, car les tests A/B côté client fonctionnent souvent en masquant le contenu de la page jusqu'à ce que le test soit chargé, ce qui signifie que le test A/B lui-même fausserait les métriques que vous souhaitiez mesurer. Si vous ne pouvez effectuer que des tests côté client, envisagez de configurer le test sur une autre page et de modifier les liens vers votre page de test pour répartir le trafic. Ainsi, la page de test elle-même n'est pas ralentie par le test côté client.

Exemple

Exemple de modifications des performances des tests A/B sur une page produit détaillée donnée via des tests côté serveur:

La requête est envoyée au backend, qui distribue les utilisateurs vers les deux versions différentes de la page. Bien que cette configuration soit généralement adaptée, elle nécessite souvent des ressources IT pour configurer la division côté serveur.

Voici un exemple de configuration de test côté client, qui utilise la page précédente (la page d'accueil dans le diagramme ci-dessous) pour exécuter le code JavaScript de test:

Le code JavaScript de test manipule le lien sortant pour fournir aux deux groupes d'utilisateurs de test des liens vers les deux versions de la page produit en question. Cette approche est facile à configurer et à gérer à l'aide d'outils de test A/B courants tels que Optimizely ou Optimize. Elle n'a aucune incidence sur le test de performances, car le code JavaScript de test s'exécute sur une page différente.

Vous pouvez également choisir deux pages dont le comportement et les performances sont très similaires (par exemple, pour deux produits très similaires). Appliquez vos modifications à l'une d'entre elles, puis comparez l'évolution des métriques au fil du temps. Cela signifie que vous ne menez pas de test A/B approprié, mais cela peut tout de même être très instructif.

Si votre page de test est utilisée comme page de destination pour des campagnes publicitaires, il peut être utile d'utiliser les outils de test A/B intégrés de votre réseau publicitaire, comme le test de répartition Facebook Ads ou les campagnes brouillons et tests Google Ads. Si ce n'est pas possible, vous pouvez utiliser deux campagnes avec la même configuration et définir différentes pages de destination comme cibles.

Étape 5: Analyser le test A/B

Une fois que vous avez exécuté votre test suffisamment longtemps et que vous disposez de suffisamment de données pour être sûr des résultats, il est temps de tout rassembler et d'effectuer une analyse. La procédure dépend vraiment de la façon dont le test a été exécuté. Passons en revue les options.

Si votre test a été exécuté sur des pages de destination d'annonces à l'aide des outils mentionnés ci-dessus, l'analyse devrait être aussi simple que la lecture d'un résultat. Si vous utilisez les fonctionnalités "Brouillons et tests" de Google, examinez la comparaison à l'aide du ScoreCard.

Des plates-formes comme Optimizely ou Optimize proposent également des méthodes simples pour interpréter les résultats et déterminer l'impact de la vitesse sur vos pages.

Si vous utilisez Google Analytics ou un outil similaire, vous devrez créer le rapport vous-même. Heureusement, Google Analytics permet de créer des rapports personnalisés assez facilement. C'est donc par là que vous devriez commencer. Si vous avez envoyé des données de vitesse à Google Analytics à l'aide d'une dimension personnalisée, consultez le guide de création de rapports pour savoir comment les configurer et les inclure dans vos rapports personnalisés. Assurez-vous que votre rapport couvre la date du test et qu'il est configuré pour afficher les deux variantes. Que doit contenir ce rapport ?

• Tout d'abord, vous devez inclure les métriques commerciales qui vous intéressent le plus: conversions, pages vues, annonces vues, taux de conversion, métriques d'e-commerce, taux de clics, etc.
• De plus, d'autres métriques de page standards qui justifient également l'amélioration de la vitesse du site sont le taux de rebond, la durée moyenne de la session et le pourcentage de sortie.

Vous devrez peut-être également filtrer les données pour les mobiles et vous assurer d'exclure les robots et tout autre trafic non généré par les utilisateurs. Une analyse plus avancée filtre également par région, réseaux, appareils, source de trafic, profils et types d'utilisateurs, par exemple nouveaux utilisateurs par rapport aux visiteurs réguliers. Chaque groupe d'utilisateurs peut être plus ou moins sensible aux vitesses plus lentes, et identifier ces groupes est également très utile.

Looker Studio (anciennement Data Studio) ou d'autres outils de visualisation de données permettent d'intégrer facilement diverses sources de données, y compris Google Analytics. Cela permet de réaliser facilement des analyses et de créer des tableaux de bord partageables avec les nombreuses personnes impliquées dans la gestion d'un site Web moderne pour obtenir un appui plus important. Par exemple, The Guardian a créé un système d'alerte automatisé qui avertit l'équipe éditoriale lorsqu'un contenu publié récemment dépasse ses seuils de taille de page ou de vitesse, et est susceptible de ne pas satisfaire les utilisateurs.

Étape 6: Tirer des conclusions et décider des prochaines étapes

Une fois que vous disposez de données qui relient les métriques de performances et d'entreprise, vous pouvez examiner les résultats et commencer à tirer des conclusions.

Si vous constatez clairement une corrélation entre l'amélioration des performances et l'amélioration des métriques commerciales, résumez les résultats et les communiquez à l'ensemble de l'entreprise. Maintenant que vous pouvez parler des performances de vitesse dans un "langage d'entreprise", vous êtes plus susceptible d'attirer l'attention des différentes personnes concernées et de placer les performances de vitesse du site sur la liste de priorités de tous. L'étape suivante consiste à définir des budgets de performances en fonction des résultats et à planifier le travail pour respecter ces budgets. Étant donné que vous connaissez la valeur de ce travail, vous pourrez hiérarchiser les tâches en conséquence.

Si vous ne parvenez pas à identifier de corrélation, consultez les mises en garde ci-dessous et évaluez si des tests similaires doivent être effectués ailleurs sur le site (par exemple, dans l'ensemble de l'entonnoir d'achat ou sur un autre type de page).

Mises en garde

Plusieurs raisons peuvent expliquer l'absence de corrélation significative entre les métriques de vitesse du site et les métriques commerciales:

• La page choisie n'a pas suffisamment d'influence sur les métriques commerciales que vous examinez. Par exemple, une page produit plus rapide n'aura peut-être pas un impact important sur les taux de conversion si la page de paiement est très peu conviviale ou lente. Envisagez d'examiner des métriques plus pertinentes, telles que les taux de rebond, les taux d'ajout au panier ou toute autre métrique plus directement liée à la page que vous testez.
• La différence de vitesse n'est pas assez significative entre les deux versions. Cette valeur doit être évaluée en fonction des métriques RUM que vous mesurez.
• Le mécanisme de test A/B présente un défaut. Il est possible que le trafic ne soit pas distribué correctement ou que les données analytiques ne soient pas correctement enregistrées. Pour exclure cette possibilité, envisagez d'effectuer un test A/A dans lequel vous testez la même version d'une page à l'aide du même mécanisme de test et vous assurez qu'il n'y a aucune différence de résultats.
• La vitesse du site n'a aucune incidence sur vos métriques commerciales. Cela est rare, mais peut se produire lorsque votre marché cible est moins sensible à la vitesse (par exemple, si le site est principalement consulté à partir d'appareils puissants sur un réseau puissant) ou si la demande des utilisateurs est très élevée et que le choix est limité (par exemple, un service de billetterie qui vend exclusivement des billets pour des spectacles très demandés). Notez que cela ne signifie pas qu'un site plus rapide n'améliorera pas l'expérience utilisateur et n'n'affectera pas la réputation de la marque.

Conclusion

Bien qu'il soit tentant de lancer des optimisations de vitesse sur l'ensemble du site, il est généralement plus avantageux à long terme de commencer par comprendre ce que cela signifie pour vos utilisateurs et votre entreprise d'avoir un site Web plus rapide. C'est la différence entre dire "Nous avons amélioré le FCP de 1,5 seconde" et "Nous avons amélioré le FCP de 1,5 seconde, ce qui a amélioré nos taux de conversion de 5%". Cela vous permettra de hiérarchiser les tâches à venir, de gagner l'adhésion des différentes personnes concernées et de faire de la vitesse du site un effort à l'échelle de l'entreprise.