Comment augmenter sa note Google PageSpeed Insights sur PrestaShop ?

Rappelons que PageSpeed Insights de Google est un outil permettant d'analyser les performances d'un site en matière de vitesse de chargement de page en vous indiquant les éléments à modifier pour améliorer cet aspect de votre site. Un temps de chargement trop long implique une frustration chez le client qui estime son expérience utilisateur desktop et mobile trop peu satisfaisante, ce qui l'amène à quitter le site prématurément. Vous concernant, votre taux de conversion, statistiques et ranking SEO s'en trouvent gravement affectés

 

Les pricipales recommandations PageSpeed

D'après les recommandations de Google, un site e-commerce doit pouvoir s'afficher en 1.5 secondes. Afin de mesurer la vitesse de chargement, il convient d'auditer votre site.

Vous pouvez toujours vous référer au score attribué par PageSpeed Insights. Une fois l'analyse effectuée, il vous attribue deux scores sur 100, un relatif à l'interface mobile et l'autre pour la version desktop.

Pour une vitesse de chargement optimale de votre page web, PageSpeed Insights préconise les points suivants :

• Optimiser et minifier les ressources des fichiers. La minification consiste à supprimer tout ce qui n'est pas indispensable à la compréhension du code par les machines. Conservez les ressources que vous considérez essentielles pour la compréhension de votre contenu. Dans le cas contraire, supprimez-les
• Compresser certaines ressources (html, js, css). Par exemple, le Gzip est une la compression qui doit s'effectuer uniquement sur des fichiers contenant du code et hébergés sur un serveur web. Son activation servira à réduire leur taille et le temps d'affichage dans le navigateur. Ensuite, il s'agira de les mettre en cache du navigateur
• Créer en place des fichiers critical.css qui servent uniquement à afficher le plus rapidement possible ce qui est visible sur la page (avant le reste de la page et la ligne de flottaison)
• Réduire le nombre de requêtes par page des codes JS et CSS
• Eviter l'avertissement "l'affichage en priorité du contenu visible"
• Réduire le temps du réponse du serveur
• Vérifier les problèmes des API externes, des trackers et des widgets
• Eviter les redirections pour arriver sur la page de destination
• etc.

 

Les recommandations PageSpeed plus en détail

Optimisation des scripts JavaScript & CSS

Les langages de programmation JavaScript et CSS vont compromettre une vitesse de chargement de site satisfaisante. Sans parler du fait de les éliminer, il faut plutôt penser à optimiser ces modèles en suivant toute une série de recommandations non-exhaustives à lire avec précaution car relatives selon le type de sites concernés. Le JS se bloque souvent sur le CSS pour la construction initiale de la page. La durée du CSS essentiel (Critical CSS) ne doit pas être trop longue.

 

JavaScript

Placer les balises <ScripT> en fin de code, avant le </body> et les charger en asynchrone

Dans la mesure du possible, il vaudra mieux charger les scripts asynchrones après le premier affichage. Placer les balises <scripts> en fin de code avant le </body> et les charger en asynchrone signifie que le navigateur ne bloquera pas le chargement d'autres ressources avantageuses de votre site, notamment la page HTML. Il permettra de lancer une tâche et d'avancer dans le programme, le temps que celle-ci s'exécute.

 

Reporter les scripts inutiles

Les scripts qui ne seront pas nécessaires au développement du contenu visible lors du premier affichage sont à mettre en suspens et à reporter durant l'analyse JavaScript afin de ne pas alourdir la charge de travail du navigateur pour afficher la page.

 

Minifier JavaScript

Ce compactage du langage de programmation JS peut sauvegarder de nombreux octets de données et réduire le temps d'exécution.

 

Combiner Des ressources JavaScript 

La concaténation est le fait de combiner les ressources externes JS dans un seul fichier, ce qui réduit le délai de résolution des requêtes.

 

Compresser le JavaScript  dans le HTML

Cette compression va servir à charger simultanément la majorité de vos effets et scripts. En revanche, le JavaScript Inline peut générer de mauvais fonctionnements sur des thèmes spécifiques.

 

CSS

Placer le code CSS dans l'en-tête du document

<link rel="stylesheet" type="text/css" href="http://votresite.com/style.css" media="screen" />

Spécifiées le plus tôt possible dans le document HTML, les ressources CSS permettent au navigateur un accès immédiat aux balises <link> ainsi que l'envoi de la requête pour le code CSS.

 

Intégrer le CSS  de façon "inline" dans l'en-tête du document

<head>

  <style>

    .blue{color:blue;}

  </style>

</head>

Placé de manière "Inline" en haut de la ligne de flottaison, le CSS critique permet de charger le contenu prioritaire avant de charger les scripts.

 

Proscrire les importations de code CSS

@import url("/css/header.css")

L'importation des règles de feuille de style depuis un autre fichier de feuille de style implique des allers-retours additionnels dans le chemin critique, ce qui fait retarder l'affichage. Il convient de préférer un seul link href pour éviter une quantité astronomique de requêtes. La manière la plus populaire et qui s'avère la plus efficace consiste à placer un link rel stylesheet dans le header de la page html.

 

Reporter les fonctionnalités inutiles

Une longue exécution va rendre impossible la construction des modèles de document et d'objets CSS et par conséquent l'affichage de la page. Comme pour les scripts, différez toutes les fonctionnalités non nécessaires au premier affichage. Dans le cas où elles doivent être exécutées impérativement dans les délais classiques, il faudra les diviser en parties distinctes pour que le navigateur puisse traiter les autres événements entre 2 étapes. Il s'agit d'un événement lorsque l'utilisateur clique sur un bouton HTML ou que le navigateur va finir de charger une page web.

 

Installer le minimum de modules possible

Attention, les modules PrestaShop permettant de contrer un chargement de pages trop long peuvent en contrepartie alourdir votre site internet. Il vaut donc mieux installer le minimum de modules et faire le tri dans vos plugins et ainsi supprimer les extensions inutiles dont vous ne vous servez jamais.

 

Minifier le CSS

Le fichier CSS verra sa taille réduite tout en conservant la même fonctionnalité et en économisant des octets de données importants.

 

Eviter L'attribut "style"  

<div style="margin: 0;">

Veillez à ne pas ajouter d'attributs CSS "Inline" car ils dupliquent le code inutilement et alourdissent la page, pouvant donner lieu à l'avertissement "Afficher en priorité le contenu visible" dans PageSpeed Insights.

 

Réduire le code HTML 

Réduire le code HTML consiste à supprimer tous les espaces présents dans ce code. Sachant qu'un espace représente un caractère, et donc un poids supplémentaire, il sera chargé inutilement sur le navigateur du visiteur.

 

Eviter les requetes incorrectes

Il faut éviter l'intervention d'éléments inutiles qui n'existent pas ou plus, tels qu'un code d'erreur 404 ou 410 en procédant par une suppression ou une modification.

Procéder ainsi est une étape essentielle pour améliorer la vitesse et l'ergonomie :

• Concernant la vitesse, pour savoir qu'un élément n'existe plus, le navigateur doit l'interroger ainsi que le serveur. Plus le serveur est sollicité pour des requêtes, moins il répond rapidement.
• Pour l'ergonomie, atterrir sur des pages fantômes implique une expérience utilisateur insatisfaisante et indique une qualité de site qui laisse à désirer.

 

Oublier les redirections

Le but du jeu va consister à désactiver des langues que vous n'utilisez pas en évitant le type d'URL suivant : www.mon-site.com/fr. Ajouter des path supplémentaires sera également néfaste pour votre SEO.

 

Optimiser les images

Les images et notamment celles de vos thèmes sont des ressources qu'il convient d'optimiser au maximum en passant par 3 étapes : le redimensionnement, la compression et l'enregistrement dans un format adapté.

 

Redimensionnement 

Avant tout chargement de vos images sur le site, il convient de les redimensionner afin d'alléger leur poids.

 

Compression

En compressant vos images, vous ajustez leur poids à leur taille. Le module TinyPNG, entre autre, permet de les compresser depuis votre CSS.

De plus, l'outil gratuit APACHE se charge d'optimiser grossièrement les fichiers de votre site (compression de fichiers images, JS et CSS, redimensionnement des images et compression de votre code HTML etc.).

 

Un format adapté

3 formats sont recommandés pour enregistrer vos images et les rendre compatibles avec le web, une fois la compression effectuée : le JPEG (format populaire dont la compression de l'image est importante mais elle altère la qualité) devra comporter moins de 500 ko; le PNG (très grande compression de l'image) et le GIF (forte compression au même titre que le JPEG mais cependant limité à 256 couleurs).

 

Nettoyer ponctuellement les logs

Les logs peuvent ralentir votre base de données si la mise en mémoire de vos actions est trop importante, il faudra donc vider la mémoire. En revanche, cette action est irréversible alors assurez-vous qu'il s'agit du nettoyage des bons logs.

 

Réfléchir à Un hébergement adéquat

Votre hébergement ne doit pas être choisi au hasard et doit être qualitatif car il représente une ressource importante pour obtenir un site rapide à charger. Le temps de réponse optimal d'un serveur doit être inférieur à 200 ms. Celui-ci est affecté par la quantité du trafic reçu.

 

Vérifier la taille de la base de données

Lorsque vous vous rendez sur PHPMYADMIN, vérifiez qu'il n'existe pas de tables mesurant plus de 100MO, dans la colonne "size", indépendamment de la taille de la boutique. Si c'est le cas, il faudra les nettoyer. Un poids trop volumineux de cette base de données affecte lourdement les performances de votre serveur.

 

La vitesse sur mobile, un facteur à ne surtout pas négliger

L'index mobile-first a pris une place prépondérante dans l'ère du digital. Tout comme le temps de chargement desktop, celui du mobile doit impérativement être au maximum optimisé car nous nous dirigeons vers un web mobile de plus en plus exigeant. Le trafic mobile peut représenter jusqu’à plus de la moitié du trafic total de votre site.

A cela s'ajoute la technologie AMP (Accelerated Mobile Pages) qui soutient le fait que Google veuille un mobile-friendly comme critère essentiel dans le ranking de son moteur de recherche.

Google rappelle que 53% des utilisateurs quittent un site mobile qui met plus de 3 secondes à se charger en 4G, contre 5 secondes en 3G et un TTFB (Time To First Byte) de 1.3 secondes, correspondant au temps de chargement du premier octet, soit la vitesse d'accès au serveur. Sachez qu'une seconde perdue équivaudrait à 20% de pertes de conversions.

Pour avoir un rapport approfondi sur votre site mobile, il est conseillé d'utiliser Test My Site. Pour cela, rentrez l'URL de votre site, demandez à effectuer une analyse et un rapport et recevez-le par mail. Il comprendra le temps de chargement de votre URL, l'état des lieux de votre situation sur ce qui fonctionne et les recommandations sur ce qui devrait être amélioré et modifié (CSS redondantes, fichiers d'images trop lourds, compression insuffisante etc.).

En conclusion, la vitesse de chargement de votre boutique Prestashop, que ce soit en desktop ou en mobile est un critère déterminant pour améliorer vos ventes et votre positionnement sur Google.