Optimiser PrestaShop avec Varnish et ESI : retour d’expérience

Introduction

PrestaShop est l’une des solutions e-commerce open source les plus utilisées au monde. Sa flexibilité et son écosystème riche en font un choix évident pour beaucoup de marchands. Mais comme toute solution robuste, ses performances peuvent rapidement devenir un frein : plus le catalogue est grand et le trafic élevé, plus les temps de réponse augmentent.

Un site lent, c’est un risque direct sur les ventes et sur le référencement naturel.

C’est dans ce contexte que nous avons choisi d’intégrer Varnish Cache à un projet PrestaShop, avec une approche basée sur les ESI (Edge Side Includes) et des optimisations ciblées. L’objectif : accélérer le rendu des pages tout en préservant les parties dynamiques essentielles comme le panier ou le compte client.

Pourquoi Varnish sur PrestaShop ?

Par défaut, PrestaShop s’appuie sur son cache interne et sur la mise en cache PHP/MySQL. Cela fonctionne bien pour de petites boutiques, mais devient vite limité lorsque :

  • le catalogue comporte des milliers de produits,
  • le trafic explose pendant une campagne marketing,
  • plusieurs déclinaisons produit doivent être calculées en temps réel.

C’est là que Varnish entre en jeu.

Où se place Varnish dans l’architecture ?

Varnish agit comme un reverse proxy :

  • Le client (navigateur) envoie une requête.
  • Varnish reçoit la requête en premier.
  • S’il a déjà la réponse en cache → il la renvoie immédiatement.
  • Sinon, il transmet la requête au serveur web (Apache/Nginx + PHP + PrestaShop), met en cache la réponse, puis la livre au client.

Résultat : la majorité des pages est servie par Varnish sans solliciter PrestaShop, ce qui soulage énormément l’application et la base de données.

Quels bénéfices obtenus ?

Avec Varnish, nous avons pu :

  • Réduire le TTFB (Time To First Byte) : les pages arrivent quasi instantanément côté navigateur.
  • Encaisser les pics de trafic sans multiplier les serveurs d’application.
  • Améliorer l’expérience utilisateur grâce à une navigation plus fluide.

Et bonus non négligeable : Google valorise la vitesse de chargement, ce qui a un impact indirect positif sur le SEO.

schéma explicatif du fonctionnement de Varnish.png

Quelle à été notre démarche ?

L’intégration de Varnish sur PrestaShop repose sur trois piliers : un VCL adapté, l’utilisation des fragments ESI, et un système de purge intelligent via deux modules dédiés.

Un VCL adapté à PrestaShop

Le cœur de Varnish, c’est son fichier de configuration (VCL).
Nous l’avons personnalisé pour PrestaShop afin de :

  • filtrer certains cookies (par ex. PrestaShop-xxx, panier, session),
  • distinguer les pages publiques (listing, produit, CMS) des pages privées (panier, compte client),
  • éviter de mettre en cache des éléments sensibles comme l’authentification ou le paiement.

Exemple d’une partie du fichier de configuration (VCL)

code du fichier de configuration VLC

Découpage avec ESI (Edge Side Includes)

Au lieu de mettre en cache une page entière, nous avons choisi de la découper en fragments :

  • Header, footer, listings produits → en cache,
  • Panier, bloc “Mon compte” → toujours dynamiques, servis en direct depuis PrestaShop.

Cela permet d’avoir 95% de la page servie par Varnish, avec seulement une petite partie calculée en temps réel.

Exemple sans ESI :

code de la version sans ESI

Exemple découpage avec ESI :

code avec la version ESI

Deux modules PrestaShop sur-mesure

Pour exploiter pleinement Varnish dans PrestaShop, nous avons développé deux modules complémentaires :

Module Fragments

  • génère les blocs dynamiques (panier, bloc client, compteur de produits, etc.),
  • les expose via des endpoints spécifiques pour être appelés en ESI,
  • garantit que ces fragments restent toujours frais, même si le reste de la page est servi depuis le cache.

Module Flush

  • envoie automatiquement des requêtes de purge ciblées à Varnish,
  • déclenché lors des événements clés (mise à jour produit, modification catégorie/CMS, changement de stock/déclinaison),
  • évite les invalidations globales inutiles, tout en maintenant des données toujours fiables côté client.

Résultat :

  • côté utilisateur → une navigation ultra-rapide, sans décalage entre cache et réalité (prix, stock, panier),
  • côté technique → une architecture qui reste performante même en période de forte charge, avec un cache contrôlé de manière granulaire.

Cas concrets de performance

Quels sont les gains significatifs ? 

  • Avant : chaque page produit nécessitait plusieurs requêtes lourdes, surtout avec des déclinaisons.
  • Après : rendu instantané, même avec des filtres ou des catalogues riches.

Autre exemple :

  • Listing avec filtres (ex. taille, couleur, prix) → auparavant calcul complet côté serveur,
  • Avec Varnish, l’affichage est quasi immédiat grâce au cache des blocs statiques.

Enfin, lors des campagnes marketing où le trafic explose, le site reste fluide, sans besoin de surdimensionner l’infrastructure.

Quels sont les bénéfices pour les e-commerçants ?

Pour un e-commerçant, tout cela se traduit par :

  • Plus de ventes → chaque seconde gagnée réduit le taux d’abandon.
  • Une infrastructure optimisée → pas besoin de doubler les serveurs pour encaisser le trafic.
  • Un meilleur SEO → la vitesse est un facteur de classement chez Google.
  • Une meilleure image de marque → un site qui répond vite inspire confiance.

Conclusion

Intégrer Varnish dans PrestaShop, c’est donner une nouvelle dimension aux performances de sa boutique. Grâce à un VCL adapté, à l’utilisation des ESI, et à deux modules complémentaires, il est possible de rendre une boutique plus rapide, plus fiable et plus scalable. Chez AWAM, nous accompagnons aussi bien les équipes techniques que les e-commerçants dans la mise en place de solutions de cache avancées sur PrestaShop.

Vous souhaitez auditer ou optimiser les performances de votre site PrestaShop ?

Contactez-nous pour en discuter.

No items found.
Projet agence awam kaneta
Projet agence awam Calliopé agency
Projet agence awam Calliopé la direction
Projet agence awam Eklore
Projet agence awam Ephemere Square
Caare ingénérie
Projet agence awam kaneta
Projet agence awam Calliopé agency
Projet agence awam Calliopé la direction