L’accélération d’un site Magento est la pierre angulaire d’une bonne expérience utilisateur, et donc d’un bon engagement et de bons taux de conversion. C’est aussi l’un des leviers pour améliorer le référencement SEO, et de fait, pour l’augmentation de la visibilité et des ventes du e-commerce. En effet, un site lent impatiente et frustre les visiteurs, leur laisse une mauvaise impression, et ils préfèrent alors le fuir au profit de la concurrence plus « réactive ». Selon une étude Google, 88% des utilisateurs ne reviennent pas sur un site qui a proposé une mauvaise expérience.

C’est pourquoi un commerçant en ligne a tout intérêt à s’intéresser à sa webperf et aux solutions à mettre en place. Pour vous aider à tout savoir sur l’accélération d’un site Magento, nous vous avons sélectionné les principaux outils disponibles sur internet, en version gratuite ou payante, conçus pour répondre aux enjeux de la vente en ligne.

Qu’il s’agisse d’un audit de la performance globale de votre site, de l’analyse précise de chaque page et des éléments de contenu, ou de l’évaluation de votre SEO par rapport à la concurrence, il existe des ressources utiles pour tous les besoins et tous les niveaux d’expertise. Afin d’optimiser votre expérience utilisateur, et donc vos conversions, mais aussi votre SEO, nous allons voir plusieurs outils sur internet qui permettent leur analyse, comme Google Search Console, Lighthouse, Chrome UX report, PageSpeed Insights, WebPageTest, etc. Faisons le point sur une sélection.

Comment améliorer mes scores et métriques webperf sur un site Magento-1

L’importance de la performance web d’un e-commerce

Le e-commerce est une catégorie de site internet particulier du fait de ses besoins en termes de ressources pour la gestion de son contenu spécifique : le grand volume de photos de produits, la quantité de données à gérer, les fonctionnalités et API pour la vente en ligne (ajout au panier, gestion des retours, moyens de paiement, moteur de recherche interne, etc.).

Un e-commerce est donc, par nature, un site dont le temps de chargement est potentiellement plus long qu’un blog avec simplement du texte et quelques photos en illustration. C’est pourquoi son optimisation est indispensable (compression des images et photos, minification des ressources, concaténation des sources JavaScript et CSS, etc.). Un site rapide permet de répondre aux exigences des internautes pressés, car la majorité des utilisateurs ne dépassent pas 3 secondes d’attente pour le chargement avant de fermer la page. Si les internautes quittent votre site sans rien acheter, cela entraîne une diminution du taux de conversion, du nombre de ventes, et aussi une perte de trafic qualifié qui ne reviendra probablement pas s’il est déçu de son expérience en ligne.

Vous vous demandez probablement quelles sont les techniques pour optimiser les performances d’un site Magento. C’est un bon début, mais avant de chercher les solutions à d’éventuels problèmes, nous vous proposons de découvrir les outils de mesure pour recueillir les données indispensables à l’optimisation des performances de votre site.

Les outils de mesure de la webperf d’un site sont nombreux. Attention toutefois, le problème de l’utilisation de plusieurs solutions, c’est que les résultats seront  variables vu que le contexte dans lequel les données sont recueillies ne sont pas les mêmes. Préférez vous concentrer sur un minimum d’outils pour suivre l’évolution de vos scores et de vos KPI dans la durée. Il peut aussi être difficile de savoir à quel point se fier aux recommandations d’optimisation proposées par ces mêmes outils, comment les prioriser, et quels résultats en attendre.

Evaluer ses performances web avec PageSpeed Insights et Lighthouse

Google, leader parmi les moteurs de recherche, propose différents outils qui permettent d’évaluer la vitesse des pages et la qualité de l’expérience utilisateur, notamment DevTools, Search Console, PageSpeed Insights et Lighthouse. Les éditeurs de sites e-commerce ont ainsi différentes sources de données pour mesurer la performance web, tant sur l’aspect vitesse de chargement que sur les aspects SEO. Google collecte des données synthétiques (en simulant des navigations) et des données réelles (grâce à son panel d’utilisateurs réels CrUX), soit deux sources de mesures pour un site performant.

Il faut savoir que depuis 2018, PageSpeed Insights intègre les scores Lighthouse dans ses remontée sur la performance des sites, comme :

  • le First Contentful Paint (FCP), cette mesure indique le temps nécessaire pour l’affichage intégral du premier élément de la page, qu’il s’agisse d’une image ou d’un texte ;
  • le Total Blocking Time (TBT), cette donnée permet de mesurer le temps total durant lequel la page ne répond pas aux interactions, car elle exécute des tâches longues ;
  • le Largest Contentful Paint (LCP), cette information est utile pour pour savoir le temps nécessaire à l’affichage du plus grand élément visuel d’une page ;
  • le Speed Index, cette mesure permet d’évaluer la rapidité avec laquelle le contenu au dessus de la ligne de flottaison de la page web est affiché.

Pour aider les équipes marketing ou les développeurs web à avoir un bon score PageSpeed Insights et Lighthouse avec un site Magento, et comprendre l’impact de chaque optimisation, PageSpeed Insights et Lighthouse indiquent par exemple le gain potentiel de temps de chargement en appliquant les recommandations proposées. Attention : ces indications sont souvent très optimistes par rapport à la réalité, et il ne faut surtout pas les appliquer sans l’avis d’un expert, car il faut pouvoir les articuler intelligemment les unes par rapport aux autres pour éviter les effets de bord.

Optimiser le temps de chargement de ses pages avec WebPageTest

Nous avons parlé de PageSpeed Insights dans la partie qui précède, mais, outre cet outil de mesure des performances proposé par Google, il existe un autre outil pour analyser en détails le temps de chargement et l’expérience utilisateur : WebPageTest. Du fait de la précision et de la variété des données recueillies, cet outil est particulièrement prisé des experts webperf.

Pour avoir de bons résultats sur WebPageTest avec Magento, il est impératif de répondre aux exigences de plusieurs critères en matière de vitesse, et donc d’expérience client. En plus des indicateurs webperf (Start Render, Speed Index, Core Web Vitals, etc.), WebPageTest fournit des données essentielles sur la performance d’un site, par exemple :

  • le poids total de la page (plus il est léger et plus le chargement par le navigateur sera rapide) ;
  • le nombre de requêtes entre le serveur et le navigateur, pour des ressources telles que les images, le JavaScript, les CSS…

WebPageTest offre des fonctions de visualisation du chargement de vos pages sous la forme d’un waterfall (représentation graphique du chargement des ressources qui composent les pages de votre site web), de vidéos, et de filmstrips. Vous pouvez ainsi observer le déroulement complet et en détails du chargement de tous les éléments sur vos pages web. Grâce au waterfall de WebPageTest, vous pouvez identifier rapidement les axes d’amélioration de la performance de votre e-commerce grâce aux indicateurs présents sur l’interface de base :

  • la liste des requêtes, répertoriant l’ensemble des requêtes identifiées par le navigateur et leur chronologie d’exécution ;
  • la timeline indiquant le temps nécessaire pour effectuer chaque requête (plus c’est rapide, mieux c’est) ;
  • l’utilisation CPU, afin de visualiser la consommation des ressources système (la courbe CPU doit rester la plus basse possible) ;
  • la bande passante, pour identifier les moments où elle est à saturation pendant le chargement de la page ;
  • les périodes pendant lesquelles la page est ou n’est pas interactive, autrement dit, si elle peut répondre ou non aux interactions des utilisateurs.

Comment améliorer mes scores et métriques webperf sur un site Magento-2

Réduire le temps de chargement d’une page et mesurer la vitesse avec GTmetrix

Qu’est-ce qui ralentit le chargement des pages ? Les images et les scripts peuvent compter parmi les causes du ralentissement d’un site. Les images, lorsqu’elles sont trop nombreuses et trop lourdes, comme ça peut être le cas pour un e-commerce à cause des photos qui illustrent le catalogue produits, et non optimisées (sans compression), sont des ressources très lourdes à charger, ralentissant ainsi le chargement d’une page.

Les scripts, quant à eux, peuvent également augmenter le temps de chargement de la page web mais aussi dégrader l’interactivité. Une fois téléchargés, le navigateur doit les exécuter, retardant ainsi le chargement des autres éléments de contenu de la page, parfois plus importants pour l’utilisateur que le script en lui-même. Cela peut être le cas avec du code JavaScript, dont le rôle peut être de rendre une page web ou une application web mobile dynamique et interactive, sans que ces fonctionnalités ne soient essentielles pour l’internaute.

Comment savoir quels scripts ralentissent le chargement de vos pages ? Comme WebPageTest, GTmetrix est un outil de mesure détaillé de la performance et de la vitesse d’affichage d’une page web. La plateforme analyse avec précision la vitesse de chargement de chaque élément d’une page afin de détecter les sources bloquantes. A l’issue de l’analyse, GTmetrix attribue une note de 0 à 100 à chaque critère de chargement analysé.

Comment avoir un bon score GTmetrix avec Magento ? Outre la détection des anomalies à corriger, GTmetrix préconise également les optimisations à mettre en place pour améliorer les métriques webperf du site. C’est un guide utile pour comprendre comment optimiser sa vitesse de chargement sur Magento.

Analyser la performance de son site et comparer avec la concurrence avec Dareboost

L’analyse des performances web de son site est indispensable, et c’est une première étape. Mais pour savoir dans quelle mesure optimiser ses performances, se comparer à la concurrence sur internet est essentiel. En effet, se situer par rapport à son marché est un point de repère important pour comprendre dans quelle mesure améliorer sa vitesse de chargement.

Connaître les scores des autres acteurs du marché permet de savoir si vous êtes déjà parmi les bons élèves, ou au contraire, en queue de peloton. Si vous définissez des scores ou des seuils de performances à atteindre, vous verrez ainsi si vos objectifs sont réalistes par rapport à des sites qui ont des contraintes techniques similaires aux vôtres.

Bonne nouvelle, il existe un outil qui, outre les différentes fonctionnalités proposées en matière d’analyse de la webperf de votre site, permet d’analyser les performances des sites concurrents, il s’agit de la solution Dareboost.

Comment avoir un bon score Dareboost avec Magento ? En un premier temps, pour tester vos performances, il suffit de rentrer les URL des sites concurrents à analyser ainsi que celle de votre site, et l’outil vous restitue les données sous la forme d’un comparatif des résultats et des technologies utilisées pour optimiser la webperf, sans oublier le détail des éléments à améliorer.

Optimiser les Core Web Vitals de son e-commerce

Si vous vous intéressez à la mesure de vos performances, vous avez peut-être entendu parler des Core Web Vitals, les « Signaux Web Essentiels » en français. Ce sont les indicateurs servant à mesurer l’interactivité du site, la vitesse d’affichage d’une page et sa stabilité visuelle. Ces métriques servent à l’optimisation de l’expérience utilisateur (UX) mais aussi du SEO :

  • le LCP, Largest Contentful Paint, évalue le temps nécessaire pour que l’élément principal de la page s’affiche dans le navigateur (la durée idéale doit être inférieure à 2,5 secondes) ;
  • le FID, First Input Delay, mesure le temps qu’il faut au navigateur pour répondre à la première interaction d’un utilisateur (Google recommande de ne pas dépasser les 100 millisecondes) ;
  • le CLS, Cumulative Layout Shift, évalue les changements de mise en page imprévus caractérisant le manque de stabilité de la page (un score inférieur à 0,1 est recommandé par Google).

Google considérant l’expérience utilisateur, et donc les Core Web Vitals dans son algorithme pour l’indexation des pages, se demander comment avoir de bons Core Web Vitals avec Magento est aussi une question essentielle !

Nous vous recommandons ces autres pages :

Hello SMX Paris !