A quoi correspond le score calculé par Pagespeed Insights de Google ou GTMetrix?

Les outils comme Google Pagespeed Insights ou GTMetrix calculent un pourcentage qui permet d'évaluer la performance des sites web. Cette note n'est pas directement liée au temps de chargement de la page web mais surtout à sa qualité de conception. Autrement dit le score Pagespeed vous indique si la page est construite de façon à s'afficher très rapidement ou pas.

Pourquoi le score sur mobile est différent du score pour desktop? Tout simplement parce que l'outils va prendre en compte la vitesse de connexion qui est plus lente sur un mobile. Certains éléments comme la taille des images, le nombre de requête, etc. vont avoir plus d'importance. On considère également que les mobiles sont moins performants qu'un ordinateur, donc la charge du CPU (exécution du javascript) aura une part plus importante dans le calcul du score.

Comment atteindre le score Pagespeed de 100/100?

Avec le CMS Prestashop je peux vous dire que c'est quasiment mission impossible sur un vrai site. Pourquoi? Tout simplement parce que vous aurez toujours des règles CSS et du code Javascript inutilisé par la page web affichée qui sont ajoutés par des modules ou même le thème mais pour d'autres pages. Typiquement les opportunités suivantes ne peuvent pas être corrigées:

  • Réduisez les ressources JS inutilisées
  • Réduisez les ressources CSS inutilisées

Cependant il y a plusieurs problèmes remontés par Pagespeed Insights que l'on va pouvoir corriger pour s'approcher au maximum du score de 100/100.

Voici la liste des problèmes les plus fréquents et comment les résoudre ou les optimiser

Optimisation liée aux performances du serveur

Optimisation liée aux images

  • Différez le chargement des images hors écran : Google vous recommande de mettre en place le chargement différé des images ou vidéos, c'est à dire de ne pas afficher immédiatement le contenu qui n'est pas visible à l'écran. Ceci est surtout pertinent sur mobile qui ont de petits écrans et le visiteur ne va pas forcément scroller jusqu'en bas, inutile donc de charger des photos ou des vidéos qu'il ne verra jamais. Les thèmes proposent souvent cette fonctionnalité de "Lazy Loading", sinon vous pouvez utiliser un module comme Speed Pack (Page Cache Ultimate + WEBP + Profiler SQL + Nettoyeur de BDD) .
  • Diffusez des images aux formats nouvelle génération : Google a créé le format d'image optimisé WEBP qui réduit la taille des fichiers tout en gardant une très bonne qualité d'image. Pour compresser vos images au format WEBP il vous faut un module comme le Compression WEBP , qui contrairement à d'autres modules, va compresser toutes les images de votre boutique, pas uniquement celles des produits et des catégories.
  • Encodez les images de manière efficace : indique que vos images pourrait être plus compressées. Si vous utilisez le format WEBP ce problème sera également résolu.
  • Les éléments d'image ne possèdent pas de width ni de height explicites : lorsque le navigateur commence à afficher la page web il n'a pas encore télécharger les images mais va réserver leur emplacement en ce servant des attributs width (largeur) et height (hauteur) contenu dans le HTML (les templates du thème ou des modules). Si ces attributs sont manquant alors le navigateur ne peut pas réserver l'espace nécessaire et à chaque fois qu'une image sera téléchargée le contenu de la page va bouger, c'est très désagréable pour le visiteur (provoque du CLS). Il faut donc modifier vos templates pour ajouter ces attributs.

Optimisation liée à la configuration du serveur

  • Activez la compression de texte : sous Apache il faut activer le mod_deflate qui va compresser tous les contenus textuels tels que les fichiers CSS, JS, HTML, etc. Vous pouvez par exemple ajouter le code ci-dessous dans le fichier .htaccess à la racine de votre boutique:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Diffusez des éléments statiques grâce à des règles de cache efficaces : sous Prestashop, dans la page Performances, il faut activer l'option "Optimisations Apache". Sachez que vous ne pourrez pas corriger ce problème pour les fichiers qui ne sont pas hébergés sur votre serveur (Google Analytics, Facebook, etc.). 

Optimisation liée au thème Prestashop

  • Assurez vous que le texte reste visible pendant le chargement des polices Web : vous utilisez une police de caractère sur votre boutique que le navigateur doit télécharger. Pendant ce temps il faut indiquer au navigateur d'utiliser une police de caractère système, comme Arial par exemple, sinon il ne peut rien afficher et c'est bloquant. Pour ce faire il faut ajouter l'option "font-display: swap;" sur la règle CSS qui défini la police de caractères (@font-face).
  • Réduisez les ressources JavaScript inutilisées : impossible à optimiser de part la conception de Prestashop
  • Réduisez les ressources CSS inutilisées : impossible à optimiser de part la conception de Prestashop
  • Éliminez les ressources qui bloquent le rendu : impossible à optimiser car cela doit être fait dès le départ dans le thème
  • Réduisez la taille des ressources CSS : se corrige normalement en activant l'option "Smart Cache CSS" de la page Performances et en activant le mod_deflate d'Apache
  • Réduisez la taille des ressources JavaScript : se corrige normalement en activant l'option "Smart Cache CSS" de la page Performances et en activant le mod_deflate d'Apache
  • Évitez une taille excessive de DOM : indique qu'il y a trop d'informations sur votre page, plus précisément le HTML est trop volumineux. Cela est souvent lié à un trop grand nombre de produit sur la page; vous pouvez réduire ce nombre ou activer une option de scroll infini qui permet de télécharger la suite des produits quand le visiteur scroll jusqu'en bas de la liste.
  • La page n'utilise pas d'écouteurs d'événements passifs pour améliorer les performances de défilement : c'est un problème Javascript apporté par le thème ou un module. Il va être compliqué pour vous de l'identifier.
  • Évitez de créer des chaînes de requêtes critiques : cela signifie que des fichiers font référence à d'autres fichiers, le navigateur ne peut donc démarrer leur téléchargement qu'après avoir téléchargé et lu ces fichiers parents. Pour réduire cette perte de temps il faut référencer ces fichiers directement dans le HTML en utilisant l'attribut "preload".

Le score a-t-il un impact sur le référencement SEO?

Google ne dit pas qu'il utilise cette note pour classer les résultats de recherche, je pense cependant qu'il y a un effet indirect.

En effet, Google mesure ce qu'on appelle le "Dwell Time", qui correspond au temps qui s'est écoulé entre 2 clics dans une liste de résultats. Il sait ainsi si le visiteur y est resté longtemps ou pas du tout. Par exemple, si ce Dwell Time est inférieur à 3 secondes on peut penser qu'il n'est pas intéressant et risque fort de se faire rétrograder.

Pour conclure

Il est évidemment très compliqué de mettre en oeuvre toutes ces optimisations! L'idéal est de les prendre en compte lors du développement du thème et des modules, c'est pour cette raison que j'ai créé le thème Prestashop JPresta Origin et les modules qui l'accompagnent. 

Une très bonne vitesse de chargement des pages de votre boutique ne vous fera pas vendre plus, mais un site internet lent vous fera à cout sûr perdre des clients!