La mise en cache (caching) est une technique d'optimisation de performance web qui consiste à stocker temporairement des copies de ressources (HTML, CSS, JS, images) pour les servir plus rapidement lors des visites suivantes. Il existe trois niveaux de cache : le cache navigateur, le cache serveur et le cache CDN. Une mise en cache bien configurée peut réduire le temps de chargement de 60 à 90 % pour les visiteurs récurrents.
Lorsqu'un utilisateur visite une page web, son navigateur télécharge de nombreuses ressources : fichiers HTML, feuilles de style CSS, scripts JavaScript, images, polices. Sans cache, chaque visite déclenche un nouveau téléchargement complet de toutes ces ressources depuis le serveur d'origine.
La mise en cache crée des copies locales ou intermédiaires de ces ressources. Lors des visites suivantes, le navigateur (ou le serveur intermédiaire) sert la copie stockée au lieu de re-télécharger la ressource, réduisant drastiquement la latence et la consommation de bande passante.
Le comportement du cache est contrôlé par des en-têtes HTTP envoyés par le serveur, principalement Cache-Control, ETag et Last-Modified.
La configuration du cache repose sur des en-têtes HTTP que votre serveur envoie avec chaque réponse. Voici les plus importants :
| En-tête | Rôle | Exemple |
|---|---|---|
| Cache-Control | Directive principale de contrôle du cache | max-age=31536000, immutable |
| ETag | Identifiant unique de la version du fichier | "33a64df5" |
| Last-Modified | Date de dernière modification du fichier | Thu, 01 Jan 2026 00:00:00 GMT |
| Vary | Indique les critères de variation du cache | Accept-Encoding, Accept |
Chaque type de ressource nécessite une stratégie de cache adaptée. Voici les recommandations pour une configuration optimale :
Cache-Control: max-age=31536000, immutable. Cache d'un an, car le hash dans le nom du fichier change à chaque modification (ex: app.a1b2c3.js).Cache-Control: no-cache ou max-age=0, must-revalidate. Le navigateur vérifie toujours auprès du serveur si une version plus récente existe.Cache-Control: max-age=31536000. Les polices changent rarement et sont lourdes à télécharger.Cache-Control: no-store pour les données personnalisées, ou max-age=60, stale-while-revalidate=300 pour les données publiques.style.a3f2b1.css) pour invalider le cache à chaque modification sans changer la durée de cache.max-age=31536000 (1 an) avec immutable pour les fichiers versionnés.no-cache ou stale-while-revalidate pour que les mises à jour de contenu soient visibles rapidement.curl -I que vos en-têtes de cache sont correctement configurés.Testez gratuitement votre site pour vérifier vos en-têtes de cache et identifier les ressources qui pourraient bénéficier d'un cache plus agressif.
