Un temps de chargement optimisé doit être un objectif pour tous les e-marchands qui souhaitent développer leur boutique Prestashop
Améliorer les performance de votre site Prestashop c’est :
- Un référencement optimisé
- Un taux de conversion plus important
- Une image de marque relevée
1. Les facteurs de vitesse d’une boutique Prestashop
Avant de savoir comment résoudre cette problématique voyons comment nous pouvons découper le chargement d’une page web : Il y a grosso modo 3 temps :
A. La réponse du serveur
Il s’agit du temps que le serveur mettra pour recevoir la requête envoyé par le navigateur et y répondre par un “OK bien reçu”. Ce temps est principalement déterminé par la présence géographique du serveur ainsi que l’existence ou non de serveurs de caches (tel qu’un cdn). Ce temps ne vous permettra en général le moins de marge d’optimisation possible.
B. L’execution sur le serveur
Il s’agit ici du temps que mettra le serveur pour générer la page qui sera envoyée. Si le serveur reçoit l’ordre d’afficher une simple page HTML, l’execution sera en théorie extrêmement rapide car la page HTML est déjà générée et n’aura qu’à être envoyée en l’état.
En revanche, s’il est question d’afficher la page d’un produit Prestashop ce dernier devra la générer en calculant le prix, les réductions potentielles, les différentes options du produits, ses déclinaisons, etc etc… Ce travail peut facilement prendre plusieurs secondes d’execution.
C. Le chargement du DOM
Une fois que le serveur a généré la page HTML demandée, il doit l’envoyer. Le chargement du DOM correspond d’une part au téléchargement du fichier HTML et de tous les fichiers reliés à cette page (images, css, js, polices, etc…) et d’une autre à l’execution du navigateur des éléments comme le javascript qui sont lu, interprétés et executés par le navigateur lui-même.
Normalement le temps le plus long doit être celui du chargement du DOM.
2. Comment améliorer la vitesse d’un site Prestashop ?
On déduit donc que les performances d’un site Prestashop s’optimise à 2 niveaux : le serveur (points 1A et 1B), et l’application Prestashop (points 1B et 1C).
A. Initialement
La première chose à faire est de tester votre site sur les différents outils à disposition, le plus souvent gratuitement. Ces outils vous donneront une idée de ce qui va ou ne va pas en terme de performances.
- Dareboost : https://www.dareboost.com
- Pingdom : https://tools.pingdom.com
- Gtmetrix : https://gtmetrix.com
- Webmaster Tools : https://www.google.com/webmasters/tools/
B. Sur le serveur
Il s’agit ici de la partie la plus technique. Si vous manquez de compétences vous devrez probablement demander l’aide d’un prestataire technique :
– Choisir le bon serveur
Choisissez un serveur suffisament robuste, correspondant à votre charge. Si vous n’avez pas de prestataire n’envisagez pas des machines dédiées ou VPS et privilégiez des solutions mutualisées haut de gamme.
– Cache et compression
Vérifiez que la compression gzip est bien activée sur le serveur. Cela permet aux fichiers devant être téléchargés sur l’ordinateur d’un visiteur d’être compressé avant envoi puis décompressé à la réception. Insérez le code suivant dans votre .htaccess pour les activer.
– Utilisez un serveur de cache ou un CDN
Une idée intéressante, surtout si vous communiquez à l’international, est d’activer un CDN. Il s’agit d’un serveur de cache “dupliquant” les pages de votre site sur un grand nombre de serveurs dans le monde. Ainsi les requêtes sont en partie prises en charge par le CDN au lieu du serveur principal ce qui augmente grandement la vitesse de votre site.
– Utilisez les media servers
Si vous utilisez un CDN vous pouvez mettre en place les media servers. Il s’agit de multiplier le nombre de connexions simultanées via des urls différentes pour télécharger les images, fichiers css et fichiers js.
– Vérifiez la taille de la base de données
En utilisant PHPMYADMIN, listez toutes les tables de votre base de données et cliquez sur la colonne “size” ou “taille” pour voir les tables les plus lourdes en premières positions. Considérez que des tables de plus de 100MO, pour une petite ou une moyenne boutique n’est pas normal.
Même une grosse boutique qui tourne correctement ne devrait pas avoir plus de 100 ou 200MO dans une table. Si c’est le cas, demandez à un développeur de jeter un oeil aux données qui prennent de la place et de trouver une solution pour soit purger la base, soit monter les performances de votre serveur.
C. Sur Prestashop
Voici la partie la plus accessible. Si jamais vous rencontrez tout de même quelques difficultés, vous pouvez soit demander de l’aide sur les forum (voir le forum de Prestashop) soit chercher un prestataire (n’hésitez pas à me contacter pour toute question Prestashop).
– Configurez correctement le cache et les CCC
Dans le back-office rendez vous dans Paramètres Avancées > Performances. Activez le cache et sélectionnez “ne jamais recompiler les fichiers de templates” afin d’augmenter les performances. Attention : Si vous modifiez des fichiers du thème vous devrez vider le cache pour que Prestashop prennent en compte les modifications.
– Compression des images
Privilégiez des images jpg (souvent mieux compressées que le png) de moins de 500ko
Par défaut Prestashop compresse les images que vous uploadez en jpg (Voir en BO Préférences > Images). N’hésitez pas à les compresser aussi de votre côté avant l’upload pour diminuer encore le poid de l’image. Attention cependant à la qualité ! La compression ne doit en aucun cas corrompre la qualité de l’image ! Les photos de vos produits sont décisives pour convertir vos visiteurs.
– Google Webfonts
Si vous utilisez plusieurs webfonts Google, appellez les dans une même requête.
Si vous décidez de charger des polices via Google, ne les appellez jamais en plusieurs fois mais insérez les dans une même requête. Utilisez l’outil Dareboost vu plus haut pour avoir un exemple de la requête fusionnant vos webfonts.
– Désactivez les fonctionnalités non nécessaires
Dans l’onglet Performances de votre boutique Prestashop vous pouvez désactiver les groupes de clients, les caractéristiques ou les déclinaisons. Désactivez les fonctions que vous n’utilisez pas.
– Évitez les redirections
Si l’url de votre site est www.mon-site.com ce n’est pas www.mon-site.com/fr ou mon-site.com. Lorsqu’un utilisateur se connecte sur www.mon-site.com au lieu de www.mon-site.com/fr, une redirection est opérée par Prestashop et augmente le temps de chargement. Prenez soin de désactiver les langues que vous n’uilisez pas si votre site n’est disponible qu’en Français afin d’éviter les redirections inutiles (aussi mauvais pour le SEO).
3. Quelques cas particuliers
A. L’international
Si votre clientèle se trouve dans le monde entier, prenez grand soin à la position géographique de vos serveurs. Un CDN sera une option très intéressante, mais n’hésitez pas à envisager l’installation d’un serveur de cache dédié. Vous pouvez aussi, dans certains cas, choisir d’installer un second Prestashop sur un serveur se trouvant dans le territoire visé par le public.
La solution est beaucoup moins pratique sur le plan administratif et gestion, mais est probablement bien plus simple à mettre en place pour les plus petits budgets et ceux ne souhaitant pas faire appel à un infogérant.
B. Le mobile
Désormais le trafic mobile peut représenter jusqu’à plus de la moitié du trafic total de votre site. Il est donc nécessaire de prendre en compte ces types de machine dans l’amélioration de vos performances. Le mot d’ordre sera ici : légereté de vos pages. Le problème de vitesse de chargement sur le mobile ne sera évidemment ni lié à l’écran, ni lié aux performances de l’appareil mais bien à la connexion avec Internet. Les mobiles peuvent le plus souvent utiliser un réseau bien plus lent que le réseau fixe : n’utilisez pas d’images excessivement grosses.
4. Conclusion
Réduire le temps de chargement de ses pages Prestashop peut aussi bien être d’une facilité déconcertante qu’un travail de titan. Heureusement contrairement au SEO les premiers résultats peuvent être mesurés très rapidement.
Si cet article liste de manière non exhaustive des points à traiter, il faut considérer ce travail comme étant sur mesure et peut être différent d’une boutique à une autre. Si vous n’avez pas de prestataire pouvant assurer les points les plus techniques, n’hésitez pas a vous même mettre les mains dans le cambouis sur un environnement de preprod (une copie de votre site non accessible aux clients) en vous aidant de nombreux tutoriels disponibles sur le web.
N’hésitez pas à présenter votre boutique sur des forums pour demander des avis :
