Besoin d’une optimisation Prestashop ? L’objectif premier d’un site de e-commerce Prestashop est de convertir un maximum de visites en ventes. Les statistiques prouvent que plus le temps de chargement du site est long, plus les chances que le visiteur finisse par valider une commande diminuent. D’après Google, un temps de chargement trop important peut facilement entraîner une baisse de 20% du trafic sur votre site. Si vous ne souhaitez pas voir son taux de conversion chuter, il est urgent d’optimiser la vitesse de chargement de votre site Prestashop.
Pourquoi optimiser la vitesse de chargement de votre site Prestashop ?
Le but d’une boutique en ligne est de vendre. Si votre site met trop de temps à se charger, l’internaute ira voir ailleurs. Trois secondes semblent être la limite admise au-delà de laquelle vous perdez déjà la moitié de vos clients potentiels. Après ces quelques secondes d’attente, les utilisateurs quittent purement et simplement la boutique.
Optimiser la vitesse de chargement de votre site Prestashop est donc primordial. Si la vitesse ne fait pas tout, avec un site lent, ou tout au moins plus lent que ceux de vos concurrents, vous avez l’assurance de perdre des clients.
Quels facteurs influent sur la vitesse de chargement de Prestashop ?
Pour comprendre quels sont les facteurs ayant le plus d’influence sur le temps de chargement de votre site Prestashop, il faut bien comprendre comment se passe l’affichage d’une page web.
1ère phase : l’appel au serveur
Lorsque l’internaute clique sur un lien, la photo d’un produit ou un bouton sur le site, une requête est envoyée au serveur afin que soit chargée la page demandée. La durée qui va s’écouler entre le clic de l’internaute et la réception de la demande par le serveur dépend de plusieurs critères, dont la qualité du réseau et la distance géographique ou la présence d’un cache.
2ème phase : l’exécution sur le serveur
Durant cette phase, le serveur va analyser la requête reçue, la traiter et renvoyer la réponse. S’il s’agit d’une simple page HTML, le temps de traitement va être extrêmement court. Aucun calcul n’est nécessaire, il suffit de renvoyer le fichier HTML. En revanche, s’il s’agit d’une page plus complexe, comme le détail d’un produit ou le contenu du panier par exemple, ça sera plus long. Le serveur devra faire appel à la base de données, effectuer les calculs nécessaires, générer la page et la renvoyer.
3ème phase : la réponse du serveur
La réponse à la requête envoyée par l’internaute doit maintenant faire le chemin en sens inverse, sans forcément prendre la même route d’ailleurs. Là encore, la vitesse à laquelle va voyager cette réponse va dépendre du débit des réseaux empruntés.
4ème phase : le chargement du DOM
Une fois la réponse reçue par le navigateur, il va devoir charger non seulement le fichier HTML mais aussi tous les fichiers liés, comme les images, les fichiers JavaScript ou CSS. Une fois tous les fichiers rassemblés, le navigateur doit encore interpréter et exécuter le JavaScript et générer le rendu final de la page pour l’afficher.
Les goulots d’étranglement
Si l’appel au serveur et la récupération de la réponse peuvent durer quelques secondes, il va être difficile de gagner du temps sur ces phases. Nous n’avons en effet pas la main sur l’infrastructure réseau, et en fonction du chemin suivi, la durée de transfert des données peut varier. La qualité du réseau, le débit et le trafic à un instant « t » est difficilement maîtrisable.
En revanche, un cache bien configuré devrait permettre de ne charger que le strict nécessaire en conservant les fichiers déjà utilisés par le navigateur. A la première visite de l’internaute, le navigateur peut mettre en cache un certain nombre de fichiers CSS et JavaScript par exemple. Pour l’affichage de la page suivante, les copies locales des fichiers seront utilisées, ce qui évitera des échanges inutiles entre le navigateur et le serveur.
Côté serveur, certaines pages peuvent également provenir d’un cache. Par exemple, une page produit qui change peu ou des conditions générales de vente pourront ne pas être recalculées à chaque demande. Utiliser un fichier dans le cache plutôt que d’opérer une construction complète peut grandement diminuer le temps d’exécution sur le serveur.
Enfin, la phase de chargement du DOM est souvent la plus longue, en fonction de la complexité de la page, de la quantité d’éléments à afficher et du code JavaScript à interpréter et à exécuter.
Optimisation Prestashop : Comment optimiser la vitesse de votre site Prestashop en 3 étapes?
Vous l’aurez compris, les performances de votre site Prestashop dépend de plusieurs paramètres. Vous n’avez que peu de marge de manœuvre sur l’infrastructure réseau empruntée par les données. Il est en revanche possible d’optimiser le serveur et le site Prestashop en lui-même.
1- Mesurer les performances du site
Avant d’espérer optimiser quoi que ce soit, il est important de réaliser un audit de performances du site. Il existe plusieurs outils gratuit permettant de réaliser cette opération. GTmetrix, Pingdom et PageSpeed Insights sont sans doute les trois outils gratuits les plus utilisés.
Le principe est simple. A partir de la page d’accueil de l’outil choisi, vous saisissez l’adresse de votre site Prestashop et vous lancez une analyse. Vous obtenez ainsi un rapport indiquant un niveau de performance globale. Chaque élément pouvant être optimisé est ensuite indiqué, avec des recommandations. Généralement, ces éléments sont classés en fonction de la priorité à donner aux améliorations. Une action simple à mettre en place apportant d’importants bénéfices sera nécessairement prioritaire.
Si chacun de ces outils est puissant, n’hésitez pas à en utiliser plusieurs. Tous n’ont pas tout à fait la même approche dans leur analyse du site et les résultats, s’ils se recoupent, sont complémentaires.
2- Optimisation du serveur
Le choix du serveur
Le choix du serveur est la base de votre hébergement Prestashop. Si vous envisagez un site à fort trafic, ce qui est plutôt souhaitable pour un site de e-commerce, inutile d’envisager un serveur mutualisé dans une offre d’entrée de gamme. Le serveur serait rapidement saturé et les temps de réponse décourageant.
Tout dépend ensuite de vos connaissances techniques. Si vous êtes à l’aise avec la technique et que vous êtes capable de gérer votre serveur vous-même, un serveur dédié (VPS pour Virtual Private Server) sera idéal. Vous serez seul sur la machine et toute sa puissance sera à votre disposition. Il faut cependant posséder des compétences suffisantes pour le configurer et le gérer correctement. Si vous avez le budget nécessaire et que vous ne souhaitez pas assurer la gestion, vous pouvez faire appel à un prestataire qui s’en chargera pour vous.
Si vous n’avez pas les connaissances nécessaires et que vous ne souhaitez pas faire appel à un prestataire, vous pouvez opter pour un serveur mutualisé, mais mieux vaut alors choisir une solution haut de gamme. Le serveur est partagé avec d’autres clients mais aura tout de même une puissance nécessaire au bon fonctionnement de Prestashop. C’est souvent un bon compromis entre les besoins techniques et le budget alloué à la boutique en ligne.
A lire aussi : Comment migrer Prestashop vers un autre serveur ?
La version de PHP
Utiliser la dernière version stable de PHP est toujours une bonne idée. Vous bénéficiez ainsi des derniers correctifs tant en termes de fonctionnalités qu’en termes de sécurité. Mais vous bénéficiez surtout de meilleures performances. Si l’on prend par exemple un site fonctionnant sur une version 5.6 de PHP (qui n’est plus maintenue mais qui est encore assez répandue pour des questions de compatibilité avec d’anciennes applications), le passage à une version 7.x de PHP peut amener un gain de performances pouvant aller jusqu’à 25%.
Il est intéressant d’utiliser la dernière version de PHP. Attention cependant à la version de Prestashop utilisée. Sur les anciennes versions, il est possible que certaines incompatibilités apparaissent dues à des modifications dans le langage PHP. Testez donc votre site en amont afin de vous assurer que tout fonctionne correctement, et si possible, utilisez également la dernière version de Prestashop.
Utilisation de Memcached et OPCache
Memcached va permettre de mettre en cache les résultats des requêtes faites par PHP à la base de données. Ainsi, si une requête a déjà été effectuée au moins une fois et mise en cache (la liste des produits figurant sur la page d’accueil par exemple), elle ne sera
pas de nouveau exécutée. Le résultat sera extrait du cache et il n’y aura pas de nouvel appel à la base de données, ce qui permettra de gagner de précieuses secondes.
Les requêtes et les traitements réalisés par PHP peuvent parfois être long. OPCache est un cache dédié à PHP qui permet de mémoriser une partie des résultats des traitements. Si une partie du code PHP est exécuté souvent pour construire un même résultat, ce résultat est mis en cache. Lorsque ce code PHP doit de nouveau être exécuté, le serveur va récupérer directement le résultat dans le cache, ce qui est beaucoup plus rapide.
Memcached et OPCache doivent être installés et activés sur le serveur web. Ces outils peuvent amener un gain de temps non négligeable sur l’exécution du code PHP.
Compression des données
Vous aurez compris que plus vous transférez de données entre le serveur et le navigateur de l’internaute, et plus la qualité du réseau sur lequel les informations transitent aura d’influence.
La solution la plus simple pour diminuer le volume de données échangées est de les compresser. Les données occuperont un volume moins important et seront échangées plus rapidement.
Il suffit d’activer l’option « compression gzip » sur le serveur. Ainsi, toutes les données envoyées par le serveur seront compressées, puis décompressées par le navigateur à leur réception.
Serveur de cache, CDN et serveurs de médias
Un serveur de cache n’est valable que si votre site est présent à l’international et que vous disposez d’un budget conséquent.
Le principe consiste à dupliquer les pages de votre site Prestashop sur différents serveurs répartis dans le monde. De cette façon, où que soit situé géographiquement l’internaute, c’est le serveur le plus proche de lui qui délivrera les pages de votre site. Vous gagnez ainsi en temps de transfert des données.
L’utilisation d’un CDN, ou Content Delivery Network, permet de contourner une limitation commune à la plupart des navigateurs. Généralement, un navigateur peut gérer jusqu’à 8 connexions simultanées à un serveur. C’est-à-dire que si l’affichage de la page demandée nécessite le chargement de plus de 8 fichiers par exemple, il y aura une attente pour les suivants jusqu’à ce qu’une connexion se libère. Entre les fichiers JavaScript, les fichiers CSS et les médias, il est courant d’avoir plus de 8 éléments à charger.
Si vous disposez d’un serveur avec un nom de domaine différent de celui du site Prestashop, ou plus simple, de sous-domaines pointant vers le domaine principal grâce à des alias, vous pouvez mettre en place un CDN. Prestashop permet de configurer jusqu’à trois serveurs de médias sur lesquels il ira chercher les fichiers dont il a besoin. Le nombre de requêtes simultanées possible est donc ici multiplié par trois. Vous pouvez charger jusqu’à 24 fichiers en même temps au lieu de 8. La vitesse de chargement de votre site Prestashop est considérablement améliorée.
La base de données
La base de données peut représenter un véritable goulot d’étranglement en termes de performances. Toutes les informations cruciales du site y sont stockées et il faut les extraire pour construire les pages. Il est donc important de s’assurer que la base de données est toujours optimisée.
Typiquement, pour un site Prestashop de taille moyenne, les tables contenant le plus de données ne devraient pas dépasser 100 Mo. Un gros site de e-commerce peut voir ses tables aller jusqu’à 200 Mo, mais rarement au-delà. Si vous constatez que votre base de données grossit de façon anormale, c’est qu’il est temps de lancer une optimisation avec le module intégré à Prestashop. C’est suffisant la plupart du temps. Si ce n’était pas le cas, n’hésitez pas à faire appel à un spécialiste.
Pour réduire la taille de la base de données, il peut être intéressant de désactiver les modules statistiques Prestashop. Ils stockent un grand nombre d’informations dans la base. Mieux vaut utiliser un outil externe comme Google Analytics.
A lire aussi : Nettoyer sa base de données Prestashop
3- Optimisation de Prestashop
Gestion des modules
Tout le fonctionnement de Prestashop est basé sur les modules. Ce sont des portions de code qui étendent les fonctionnalités de base de la boutique.
Chaque module entraîne le chargement de ses propres fichiers et génère des requêtes à la base de données. Il est donc tout à fait possible qu’un module provoque des ralentissements lors du chargement de votre site.
La première chose à faire est de faire le tri dans les modules installés. Tous les modules qui ne sont pas utilisés doivent être désactivés et si possible désinstallés.
Ensuite, il faut vérifier si parmi les modules utilisés, certains ralentissent le site. Les rapports générés par les outils d’analyse et votre propre expérience peuvent vous aider à déterminer les modules les plus gourmands. Plusieurs solutions s’offrent à vous. Si la fonctionnalité n’est pas vitale, peut-être est-il possible de désactiver le module. Dans le cas contraire, il va falloir soit le changer, soit l’adapter pour améliorer ses performances (pour cela, contactez-moi). Ou peut-être existe-t-il un module plus performant proposant les fonctionnalités dont vous avez besoin ?
Utilisation du cache et des CCC
Il existe dans Prestashop l’option « CCC » qu’il est possible d’activer pour améliorer les performances du site.
« CCC » signifie « Combine, Compresse and Cache ». Pour faire simple, lorsque cette option est activée, les feuilles de styles CSS, les fichiers JavaScript et le code HTML sont combinés, compressés, minifiés et mis en cache. Les fichiers contenant des styles sont fusionnés, même chose pour les fichiers JavaScript. Cela fait moins de fichiers à transférer et autant de requêtes au serveur supprimées.
Optimiser les images
Bien que la taille et la résolution des images utilisées soient indépendantes de Prestashop, il est important d’en tenir compte. Les images des produits du catalogue sont gérées par Prestashop et ne devraient pas poser de problème. Ce n’est pas le cas en revanche de toutes les images utilisées dans les thèmes.
Dans le back-office de Prestashop, on peut trouver l’option « Préférences > Images ». Cela permet notamment d’activer la compression des images. Néanmoins, les fonctionnalités proposées sont très limitées. Il peut être intéressant d’utiliser un module dédié spécifiquement à l’optimisation des images.
Sprites CSS et lazy loading
Afin de réduire le nombre d’images chargées par le site, il est possible d’utiliser la technique des « sprites ». Il s’agit de regrouper plusieurs petites images en une seule plus grande. Elle sera certes plus lourde mais ne nécessitera que le chargement d’un fichier, et donc un appel serveur, au lieu de plusieurs. Il est ensuite possible de n’afficher que la partie de l’image qui nous intéresse, un « sprite », grâce au CSS.
Le lazy loading consiste à charger uniquement le nécessaire. Typiquement, on ne chargera que les images affichées à l’écran. Lorsque vous affichez une liste d’articles par exemple, vous avez souvent besoin de faire défiler la page vers le bas afin de voir la suite. Le lazy loading va permettre de ne charger que les images des articles visibles. Inutile d’en charger plus alors que l’on ne sait pas si l’utilisateur va faire défiler la page. Ce n’est que lorsque la page défilera effectivement vers le bas que les images suivantes seront chargées. Le lazy loading est très simple à mettre en place et améliorera sensiblement les performances du site, surtout sur les pages très graphiques.
Langues et redirections
Si votre site Prestashop n’est disponible que dans une seule langue, veillez à désactiver les autres. Cela évitera d’éventuelles redirections si une langue demandée n’existe pas. Lorsque Prestashop renvoie l’utilisateur vers une autre url à l’aide d’une redirection, cela augmente le temps de chargement.
Smarty
Smarty est le moteur de templates utilisé par Prestashop. Le principe est simple. Smarty utilise un pseudo-langage pour définir les modèles utilisés pour l’affichage des pages. Au chargement d’une page, le code Smarty est compilé afin de fournir le rendu final. Cette phase de compilation est très gourmande et n’est absolument pas nécessaire en-dehors des phases de développement du site.
Dans le back-office de Prestashop, dans le menu « Préférences > Performances > Smarty », renseignez les options « Forcer la compilation » à « Non » et « Cache » à « Oui ». De cette façon, les templates Smarty ne seront pas recompilés à chaque chargement d’une page et le résultat sera directement issu du cache. Le gain en performances peut être significatif.
Chargement des fichiers JavaScript
JavaScript apporte énormément de choses à une page web. Cependant, le problème, c’est que tant qu’un fichier JavaScript n’est pas chargé totalement, tous les autres chargements sont bloqués.
Pour palier à ce problème, il est conseillé de placer les appels aux fichiers JavaScript à la toute fin de la page, juste avant la balise fermante « </body> ». De cette façon, tous les autres fichiers, et notamment les fichiers CSS, seront chargés avant et le rendu de la page pourra commencer.
L’utilisateur aura l’impression d’attendre moins longtemps. Même si la totalité des fichiers JavaScript n’est pas totalement chargée, la page peut être affichée. Les fichiers JavaScript continueront à être chargés et exécutés de manière transparente.
Pour conclure sur l’optimisation Prestashop
De nombreuses possibilités s’offrent à vous pour optimiser votre site Prestashop. Gardez en tête qu’il est inutile de vouloir tout faire en une seule fois. Analysez les performances de votre site, identifiez les points d’amélioration et priorisez-les. Les modifications les plus complexes ne sont pas nécessairement les plus efficaces. Passer des jours à modifier un module un peu lent pour obtenir un gain de 1% ne doit pas être prioritaire par rapport à la réduction du poids des images qui peut ne prendre que quelques heures pour un gain de 5 ou 10% par exemple. Sélectionnez une amélioration à apporter, mettez-la en place et mesurez de nouveau les performances afin d’estimer le gain. Lorsqu’il vous paraît satisfaisant, passez à l’étape suivante. Ce n’est qu’en étant rigoureux que vous parviendrez à optimiser votre site Prestashop.
Besoin d’aide pour optimiser votre site Prestashop ? Contactez-moi pour en discuter. Développeur & intégrateur Prestashop depuis près de 10 ans, je saurai vous conseiller dans votre projet e-commerce.
