Comment suivre les performances web de son e-commerce Magento ? De la même façon qu’améliorer la structure technique SEO de son site marchand contribue à l’augmentation de sa visibilité et de son trafic, l’optimisation de la vitesse de chargement est un levier essentiel pour augmenter les conversions. Des outils d’audit des temps de chargement des pages aident à mesurer et améliorer les scores et les métriques webperf d’un site utilisant le CMS Magento. Parmi les services en ligne répondant à ce besoin, Dareboost possède la particularité de fournir des rapports détaillés au sujet des performances d’une page web.

L’application web propose des rapports HAR à télécharger comprenant de nombreuses informations telles que le temps de réponse serveur (Time To First Byte) ou encore le Speed Index, ainsi qu’un ensemble de conseils complémentaires à appliquer pour améliorer le score Dareboost. L’objectif ? Optimiser l’expérience utilisateur, le référencement SEO, diminuer les taux de rebond de vos pages web et augmenter la rétention du trafic visitant votre e-commerce.

Comment avoir un bon score Dareboost avec Magento-1

Le score Dareboost pour connaître la qualité des pages web d’un site Magento

Dans le cadre d’une stratégie marketing et de vente digitale, s’assurer de la qualité des performances de sa boutique en ligne est crucial. Google a donné le ton : des critères tels que le responsive design, référencement naturel (SEO technique et sémantique), les Core Web Vitals pèseront lourdement dans la visibilité qui est donnée aux sites web et e-commerces au niveau de la SERP.

Dareboost est un service qui permet d’auditer des pages web à partir d’une URL, d’assurer le monitoring synthétique de sites web et le suivi de benchmarks. Il existe en version payante et gratuite. L’analyse des performances d’une page web commence en renseignant l’URL de la page qu’on souhaite analyser. Avant de débuter l’audit, il faut au préalable choisir un contexte :

  • la géolocalisation ;
  • le type de navigateur (Chrome, Firefox, etc.) ;
  • le type d’appareil (desktop ou mobile).

Ce contexte permet de simuler les conditions de navigation dans lesquelles les visiteurs accèdent à votre site web Magento. Si vous connaissez les habitudes de vos clients ou de votre marché cible, il est pertinent de choisir ses critères en fonction de la réalité de vos utilisateurs, pour vous rapprocher de l’expérience utilisateur (UX) sur votre e-commerce. Une fois l’analyse lancée, il est possible de modifier le contexte pour pouvoir comparer les performances en fonction des différentes situations.

Une fois le test lancé, Dareboost génère une synthèse des résultats. Le score qui apparaît en premier est le score de qualité Dareboost. Il s’agit d’une métrique qui permet notamment de se positionner par rapport aux concurrents. Cet indicateur informe sur la validation des points de contrôle définis par Dareboost, à propos de la page dont l’URL a été saisie au départ. Pour se comparer aux concurrents, il suffit d’entrer les adresses de leurs pages.

Analyse du waterfall via Dareboost

En plus du score Dareboost, d’autres métriques sont générées lors de la création du rapport d’analyse des performances de votre page web. Le service acheté par la start-up ContentSquare offre une fonctionnalité d’analytics, soit la possibilité de visualiser les étapes du chargement de la page testée sous la forme d’un waterfall.

Dareboost propose également les analyses suivantes :

  1. le nombre de requêtes entre serveur et navigateur lors du chargement de la page,
  2. le détail de la progression du chargement, du poids et du temps requis pour chaque type de fichier : HTML, JavaScripts, Images, CSS, etc.;
  3. l’accès à la timeline du chargement des éléments, ou waterfall. Cette représentation graphique du chargement des éléments sur une page inclut le temps qu’a pris la résolution DNS pour être effectuée. Il observe également le temps de réponse du serveur (TTFB, Time To First Byte). Google conseille un TTFB de 200 ms. Des détails au sujet du chargement tels que les header des requêtes HTTP (GET, POST, etc.) y figurent également ;
  4. l’encart Performance Timings détaille les étapes du chargement du DOM, du DOM interactif et d’autres événements liés au JavaScript;
  5. la validation CSS W3C et les erreurs présentes dans les feuilles de style (CSS) ;
  6. les avertissements remontés par la console du navigateur.

Cette représentation des événements ayant lieu durant le chargement de votre page web vous permet déjà de comprendre s’il existe des éléments bloquants ou ralentissant la vitesse d’affichage de vos pages. Par exemple, si le temps pris par la résolution et la recherche DNS est élevé, cela peut signifier qu’il existe des problèmes avec les serveurs hébergeant votre site web ou des soucis de réseau (débit descendant faible ou autre).

Comment avoir un bon score Dareboost avec Magento-2

Evaluation du Speed Index et de la performance avec Dareboost

Outre le Largest Contentful Paint, le Total Blocking Time et le Cumulative Layout Shift, le poids de la page testée et le Time To First Byte, Dareboost affiche le Speed Index.

Le Speed Index se calcule en observant le chargement des éléments d’une page au-dessus de la ligne de flottaison. Ces étapes peuvent être visualisées et tracées au moyen d’un enregistrement vidéo du chargement de la page web. Cette vidéo est ensuite représentée sous forme de séquence d’images : le filmstrip. Chaque frame de cette séquence permet de calculer un ratio de progression en la comparant au rendu final de la page web analysée. En opérant ainsi, pour chaque image du filmstrip, il est alors possible de représenter la progression de l’affichage en fonction du temps au sein d’un graphique. Le Speed Index est déterminé en calculant la surface située au-dessus de la courbe tracée.

Concernant les visiteurs de votre site web, le Speed Index est un des indicateurs directement liés à la perception de vitesse par vos utilisateurs, et donc à leur expérience en ligne. Plus un Speed Index est élevé, plus l’utilisateur voit les objets constituant la page apparaître lentement. Aussi, deux pages peuvent posséder un Start Render (affichage du 1er octet sur la page) et un Visually Complete (chargement complet de la page) similaires voire identiques, mais des Speed Index différents selon la vitesse à laquelle leurs composants graphiques apparaissent dans le viewport, aux yeux du visiteur de la page. Une page optimisée et dont le Speed Index est bas indique que la page s’affiche rapidement pour l’utilisateur, mais ça ne signifie pas que la totalité de la page est chargée. Néanmoins, son expérience en est alors plus satisfaisante : il ressentira moins d’impatience.

Google recommande une valeur de Speed Index inférieure à 1000.

Les conseils de Dareboost pour l’amélioration de votre site Magento

La partie diagnostic et conseils liste des recommandations générées par Dareboost en vue de l’amélioration de votre site web. Afin de délivrer ses pistes d’améliorations, Dareboost analyse également l’écosystème de votre commerce en ligne (Google Analytics et tout autre service web tiers qui participe à son fonctionnement). Les conseils sont divisés en différentes catégories et suivis d’explications, notamment sur les points suivants :

  • optimisation des requêtes ;
  • référencement (SEO) et qualité du contenu (occurrences des mots-clés par exemple) ;
  • volume de données ;
  • accessibilité ;
  • optimisation du rendu ;
  • politique de cache ;
  • sécurité (HTTPS, certificat SSL)…

Voici quelques exemples de conseils que Dareboost livre à ses utilisateurs :

  • dans la catégorie traitant du volume de données : « 5 images sont redimensionnées via un attribut width/height. Une image récupérant une image plus grande que celle réellement affichée charge inutilement un volume de données trop important » ;
  • dans la section s’intéressant à l’optimisation du rendu : « Différez l’utilisation du code JavaScript. Lorsque le navigateur web rencontre du code JavaScript en interprétant le code source d’une page web, cela peut ralentir considérablement l’affichage de la page, surtout s’il est nécessaire de télécharger un script externe ».

Une fois que vous avez pris connaissance de ces pistes d’amélioration proposées par Dareboost, vous pouvez faire appel à un développeur ou une agence spécialisée dans la gestion des sites sous Magento pour les implémenter.

En conclusion, Dareboost permet une analyse de qualité personnalisée de votre site web dans le cadre d’un audit SEO technique par exemple. Cependant, se faire accompagner par un expert, un développeur ou une agence spécialisée dans le CMS Magento rend l’application des conseils plus facile. Le but étant d’améliorer son score Dareboost et rendre son commerce en ligne plus conforme aux attentes des utilisateurs. Les performances web d’un site e-commerce ont un impact direct sur le référencement SEO, la notoriété de votre marque et à terme votre chiffre d’affaires et vos ventes.

Nous vous recommandons ces autres pages :

Hello SMX Paris !