Lorsque que l’on s’intéresse à la question comment améliorer ses scores et métriques webperf sur un site Magento, difficile de passer à côté des deux principaux outils de mesure de la performance web mis à disposition par Google : PageSpeed Insights et Lighthouse. Ils sont utiles pour améliorer l’expérience des utilisateurs d’un e-commerce, quel que soit le CMS (Magento, WordPress, Shopify, Prestashop, etc.).

Les outils d’audit webperf et de test de la vitesse d’un site sont nombreux, et l’erreur commune est d’en utiliser plusieurs en même temps. En effet, les indicateurs et méthodes de calcul utilisés ne sont pas toujours identiques, si bien que les résultats et recommandations d’optimisation peuvent être différents.

Pour mesurer vos performances à l’aide des outils gratuits de Google, et suivre l’évolution de vos scores dans la durée, PageSpeed Insights et Lighthouse sont une piste à explorer. Vous pourrez facilement partager ces données en interne pour sensibiliser toues les équipes (technique, produit, marketing, e-commerce…) à la web performance.

Découvrons le fonctionnement de ces solutions gratuites, et comment optimiser les scores de son site Magento.

Comment avoir un bon score PageSpeed Insights et Lighthouse avec un site Magento-1

Le fonctionnement de PageSpeed Insights et Lighthouse pour un site Magento

Google, moteur de recherche le plus populaire, met à disposition des outils gratuits pour l’audit de la performance des sites web, quels qu’ils soient.

Lighthouse (qui sert de base pour établir le score PageSpeed Insights) permet d’évaluer différents indicateurs de performance. Il attribue un score de performance sur des critères de vitesse de chargement, d’accessibilité, de SEO, et plus largement de bonnes pratiques web.

PageSpeed Insights, outil également gratuit, permet d’évaluer la performance d’une page web sur mobile et ordinateur. Un score, de 0 à 100, est calculé selon plusieurs critères relatifs à la vitesse de chargement, dont les Core Web Vitals.

L’obtention d’un score de 100/100 ne doit pas être l’objectif premier, il n’est pas forcément atteignable pour votre site Magento. Pourquoi ? Parce que ce score ne traduit pas à lui seul la qualité de l’expérience utilisateur (un site avec un score de 100 peut malgré tout proposer une mauvaise expérience. Aussi, il faut garder en tête que Google lui-même n’utilise pas uniquement ce score pour son classement des sites sur son moteur de recherche.

L’audit de votre site avec PageSpeed Insights ou Lighthouse permet d’identifier les problèmes et points bloquants lors du chargement des pages de votre e-commerce. Les outils de Google listent des recommandations d’optimisation pour réduire le temps de chargement des pages des sites Magento, ce qui aidera à réduire le taux de rebond, à améliorer les taux de conversion et les ventes, et à soutenir la stratégie SEO… mais il faut savoir les appliquer intelligemment pour qu’elles soient efficaces. Un avis d’expert ou une solution d’automatisation de la webperf est alors indispensable.

Comment avoir un bon score PageSpeed Insights et Lighthouse avec un site Magento-2

L’optimisation des scores PageSpeed Insights et Lighthouse de votre site Magento

A présent, intéressons-nous à quelques-unes des recommandations émises par PageSpeed Insights et Lighthouse pour optimiser la performance de votre site.

Réduire le nombre de requêtes nécessaires pour charger une page

Un navigateur doit envoyer des requêtes à votre serveur pour afficher une page. Ces requêtes peuvent concerner des ressources tierces, comme des tags de tracking ou d’anlytics (Google Analytics), de la publicité, des fonctionnalités éditées par des tiers… Moins il y a de requêtes à générer, plus le chargement de votre page sera rapide. Aussi, le recours à la mise en cache et au pré-chargement des requêtes clés permet de gagner du temps et d’accélérer le chargement de la page.

Quel est le nombre de requêtes maximum pour une page web ?  Il n’y a pas de nombre prédéfini, car tout dépend du nombre des ressources nécessaires pour afficher votre page. Cependant, limiter leur nombre et les hiérarchiser permet d’optimiser l’expérience utilisateur, et de rendre l’affichage et les interactions plus rapides.

Eliminer les ressources bloquant le rendu des pages

Les ressources bloquantes sont essentiellement liées aux scripts, notamment JavaScript. Plus une page contient de scripts, plus sa vitesse de chargement peut être dégradée car le navigateur de l’utilisateur doit lire et exécuter ces scripts. Tant que le navigateur est occupé par ces tâches (autrement dit, à chaque fois qu’il rencontre un script dans le code de la page), il ne peut pas traiter le reste du code de la page, ce qui peut bloquer le rendu et les interactions.

Dans certains cas, il peut être utile d’intégrer le JavaScript et/ou le CSS au fichier HTML afin que le contenu s’affiche plus vite, ou bien de différer ces JavaScript pour que leur traitement n’empêche pas l’affichage du contenu de la page.

Limiter la taille des fichiers CSS par la minification du code

Les fichiers CSS (comme les fichiers JavaScript et HTML) peuvent être volumineux. Ils peuvent contenir des retours à la ligne, des espaces, etc., données qui facilitent la lecture pour des yeux d’humains, mais inutiles pour la compréhension du code par un moteur de recherche. La minification des ressources (CSS ou JS) permet donc de supprimer tous les caractères inutiles, et donc la taille du fichier qui contiendra moins de données, sans altérer la lecture du code par le navigateur.

L’utilisation d’une extension est nécessaire pour réaliser ce travail d’optimisation automatiquement, et les solutions d’optimisation webperf assurent nativement la minification du code.

Enfin, il est également important de supprimer les fichiers CSS et JavaScript non utilisés.

Réduire le TTFB d’un site Magento (le temps de réponse serveur)

Le TTFB, Time To First Byte, correspond au temps nécessaire qu’il faut au navigateur de utilisateur pour recevoir le premier octet de données par le serveur. Plusieurs facteurs peuvent augmenter les temps de réponse serveur.

Bien que le temps de réponse serveur ne fasse pas directement partie des indicateurs en lien avec la vitesse perçue par les utilisateurs, un bon TTFB est une source d’amélioration des performances du site, de l’expérience utilisateur et du référencement naturel SEO.

Nous vous recommandons ces autres pages :

Hello SMX Paris !