Le cache HTTP est un mecanisme du protocole HTTP qui permet aux navigateurs, CDN et proxies de stocker des copies de reponses et de les reutiliser pour des requetes ulterieures sans contacter le serveur d origine. C est la technique de performance la plus importante du web. Un asset statique correctement cache (image, CSS, JS) se charge en 1 a 10 ms depuis le cache navigateur contre 100 a 1000 ms depuis l origine. Le cache HTTP est controle par des en-tetes definis dans la RFC 7234 (juin 2014) et la plus recente RFC 9111 (juin 2022) : Cache-Control (principal moderne), Expires (legacy), ETag et Last-Modified (validateurs) et Vary (modificateur de cle).
Fonctionnement
- Cache hit si la copie est fraiche.
- Requete conditionnelle avec If-None-Match ou If-Modified-Since, reponse 304 Not Modified.
- Cache miss sinon.
Cache-Control
| Directive | Sens |
|---|---|
max-age=N | Fraiche pendant N secondes. |
s-maxage=N | Seulement caches partages. |
public | Tout cache peut stocker. |
private | Seul le navigateur. |
no-cache | Revalider avant utilisation. |
no-store | Ne jamais stocker. |
stale-while-revalidate=N | Sert stale pendant revalidation. |
immutable | Ne changera jamais. |
Cache-Control: public, max-age=31536000, immutable
Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=86400
Cache-Control: private, no-cache
Cache-Control: no-storeETag
Identifiant opaque (souvent hash). Le client envoie If-None-Match. Si correspond, 304 sans corps. Peut etre strong ou weak (prefixe W/).
Last-Modified
Horodatage avec resolution de 1 seconde. ETag plus precis pour des changements rapprochees.
Vary
Vary: Accept-Encodingsepare gzip/brotli.Vary: Accept-Languagesepare les langues.Vary: User-Agenta eviter.Vary: Cookiecasse le cache partage.
Niveaux de cache
| Niveau | Endroit | Honore |
|---|---|---|
| Navigateur | Disque ou memoire | max-age, ETag, Last-Modified |
| CDN edge | PoP proche (Cloudflare, Fastly, Akamai, CloudFront) | s-maxage, stale-while-revalidate |
| Proxy d entreprise | Reseaux internes | public, private |
| Service Worker | Page via JS | Logique propre |
Cache busting et fingerprinting
webpack, Vite, esbuild, Turbopack, Rollup. app.css devient app.a1b2c3d4.css. HTML court, assets fingerprintes max-age 1 an immutable.
Cache HTTP dans WordPress
- WP Rocket.
- LiteSpeed Cache.
- W3 Total Cache.
- WP Super Cache.
- Cloudflare APO a 5 USD par mois.
location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|ico|css|js|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}Erreurs frequentes
- max-age long sur le HTML.
- Pas d en-tete sur assets statiques.
- Vary: User-Agent.
- Set-Cookie + public.
- Pragma: no-cache (obsolete).
- Pas d en-tete du tout.
- Cache poisoning sans bon Vary.
Comment tester
- DevTools Network.
curl -I.- WebPageTest.
- Lighthouse.
- RedBot.
HTTP/2 et HTTP/3
Memes regles. Server Push deprecie depuis 2022, remplace par Early Hints (RFC 8297).
Comment InspectWP aide ?
InspectWP analyse Cache-Control, ETag, Last-Modified et Vary de chaque ressource.