Vitesse de Prestashop

Utilisez le cache-control pour un Prestashop plus rapide (ép. 85)

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.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (4 votes, moyenne : 4,75 sur 5)
Loading...

5 commentaires sur “Utilisez le cache-control pour un Prestashop plus rapide (ép. 85)”

  1. Superbe blog, et bonne information, j’ai un amis qui à une boutique Prestashop et j’avoue que moi je suis plus pour Shopify car solution qui me correspond plus, mais tout le monde n’a pas les moyens de faire des changement de plateforme.
    Je reproche à Prestashop sont manque de facilité pour un débutant.
    Le système de module est aussi trop chère, je trouve qu’il devrait revoir leurs prix car pour de simples options il faut souvent déboursé 200.- ou 300.- ce qui pour une boutique qui démarre peu vite être conséquent.
    https://seo-web.ch

    1. Hello,

      Je confirme que ce qui est bien avec Shopify c’est que même en étant novice on peut ouvrir sa boutique en quelques clics (sans gros investissement). Prestashop lui permet plus de personnalisations et reste intéressant au niveau du prix à condition d’être prêt à s’aventurer dans le code ou à mandater un tiers (mais cela génère vite un coût).

      A bientôt !

      1. Exactement, il y à même la possibilité d’avoir une boutique de test, seul problème elle n’est pas référencée sur Google et il faut payer ensuite, mais ca permet de construire ca boutique tranquillement et passé au payant ensuite.

    2. Bonjour Germain,

      j’étais en train de regarder ta vidéo,
      et j’ai vu quand tu a rajouté le code pour enlevé les Etag
      que quelques lignes au dessus, il y était déjà,
      alors est ce que c’est déjà dans le presta d’origine ou peut être que tu l’avais déjà rajouter,
      merci pour toutes tes vidéos et tutos toujours super intéressants!

      1. Hello,

        C’est une bonne remarque je ne me souviens plus vraiment si Prestashop l’avait déjà mis de base (peut-être), à vérifier en supprimant le .htaccces et en regénérant un nouveau pour comparer.

        Merci pour le retour positif, cela me fait plaisir !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *