Quelles options choisir dans la page Performances de Prestashop pour optimiser le temps de chargement de votre boutique?

Je vous explique ici le rôle de chaque option et comment les configurer pour optimiser Prestashop.

Configuration de Smarty

Smarty est le moteur de templates utilisé par Prestashop pour générer les pages de votre boutique, plus d'infos ici: https://www.smarty.net/

Compilation des templates

Les templates sont des fichiers qui décrivent les modèles de pages ou de blocs de pages de votre boutique. Il y en a dans votre thème et dans vos modules, vous les reconnaissez par leur extension '.tpl'. Ces modèles contiennent du HTML et des balises Smarty, c'est à dire du code que Smarty va reconnaitre et remplacer par des données en fonction de la page demandée ou de l'utilisateur connecté.

Smarty va donc transformer (compiler) ces fichiers templates en code PHP pour que votre serveur puisse les exécuter mais cette compilation prend du temps. Heureusement cette phase n'est nécessaire qu'une seule fois, tant que vous ne modifiez pas le fichier template. 

3 choix sont possibles pour cette option:

  • Ne jamais recompiler les fichiers de templates: ne sélectionnez cette option que si votre boutique est complètement terminée, que vous ne modifiez plus aucun module ni fichier template. Si c'est le cas il vous faudra vider le cache manuellement.
  • Recompiler les fichiers de templates s'ils ont été mis à jour: avec cette option Smarty va vérifier si le fichier template a été modifié depuis la dernière compilation. C'est l'option que je recommande car une boutique n'est jamais vraiment figée et le contrôle de la date de la dernière compilation prend très peu de temps. Cela évite de perdre du temps à comprendre pourquoi la dernière modification apportée à la boutique n'apparait pas.
  • Forcer la compilation à chaque appel: à n'activer que si vous travaillez sur votre thème ou un module, uniquement pendant le développement donc.

Cache

Smarty propose un système de cache que les modules peuvent utiliser pour optimiser leur code. Par exemple, le module d'affichage des meilleures ventes demande à Smarty de mettre en cache le HTML généré, ainsi lorsque ce cache est disponible le module n'a pas besoin de consulter la base données pour connaitre les meilleures ventes, il affiche le dernier contenu mis en cache par Smarty. Pour rester à jour le module demande à Smarty de vider le cache à chaque nouvelle vente ainsi qu'à chaque ajout ou suppression de produit.

Cette option doit être activée sauf pendant la phase de développement de la boutique.

Synchronisation multi-serveurs

Lorsque vous utilisez plusieurs serveurs, cette option vous aide à synchroniser leurs caches.

Type de mise en cache (supprimé depuis PS8)

Permet d'indiquer où le cache de Smarty doit être stocké. Je recommande vivement de choisir le "Système de fichier" afin de ne pas surcharger le serveur MySQL.

Vider le cache

Voici une option qui me laisse perplexe car elle permet de désactiver le rafraichissement du cache, cela n'a aucun intérêt. Si on reprend l'exemple du module des meilleures ventes, cela signifie que la liste ne serait jamais mise à jour.

  • Ne jamais vider les fichiers du cache: ne jamais choisir cette option
  • Vider le cache chaque fois qu'il y a une modification: toujours choisir cette option

Configuration du mode debug

Désactiver les modules non développés par PrestaShop

En cas d'erreur vous pouvez désactiver tous les modules sauf ceux développés par Prestashop. A laisser sur "Non".

Désactiver toutes les surcharges

Vous risquez d'avoir plus de problème en activant cette option car sans surcharges certains modules ne fonctionneront plus. Le pire c'est que vous n'aurez aucun message d'erreur pour vous le dire.

Mode debug

C'est l'option la plus intéressante en cas de page blanche et d'erreur 500. Activez le mode DEBUG pour que Prestashop affiche un message d'erreur plus détaillé qui vous permettra de comprendre ce qui ne va pas.

Configuration des fonctionnalités désactivables

Ici c'est très simple, si vous n'utilisez pas certaines fonctionnalités de Prestashop alors autant les désactiver, votre boutique gagnera en rapidité.

Configuration de CCC (Concaténation, Compression et mise en Cache) 

"Smart cache" pour les feuilles de style

A activer absolument sauf pendant la phase de création ou de modification de votre site web. Cela permet de fusionner tous les fichiers CSS en un seul et de le compresser. Le temps de chargement de votre boutique Prestashop sera beaucoup plus rapide et moins lourd et vous obtiendrez un meilleur score Pagespeed Insight de Google ou sur GTMetrix.

Si vous constatez des problèmes de styles lorsque vos CSS sont compressés c'est que l'un des fichiers CSS contient une erreur de syntaxe. Celle-ci est bien gérée par le navigateur dans un fichier séparé et non compressé mais pas lorsque CCC est activé. Dans ce cas il faut trouver le fichier en question et corriger l'erreur.

"Smart cache" pour le code JavaScript

A activer absolument sauf pendant la phase de création ou de modification de votre site web. Cela permet de fusionner tous les fichiers Javascript en un seul et de le compresser. Vous obtiendrez un meilleur score Pagespeed Insight de Google ou sur GTMetrix et le temps de chargement de vos pages web sera beaucoup plus rapide et moins lourd.

Notez si votre serveur utilise les protocoles HTTP/2 et HTTP/3.

HTTP/2 (H2) et HTTP/3 (H3) sont des versions plus récentes du protocole HTTP, conçues pour améliorer les performances et l'efficacité des sites web. Elles introduisent des fonctionnalités telles que le multiplexage, la compression des en-têtes et le push côté serveur. Le multiplexage permet d'envoyer plusieurs requêtes simultanément sur une seule connexion TCP. Cela signifie que le surcoût des requêtes supplémentaires est réduit, et la nécessité de réduire le nombre de fichiers pour des raisons de performance est moins critique.

Sur Prestashop, en ne fusionnant pas les fichiers (donc en désactivant les options CCC), vous évitez le besoin de télécharger des ressources identiques pour des pages qui ne partagent pas les mêmes fichiers JS ou CSS fusionnés. De plus, lors de l'utilisation d'un cache HTML, cette pratique évite la nécessité de régénérer l'ensemble du cache à chaque modification d'un fichier CSS ou JS.

Cependant, de nombreux modules ne minifient pas leurs fichiers CSS et JS, vous risquez donc d'avoir un léger surcoût au niveau du poids à télécharger (même si gzip devrait réduire ce surcoût).

Pour conclure, avec les protocoles HTTP/2 (H2) et HTTP/3 (H3), vous pouvez désactiver les options CCC, c'est vous qui choisissez!

Pour savoir si votre serveur utilise les protocoles HTTP/2 (H2) et HTTP/3 (H3), ouvrez la console du navigateur sur votre boutique, allez dans l'onglet réseau, puis voyez si le protocole utilisé pour les fichiers statiques (images, JavaScript, CSS, etc.) est h2 ou h3.

Mon serveur utilise-t-il les protocoles H2 et H3?

Optimisation Apache

A activer absolument sauf pendant la phase de création ou de modification de votre site web. Cela permet d'ajouter les directives de cache pour les navigateurs, très important!

Configuration des serveurs de médias (CDN)

Utiliser un CDN (serveurs de médias) est surtout utile si vos utilisateurs viennent d'un peu partout dans le monde. Cela permet de servir les images, les feuilles de style (CSS), le javascript et les polices de caractères plus rapidement car plus proche du visiteur. Si vous vendez uniquement en France par exemple, un CDN n'est pas utile car votre hébergeur est déjà assez proche, sauf si vous avez prix un hébergeur australien :-)

Cependant vous pouvez utiliser cette option pour utiliser un nom de domaine différent pour servir vos fichiers statiques. Pourquoi? Pour que les requêtes ne contiennent pas les cookies et soient donc moins volumineuses. Par exemple vous pouvez créer un nom de domaine shopcdn.fr qui pointe sur le même serveur. Celui-ci n'étant utilisé que pour les fichiers statiques il ne transportera pas de cookie.

Configuration du cache

C'est un cache qui est utilisé pour les requêtes SQL exécutées par Prestashop. Personnellement je déconseille son utilisation car mal configuré il peut dégrader les performances de votre boutique. Certains utilisateurs se plaignent également d'un rafraichissement pas toujours à jour.

Conclusion

Vous savez maintenant comment configurer Prestashop pour optimiser les performances de votre boutique. Chaque page sera générée plus vite par votre serveur et sera plus légère pour un chargement plus rapide dans le navigateur de vos clients.

N'hésitez pas à parcourir la liste de nos modules Prestashop pour optimiser encore plus votre boutique et améliorer votre score Pagespeed de Google!