Dans la plupart des cas de boutiques e-commerce Prestashop on laisse gérer le chargement des ressources automatiquement… C’est-à-dire que le navigateur gère le cache de manière standard… (et c’est pas forcément un booster).

On a des connexions rapides, mais ça suffit pas

Pensez-vous que votre boutique Prestashop n’a pas besoin d’être optimisée pour sa vitesse ? C’est ce qu’on peut penser, finalement on a presque tous l’ADSL, la fibre optique ou la 4G… donc n’importe quel site peut se charger dans un laps de temps raisonnable. Le problème c’est surtout que les clients sont impatients et n’aiment pas attendre 2 secondes entre chaque temps de chargement de page. C’est pour cela qu’il faut absolument limiter le volume de données transférées entre le serveur et l’internaute.

Beaucoup de ressources sont statiques

En fait sur un site e-commerce les ressources qui constituent le site (js / css /images..) n’ont pas besoin d’être rechargées en permanence… on peut les mettre en cache pour une longue durée afin de limiter le volume de données à envoyer à l’appareil qui effectue la requête HTTP sur le site. Le fait de définir un « max-age » pour les ressources dans le fichier .htaccess permet d’optimiser le comportement du serveur…. ce qui est intéressant, car finalement c’est juste quelques lignes de code à ajouter pour cette optimisation.

Les risques de la méthode cache-control

Comme toute optimisation, cela présente parfois quelques risques… Comme par exemple qu’un fichier qui doit être absolument actualisé du côté de l’internaute ne s’actualise pas et reste dans le cache local. C’est pour ça que pour tout ce qui concerne les fichiers JS et CSS je montre une petite astuce qui consiste à mettre un paramètre en fin d’url qui contient la date du jour. Ainsi le navigateur reste quand même forcé de réactualiser les fichiers au moins une fois par jour. Cela peut-être utile, même sans cache-control, afin que vos clients aient régulièrement un cache interne propre.

Le délai du cache contrôle semble incorrect ?

Dans la « console Google » de Chrome, on peut analyser le header de chaque ressource et voir de délai du cache-control, dans mon cas j’avais une valeur qui n’avait rien à voir avec ce que j’avais spécifié dans le fichier .htaccess, si vous êtes aussi dans ce cas de figure il faut penser à recharger la page en cochant la case « disable cache » dans le sous onglet « network » de la console (hé oui je n’y ai pas pensé sur le moment).

Ne pas oublier les bonnes pratiques habituelles

Comme je le dis toujours, ce qui compte dans un 1er temps c’est d’avoir déjà un hébergement de qualité et qui soit rapide (pour Prestashop je conseille de prendre du VPS, c’est un bon rapport qualité / prix). Ensuite, assurez-vous de ne pas uploader des images gigantesques non-optimisée (plusieurs Mo) ça arrive encore régulièrement dans des sliders, header ou même footer qui sont super-lourds. A ce sujet vous pouvez regarder cet autre tutoriel pour obtenir un Prestashop vraiment rapide.

Pour ce tutoriel Prestashop vous avez à disposition :

• 1 x fichier .htaccess (avec cache contrôle
• 1 x fichier javascript.tpl (avec paramètres dynamiques)
• 1 x fichier stylesheets.tpl (avec paramètres dynamiques)

Télécharger

Résumé de la vidéo : Pour que votre boutique Prestashop se charge rapidement, il faut optimiser le cache local

• Idéalement testez la méthode sur un serveur en ligne, en « localhost », le comportement semble différent.
• Pour commencer on analyse les « requests headers » pour voir les valeurs retournées et évaluer la gestion du cache.
• Ensuite, dans le fichier .htaccess on défini le « max-age » pour chaque ressource et on désactive la gestion « Etags ».
• On compare à nouveau le résultat avec l’optimisation, via la console de Google pour voir si les valeurs définies remontent.
• Dans le header de Prestashop on modifie les fichiers qui chargent les urls des ressources JS / CSS en mettant un paramètre en fin d’url, ce qui permet de forcer l’actualisation des fichiers 1x par jour.