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

Réalisez des tests A/B pour évaluer l'impact de la vitesse du site sur les métriques de votre entreprise.

Bart Jarochowski

Martin Schierle

Dikla Cohen

Ces dernières années, il a été démontré que la vitesse du site joue un rôle important dans l'expérience utilisateur et que l'amélioration de cette vitesse profite à différentes métriques métier, telles que les taux de conversion et les taux de rebond. De nombreux articles et études de cas ont été publiés pour étayer cette affirmation, dont les articles How Website Performance Affects Conversion Rates (Comment les performances des sites Web affectent les taux de conversion) de Cloudflare, Shopping for Speed on eBay.com (Deloitte totalisent plusieurs minutes en millions) et Shopping for Speed on eBay.com, pour n'en citer que quelques-uns.

Même si l'intérêt de la vitesse est clair, de nombreuses entreprises ont encore du mal à prioriser les tâches qui améliorent 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 lié à la vitesse du site et de se concentrer sur d'autres tâches. Il est courant que certaines personnes de l'entreprise reconnaissent l'importance de la vitesse du site, mais qu'elles ne soient pas en mesure de justifier cela ni de convaincre plusieurs personnes d'investir en conséquence.

Cet article fournit des conseils généraux sur la façon d'utiliser les 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.

Étape 1: Sélectionnez une page pour le test A/B

L'objectif est de tester l'hypothèse selon laquelle la vitesse des pages est liée à vos métriques commerciales. Par souci de simplicité, vous pouvez dans un premier temps vous limiter à l'identification d'une seule page à analyser. Les tâches ultérieures peuvent être étendues à plusieurs pages du même type afin de vérifier les résultats, puis à d'autres sections du site. Vous trouverez quelques suggestions au bas de cette étape pour vous indiquer par où commencer. Le processus de sélection des pages repose sur plusieurs exigences:

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

• La page que vous choisissez pour le test doit constituer une partie importante de votre entonnoir de conversion. Chaque site a un objectif différent et suit donc des indicateurs de réussite différents. Ces métriques sont généralement liées au parcours utilisateur analysé à l'aide d'un entonnoir. Par exemple, pour effectuer un achat, les utilisateurs d'un site Web d'e-commerce devront parcourir une page d'accueil, des pages de catégories, des pages de produits et une page de paiement. Si vous optimisez les conversions, l'une de ces pages est adaptée.

• 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, ce qui rendra votre analyse bruyante. Par exemple, si vous souhaitez optimiser le nombre de pages vues par session sur un site d'actualités, 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 enregistrer suffisamment de trafic pour vous éviter d'avoir à attendre longtemps avant d'obtenir un résultat statistiquement pertinent.

• La page sélectionnée devrait être relativement lente. En fait, plus il est lent, mieux c'est. Non seulement cela signifie que vous aurez probablement plus de facilité à améliorer la page, mais cela signifie également que les données doivent être beaucoup plus claires. Vous pouvez parcourir rapidement le rapport sur la vitesse de Google Analytics ou le rapport Core Web Vitals de la Search Console pour identifier les pages les plus lentes.

• La page doit être relativement stable. Ne mettez pas à jour les 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 propre.

En vous inspirant de ce qui précède, vous devriez être un peu plus clair sur les pages qui se prêtent le mieux à votre test. Les pages de destination des annonces sont également un bon choix, car vous êtes susceptible de disposer de métriques commerciales, de tests A/B et d'analyses intégrés. Si vous avez encore des doutes, voici quelques idées par secteur:

• Sites Web de contenu: sections, articles
• Vitrines: pages de catégorie, pages de produits
• Lecteurs multimédias: pages de découverte/recherche de vidéos, page de lecture de vidéo
• Services et découverte (voyages, voitures de location, inscription à des services, etc.) : page de formulaire d'inscription initiale

Étape 2: Mesurez les performances

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

Vous pouvez choisir parmi de nombreuses métriques, 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 plus forte corrélation avec la réussite de votre entreprise. En général, nous vous recommandons de commencer par Core Web Vitals. La bibliothèque web-vitals.js peut vous aider à mesurer certaines des Core Web Vitals sur le terrain, mais notez que les navigateurs ne sont pas totalement compatibles. Au-delà des Core Web Vitals, les autres métriques Web Vitals méritent également d'être consultées. Vous pouvez également définir des métriques personnalisées, telles que "Délai avant le premier clic sur l'annonce".

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

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

Voici quelques points à retenir:

1. Évitez de modifier l'UI ou l'expérience utilisateur. En plus d'être plus rapide sur une page, 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 tests en laboratoire tels que Lighthouse pour indiquer l'effet de vos modifications sur les performances. Gardez à l'esprit que les modifications apportées à une métrique peuvent souvent influencer une autre. Une fois les pages en ligne, s'en tenir à RUM pour une évaluation plus précise.

Il existe différentes manières de créer des variantes de performances. Pour les besoins de ce test, faites-le 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 de développement pour éliminer manuellement les fichiers JavaScript ou CSS inutilisés uniquement pour cette page.
• Charger efficacement les scripts tiers
• Utilisez un outil tel que Critical pour décomposer et intégrer les CSS critiques
• Supprimez le code JavaScript non critique qui n'a pas d'incidence sur l'expérience utilisateur et que vous pouvez vous passer pour le test (par exemple, certaines bibliothèques tierces).
• Mettez en œuvre le chargement différé au niveau du navigateur, qui n'est pas compatible avec tous les navigateurs, mais qui peut améliorer considérablement les performances s'il est compatible.
• Supprimez les balises d'analyse non critiques ou chargez-les de manière asynchrone.

Vous trouverez d'autres optimisations à envisager dans les sections Temps de chargement rapides et Checklist des performances de l'interface. Vous pouvez également utiliser PageSpeed Insights pour exécuter Lighthouse, qui identifie les opportunités d'amélioration des performances.

Ralentir la page

Il peut s'agir du moyen le plus simple de créer des variantes. Vous pouvez y parvenir en ajoutant un simple script, en ralentissant les temps de réponse du serveur, en chargeant des images plus grandes, etc. Le Financial Times a choisi cette option lorsqu'il a testé l'impact des performances sur ses métriques commerciales: consultez la page FT.com plus rapide.

Accélérer 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 préchargement ou le préchargement de la page du produit directement depuis la page d'accueil pour le groupe de test accélère le chargement suivant de la page. Notez que dans ce cas, la division du test A/B (étape 4) est effectuée sur la page d'accueil. En outre, tout cela peut ralentir la première page. Veillez donc à mesurer cela et à en tenir compte lors de l'analyse des résultats du test (étape 5).

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

Une fois que vous disposez de deux versions de la même page où 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 nombreux outils et techniques 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 tests A/B comme Optimizely ou Optimize, nous vous recommandons vivement de configurer un test côté serveur plutôt qu'un test côté client. En effet, les tests A/B côté client masquent souvent le contenu de la page jusqu'à ce que le test soit chargé, ce qui fausserait les métriques à mesurer. Si vous ne pouvez effectuer des tests que 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. De cette façon, la page de test elle-même n'est pas glissée vers le bas par le test côté client.

Exemple

Exemple de modifications des performances des tests A/B sur une page d'informations détaillées sur le produit (PDP) donnée via les tests côté serveur:

La requête est envoyée au backend, qui distribue les utilisateurs entre les deux versions différentes de la page. Bien qu'il s'agisse généralement d'une bonne configuration, des ressources informatiques sont souvent nécessaires pour mettre en place la répartition côté serveur.

Voici un exemple de configuration de test côté client, qui utilise la page précédente (la page d'accueil du 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 test des liens vers les deux versions de la page d'informations détaillées sur les produits en question. Cette méthode est facile à configurer et à gérer à l'aide d'outils de tests A/B courants tels qu'Optimizely ou Optimize. Elle n'a aucune incidence sur le test de performances, car le code JavaScript de test s'exécute sur une autre page.

Vous pouvez également sélectionner deux pages dont le comportement et les performances sont très similaires (par exemple, pour deux produits très similaires). Appliquez vos modifications à l'un d'entre eux, puis comparez les différences de métriques au fil du temps. Cela signifie que vous n'effectuez pas un test A/B approprié, mais qu'il peut tout de même être très utile.

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 tests A/B intégrés à votre réseau publicitaire, tels que le test A/B Facebook Ads ou les brouillons et tests Google Ads. Si ce n'est pas possible, vous pouvez utiliser deux campagnes avec la même configuration et définir des pages de destination différentes comme cibles.

Étape 5: Analysez 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 avoir confiance dans les résultats, il est temps de tout synthétiser et d'exécuter une analyse. La procédure à suivre dépend du mode d'exécution du test. Examinons les options disponibles.

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 la fonctionnalité Brouillons et tests de Google, consultez la comparaison à l'aide du ScoreCard.

Des plates-formes telles qu'Optimizely ou Optimize offrent également un moyen simple d'interpréter les résultats et de déterminer l'impact de la vitesse sur vos pages.

Si vous utilisez Google Analytics ou un outil similaire, vous devrez créer vous-même le rapport. Heureusement, Google Analytics facilite la création de rapports personnalisés. C'est donc par là que vous devriez commencer. Si vous avez envoyé des données sur la vitesse à Google Analytics à l'aide d'une dimension personnalisée, consultez le guide sur la 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 ?

• Vous devez avant tout inclure les métriques qui vous intéressent le plus: conversions, pages vues, annonces vues, taux de conversion, métriques d'e-commerce, taux de clics, etc.
• En outre, le taux de rebond, la durée moyenne des sessions et le pourcentage de sortie sont d'autres métriques standards utiles pour améliorer la vitesse du site.

Vous devrez peut-être également filtrer les données sur les mobiles et veiller à exclure les bots et le trafic non utilisateur. Une analyse plus avancée permettrait également de filtrer par région, réseaux, appareils, source de trafic, et profils utilisateur et types (nouveaux utilisateurs par rapport aux visiteurs récurrents, par exemple). Chaque groupe d'utilisateurs peut être plus ou moins sensible aux débits plus lents, et les identifier est également très utile.

Looker Studio (anciennement Data Studio) ou d'autres outils de visualisation des données facilitent l'intégration de diverses sources de données, y compris Google Analytics. Cela facilite les analyses et la création de tableaux de bord pouvant être partagés avec les nombreuses personnes concernées par la gestion d'un site Web moderne afin d'obtenir l'adhésion des autres. Par exemple, le Guardian a créé un système d'alerte automatique qui avertit l'équipe éditoriale lorsqu'un contenu publié récemment dépassait les seuils de vitesse ou de taille de page, ce qui risquait 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 associant les métriques de performances et d'activité, 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 métier, résumez les résultats et générez des rapports les concernant pour l'ensemble de l'entreprise. Maintenant que vous pouvez parler des performances de vitesse dans un "langage commercial", vous avez plus de chances d'attirer l'attention de différentes personnes et de placer les performances de vitesse du site sur le plan de tous. L'étape suivante consiste à définir des budgets de performances en fonction des résultats et à planifier les tâches à accomplir pour atteindre ces budgets. Comme vous connaissez la valeur de ce travail, vous pourrez définir des priorités en conséquence.

Si vous ne parvenez pas à identifier de corrélation, examinez les mises en garde ci-dessous et déterminez si des tests similaires doivent être exécuté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 de produit plus rapide peut ne pas avoir d'impact important sur les taux de conversion si la page de paiement est très lente ou très peu conviviale. Pensez à 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 importante entre les deux versions. Cette valeur doit être évaluée en fonction des métriques RUM que vous mesurez.
• Le mécanisme des tests A/B présente un défaut. Il est possible que le trafic ne soit pas distribué correctement ou que les rapports analytiques ne s'affichent pas correctement. Pour écarter ce problème, envisagez d'exécuter 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 assurez-vous qu'il n'y a pas de différence dans les résultats.
• La vitesse du site n'a aucune incidence sur vos métriques commerciales. Cette situation est rare, mais peut se produire lorsque votre marché cible est moins sensible à la vitesse (par exemple, lorsque le site est principalement accessible depuis des appareils puissants sur un réseau puissant), ou lorsque 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 à la demande). Notez que cela ne signifie pas qu'un site plus rapide n'améliorera pas l'expérience utilisateur et, par conséquent, affectera 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 comprendre ce que signifie pour vos utilisateurs et votre entreprise d'avoir un site Web plus rapide. C'est la différence entre "nous avons amélioré le FCP de 1,5 seconde" et "nous avons amélioré le FCP de 1,5 seconde et nos taux de conversion ont augmenté de 5%". Cela vous permettra de prioriser les tâches supplémentaires, d'obtenir l'adhésion des différentes personnes concernées et de faire en sorte que les performances de vitesse du site soient un effort de toute l'entreprise.