Retenir ce qu’on a déjà vu plutôt que de le redemander à chaque fois : un navigateur qui a déjà téléchargé le logo ou la feuille de style d’un site peut, si les bons en-têtes l’y autorisent, le réutiliser tel quel lors d’une visite suivante, sans repasser par le serveur.
Configurer les bons en-têtes HTTP
La mise en cache navigateur se pilote via les en-têtes Cache-Control et Expires, envoyés par le serveur avec chaque fichier. Sur WordPress, ce réglage se fait généralement au niveau du serveur (Nginx, Apache) ou d’une extension de cache, en indiquant une durée longue pour les fichiers statiques versionnés (images, CSS, JS) et une durée courte, voire nulle, pour le contenu HTML susceptible de changer.
Exemple
<filesMatch "\.(css|js|jpg|png|webp)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>Cette directive Apache indique aux navigateurs de conserver ces fichiers pendant un an avant de les redemander au serveur.
Piège fréquent
- Fixer une durée de cache très longue sur un fichier CSS ou JS sans mécanisme de versionnement dans son nom empêche les visiteurs de recevoir une mise à jour tant que le cache local n’a pas expiré.
- Le versionnement par requête (
style.css?ver=1.2), pratique courante avecwp_enqueue_style, permet de forcer le rechargement d’un fichier modifié sans réduire la durée de cache des autres. - La mise en cache navigateur ne remplace pas un cache de page côté serveur : la première évite des requêtes réseau pour un visiteur déjà venu, la seconde accélère la génération de la page pour tout le monde.