Vous connaissez peut-être PageSpeed Insights, un des outils gratuits de Google pour réaliser un test des performances de votre site Magento… Si vous souhaitez aller encore plus loin dans l’analyse de vos temps de chargement, vous devriez utiliser WebPageTest. Grâce à toutes les données qu’il propose,  vous obtiendrez de nombreuses informations relatives au temps de chargement de vos pages, qui vous permettront de savoir quelles actions mettre en place pour optimiser votre site web.

Comment utiliser cet outil et l’exploiter au mieux ? Comment améliorer les scores et métriques webperf de votre site Magento ? Nous vous donnons les bases pour obtenir les meilleurs résultats sur WebPageTest, et ainsi favoriser votre référencement sur Google et le taux de conversion sur votre site e-commerce. Car avec un contenu de qualité, la rapidité d’un site est un critère majeur pour une expérience client réussie, en plus de soutenir vos actions pour optimiser votre SEO !

Comment avoir de bons résultats sur WebPageTest avec Magento-1

Optimisation du temps de chargement de pages Magento : petit rappel

Avant de réaliser votre premier test de performance avec WebPageTest, gardez à l’esprit quelques règles de base pour que vos pages se chargent le plus rapidement possible :

  • utiliser la dernière version de Magento, en acceptant les mises à jour proposées par la plateforme ;
  • optimiser le contenu multimédia, afin qu’il soit le moins lourd possible (résolution adaptée, compression et redimensionnement des images, etc.) ;
  • activer la fonction « Full-Page Cache » du CMS ;
  • ne pas s’encombrer d’extensions inutiles ;
  • choisir un hébergement web performant et adapté à vos besoins ;
  • activer le mode production de Magento, et procéder à la minification des codes CSS et JavaScript.

Une fois que tout ceci est en place, vous aurez préparé le terrain pour des analyses plus approfondies via l’outil WebPageTest. Vous serez alors en mesure de connaître plus précisément ce qui fait éventuellement défaut à votre site et gagner encore quelques dixièmes ou centièmes de secondes, voire des secondes entières sur la vitesse de chargement des pages.

Introduction à WebPageTest : comment réaliser un test

Vous devez à tout prix savoir bien paramétrer vos tests de performance pour obtenir des données pertinentes. Une fois que vous êtes sur l’outil, vous aurez à remplir plusieurs champs :

  • l’adresse de la page à tester (WebPageTest ne teste pas les sites en entier, mais les pages indépendamment) ;
  • le lieu (choisissez une localisation pertinente par rapport à votre cible : si vous vendez principalement à des clients en France et que vous ne visez pas un marché international, il n’est pas forcément judicieux de savoir quel est le temps de chargement de votre page à Pékin ou à Sydney !) ;
  • le navigateur (n’hésitez pas à consulter les données de Google Analytics pour savoir quels sont les navigateurs les plus utilisés pour consulter votre site web sur PC et mobile) ;
  • les paramètres avancés (vous y trouverez des valeurs et des fonctionnalités sélectionnées par défaut, mais vous pouvez personnaliser le test, par exemple en choisissant « First View and Repeat View » pour évaluer aussi les performances des pages affichées en cache).

Analyse des résultats du test : comment lire les données

Une fois le test lancé, vous obtenez les résultats au bout de quelques dizaines de secondes. La quantité de données présentées et la complexité apparente des graphiques peuvent certes faire un peu peur, mais vous allez voir que tout ceci va vous être d’une grande utilité pour l’optimisation de votre site web.

Le résumé des résultats de performance vous fournit déjà beaucoup d’informations utiles pour voir ce qui est optimisé et ce qui fait défaut. Si vous constatez que les scores avec les lettres en haut de page sont majoritairement rouges et oranges, c’est que vous avez du pain sur la planche !

Ensuite, dans le tableau, vous pourrez vous appuyer sur divers indicateurs, notamment :

  • le First Byte, correspondant au temps pour que le premier octet arrive au navigateur depuis le serveur ;
  • la colonne Start Render, affichant la durée nécessaire pour que les utilisateurs voient apparaître un premier élément sur la page et que celle-ci ne soit plus entièrement blanche ;
  • le Speed Index, soit le temps nécessaire pour que les éléments soient chargés au-dessus de la ligne de flottaison
  • les Core Web Vitals, soit les métriques que Google prend en compte pour évaluer la qualité de l’expérience utilisateur.

Pour obtenir la moyenne des données collectées au cours des différentes séries de tests, il vous suffit de cliquer sur « Plot Full Results ».

Sous ce tableau, vous avez accès à un graphique qui peut vos sembler cryptique au premier abord : le Waterfall. A première vue, vous ne pourrez pas en tirer grand-chose, mais l’analyse plus approfondie de ce diagramme vous aidera à optimiser vos pages. Et sa lecture n’est finalement pas si inaccessible. Toutes les ressources nécessaires au chargement de la page sont présentées sous forme de liste, et vous pouvez facilement voir celles qui prennent le plus de temps pour être chargées, et que vous allez donc devoir optimiser.

WebPageTest vous donne même la possibilité de regarder une vidéo montrant comment se charge la page que vous avez testée. Pourquoi c’est utile ? Car voir en conditions réelles à quelle vitesse se charge une page sur ordinateur ou un mobile est complémentaire par rapport aux chiffres exprimés en millisecondes ou sous forme de scores.

Comment avoir de bons résultats sur WebPageTest avec Magento-2

Améliorer les performances : savoir quelles actions mettre en œuvre grâce à WebPageTest

Maintenant que vous avez compris dans les grandes lignes comment fonctionne l’outil WebPageTest, il est temps de mobiliser vos ressources et de passer à la mise en place des corrections pour améliorer vos résultats !

La première étape consiste à cliquer sur les scores affichés en rouge en haut de page. Vous verrez alors apparaître une note sur 100, mais surtout, vous obtiendrez les recommandations de WebPageTest. Voici un exemple : si votre score Compress Image est D, en cliquant dessus, vous serez dirigé vers une liste d’images qui pourraient être compressées pour que votre site charge plus vite. Autre illustration : en cliquant sur le score Cache Statistic Content, vous verrez quels éléments de la page ne sont pas pris en compte dans la mise en cache, et ralentissent ainsi le chargement des pages pour les utilisateurs qui sont déjà venus sur la page. A vous alors de modifier les paramétrages du cache ou d’utiliser d’autres méthodes pour appeler les fichiers qui n’exploitent pas la mise en cache.

Pour encore améliorer vos résultats, il faudra vous atteler à l’analyse du Waterfall, qui présente les différentes requêtes et leur temps de chargement. Nous n’entrerons pas ici dans les détails de cette analyse, mais retenez les informations suivantes :

  • si vous constatez que le graphique est « en escalier » (les requêtes ne s’effectuent pas en même temps), c’est probablement que vous n’utilisez pas HTTP/2, qui permet un chargement simultané et donc plus rapide (multiplexage des requêtes) ;
  • si le TTFB, ou Time To First Byte, est supérieur à 200 ms sur la première ligne du tableau (vous pouvez le consulter en cliquant sur cette ligne), cela peut être le signe de faiblesses au niveau backend, et que vous devez peut-être optimiser votre hébergement, voire changer d’hébergeur, de configuration de serveur web ou de CDN ;
  • si le chargement produit trop de requêtes (beaucoup de lignes), demandez-vous si elles sont toutes utiles à la page et à une bonne expérience pour les clients (peut-être pourriez-vous supprimer des extensions, des scripts tiers, des images, des polices personnalisées, combiner des fichiers CSS, etc.).

Si vous appliquez l’ensemble de ces recommandations, vous devriez sensiblement améliorer les performances de votre site Magento (ou conçu avec le CMS WordPress ou une autre solution de création de sites web). En gagnant en vitesse de chargement, vous améliorerez l’expérience des utilisateurs, vos taux de conversion, et ce sera aussi bénéfique pour votre référencement SEO. Ainsi, vous maximisez les chances que de nouveaux clients achètent vos produits et deviennent fidèles à votre marque !

Nous vous recommandons ces autres pages :

Hello SMX Paris !