Configurer le cache navigateur via .htaccess sur PrestaShop

Pourquoi configurer le cache navigateur sur PrestaShop

Le cache navigateur (browser caching) est l'un des leviers de performance les plus efficaces et les plus simples à mettre en place sur une boutique PrestaShop. Le principe est direct : indiquer au navigateur du visiteur qu'il peut conserver localement certaines ressources (images, CSS, JavaScript, polices) pendant une durée définie, évitant ainsi de les re-télécharger à chaque visite.

Sur une boutique e-commerce, l'impact est considérable. Un visiteur qui revient sur votre site — ou qui navigue entre plusieurs fiches produits — bénéficie d'un temps de chargement drastiquement réduit. Google PageSpeed Insights et Lighthouse signalent d'ailleurs systématiquement l'absence de cache navigateur comme un problème à corriger.

Prérequis : vérifier votre environnement d'hébergement

Avant de toucher au .htaccess, il faut impérativement vérifier deux choses :

1. Votre type d'hébergement vous donne-t-il accès au .htaccess ?

Le fichier .htaccess permet de modifier la configuration Apache au niveau du répertoire. Mais tous les hébergements ne vous donnent pas la main dessus :

• **Serveur dédié / VPS** : accès complet, vous pouvez tout configurer
• **Hébergement mutualisé classique** : le `.htaccess` est généralement disponible, mais certaines directives peuvent être restreintes par l'hébergeur
• **Hébergement cloud managé** : selon la plateforme, l'accès peut être limité voire inexistant — contactez le support technique pour connaître vos options
• **Serveur Nginx** : le `.htaccess` n'existe pas sous Nginx, la configuration se fait dans les fichiers de virtual host (voir section dédiée plus bas)

2. Les modules Apache nécessaires sont-ils activés ?

Le cache navigateur via .htaccess repose sur deux modules Apache :

• **mod_expires** : définit la durée de vie des ressources via l'en-tête `Expires`
• **mod_headers** : permet de manipuler les en-têtes HTTP, notamment `Cache-Control`

Sur la plupart des hébergements mutualisés, ces modules sont activés par défaut. Sur un VPS ou un dédié, vous devrez peut-être les activer vous-même.

#### Vérifier les modules actifs

Créez un fichier phpinfo.php temporaire à la racine de votre PrestaShop :

<?php
phpinfo();

Accédez-y via votre navigateur (https://votre-boutique.com/phpinfo.php), puis recherchez mod_expires et mod_headers dans la section "Loaded Modules".

Sécurité : supprimez immédiatement ce fichier après vérification. Le phpinfo() expose des informations sensibles sur votre serveur (chemins, versions, configuration) qu'un attaquant pourrait exploiter.

Sur un VPS, vous pouvez aussi vérifier en ligne de commande :

apachectl -M | grep -E 'expires|headers'

Si les modules ne sont pas listés, activez-les :

sudo a2enmod expires headers
sudo systemctl reload apache2

Configuration du cache navigateur dans le .htaccess

PrestaShop génère un .htaccess à la racine du site. Vous pouvez y ajouter vos directives de cache, mais attention : PrestaShop peut régénérer ce fichier lors de certaines opérations en back-office (modification des réglages SEO & URL notamment). Placez vos directives personnalisées dans un bloc clairement commenté pour les retrouver facilement.

Configuration recommandée avec mod_expires

# --- Cache navigateur - Début ---
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"

    # Images
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"

    # CSS et JavaScript
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"

    # Polices
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"

    # HTML - cache court
    ExpiresByType text/html "access plus 0 seconds"
</IfModule>
# --- Cache navigateur - Fin ---

Renforcer avec mod_headers et Cache-Control

mod_expires définit une date d'expiration, mais Cache-Control offre un contrôle plus fin :

<IfModule mod_headers.c>
    # Ressources statiques : cache agressif
    <FilesMatch "\.(ico|jpe?g|png|gif|webp|svg|css|js|woff2?|ttf|eot)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>

    # HTML et pages dynamiques : pas de cache navigateur
    <FilesMatch "\.(html|php)$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </FilesMatch>
</IfModule>

La directive immutable indique au navigateur que la ressource ne changera jamais tant qu'elle n'a pas expiré — cela évite même les requêtes conditionnelles (If-Modified-Since).

Pourquoi mettre 1 an sur les assets statiques ?

PrestaShop 8.x (et 1.7) utilise un système de cache-busting : les fichiers CSS et JS compilés incluent un hash dans leur nom de fichier (ex : theme-abc123.css). Quand vous modifiez le thème et videz le cache PrestaShop, un nouveau fichier avec un nouveau hash est généré. L'ancien fichier en cache navigateur n'est tout simplement plus référencé. Vous pouvez donc mettre une durée d'un an en toute sécurité.

Cas particulier : serveur Nginx

Si votre PrestaShop tourne derrière Nginx (de plus en plus courant sur les VPS modernes), le .htaccess est ignoré. La configuration équivalente se fait dans le bloc server :

location ~* \.(ico|jpg|jpeg|png|gif|webp|svg|css|js|woff2?|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

Pensez à recharger Nginx après modification :

sudo nginx -t && sudo systemctl reload nginx

Vérifier que le cache fonctionne

Après mise en place, vérifiez les en-têtes HTTP :

curl -I https://votre-boutique.com/themes/votre-theme/assets/css/theme.css

Vous devez voir des en-têtes similaires à :

Cache-Control: public, max-age=31536000, immutable
Expires: Sat, 21 Mar 2027 10:00:00 GMT

Dans le navigateur, ouvrez les DevTools (F12), onglet Network, et rechargez la page. Les ressources en cache affichent un statut (from disk cache) ou (from memory cache).

Les pièges à éviter

Ne pas cacher les pages dynamiques

Le panier, le tunnel de commande, les pages compte client : ces contenus sont propres à chaque visiteur. Un cache navigateur sur ces pages provoquerait des comportements erratiques (panier d'un autre client, informations périmées).

Attention à la régénération du .htaccess par PrestaShop

Quand vous modifiez les paramètres SEO & URL dans le back-office PrestaShop, le .htaccess est régénéré. Vos directives de cache personnalisées seront écrasées. Deux solutions :

1. **Documentez vos modifications** pour les réappliquer facilement
2. **Sur PrestaShop 8.x**, placez vos directives dans un fichier `.htaccess` séparé dans le dossier `/img/` ou `/themes/` — ces sous-répertoires ne sont pas écrasés par PrestaShop

Ne pas oublier la compression

Le cache et la compression sont complémentaires. Activez aussi la compression Gzip/Brotli :

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

Mesurer l'impact

Avant et après configuration, testez avec :

• **Google PageSpeed Insights** : le diagnostic "Serve static assets with an efficient cache policy" doit disparaître
• **GTmetrix** : vérifiez le score "Browser Caching"
• **WebPageTest** : comparez le temps de chargement en première visite vs visite répétée

Sur une boutique PrestaShop typique avec 50+ ressources statiques par page, le gain sur les visites répétées peut atteindre 60 à 80% de réduction du temps de chargement.