Cache navigateur (Cache-Control)

Définition technique

Mécanisme par lequel le navigateur stocke localement des ressources (HTML, CSS, JS, images) pour éviter de les re-télécharger à chaque visite. Contrôlé côté serveur par l’en-tête HTTP Cache-Control (max-age, no-cache, no-store, immutable, etc.) et optionnellement ETag ou Last-Modified pour la revalidation. Une bonne politique de cache réduit le nombre de requêtes et accélère les visites répétées ; une politique trop agressive sur du contenu dynamique peut afficher des données obsolètes. immutable indique que la ressource ne change pas (idéal pour les fichiers avec hash dans l’URL). no-cache permet la mise en cache mais impose une revalidation avant réutilisation ; no-store interdit tout stockage. Pour les CDN, public ou private et s-maxage peuvent être utilisés.

Comment ça fonctionne ?

Le serveur envoie l'en-tête HTTP Cache-Control (max-age, no-cache, no-store, immutable) avec chaque réponse. Le navigateur stocke la ressource et la réutilise selon ces directives. ETag ou Last-Modified permettent une revalidation légère sans retéléchargement complet.

L'erreur classique à éviter

Tout mettre en no-store (pas de cache, performance dégradée) ou tout mettre en cache long sans versionner les fichiers (anciennes versions servies après mise à jour). Cache long sur du HTML dynamique qui change souvent.

Impact business : pourquoi s'en soucier ?

Un cache bien configuré diminue la charge serveur et améliore la vitesse perçue (ressources statiques servies depuis le disque). Pour les images, CSS et JS, des durées longues (ex. 1 an avec nom de fichier versionné) sont courantes. Pour le HTML des pages dynamiques, une durée courte ou no-cache avec revalidation est souvent préférable. Une mauvaise config (tout en no-store ou tout en 1 an sans versionnage) dégrade soit la performance soit la fraîcheur du contenu. Les Core Web Vitals sur visites répétées profitent directement d’un bon cache statique.

La règle d'or

Cache long (ex. 1 an) + immutable pour les assets avec hash dans l'URL (CSS, JS, images). Courte durée ou no-cache avec revalidation pour le HTML. Documenter la stratégie par type de ressource et tester après déploiement.

La théorie c'est bien, la pratique c'est mieux. Découvrez comment j'applique le Cache navigateur (Cache-Control) dans mes projets.

Découvrir l'expertise Création de site web

Le Prompt Expert (Copier-Coller dans Claude / Cursor)

Contexte : stack [Next.js / WordPress / CDN], types de ressources [HTML, CSS/JS avec hash, images, API]. Propose une stratégie Cache-Control pour chaque type : valeurs max-age, immutable, no-cache, no-store. Donne les en-têtes exacts (Cache-Control, ETag si pertinent). Explique no-cache vs no-store et quand utiliser stale-while-revalidate. Indique la config pour [Vercel / Apache / Nginx] si pertinent.

FAQ

Ne vous perdez pas dans le code. Je m'occupe de la technique, concentrez-vous sur vos clients.

En parler ensemble