Cache HTTP et CDN : Stratégies de Cache pour la Performance Web

Qu'est-ce que le cache HTTP ?

Le cache HTTP est le stockage temporaire de ressources (HTML, CSS, JS, images) par les navigateurs et les serveurs intermédiaires (proxy, CDN).

Le cache réduit le trafic réseau sur les requêtes répétées et accélère le chargement de la page. Un cache bien configuré peut réduire la charge du serveur jusqu'à 80%.

Deux types de cache : Cache du navigateur (côté client) et cache partagé (CDN, proxy). Les deux servent des objectifs différents.

Le header Cache-Control est le mécanisme principal contrôlant le comportement du cache. Il contient des directives comme max-age, s-maxage, no-cache, no-store.

Headers Cache-Control

max-age=3600 : Spécifie que la ressource est fresh pendant 3600 secondes (1 heure). Pendant ce temps, le navigateur ne fait pas de requête réseau.

s-maxage=3600 : max-age pour les caches partagés (CDN). Le navigateur utilise max-age, le CDN utilise s-maxage.

no-cache : La ressource doit être validée avec le serveur à chaque utilisation. Stockée dans le cache mais revalidée avant utilisation.

no-store : La ressource n'est stockée dans aucun cache. Utilisé pour les données sensibles (informations personnelles, bancaire).

public/private : public signifie qu'elle peut être stockée dans n'importe quel cache. private signifie qu'elle n'est stockée que dans le cache du navigateur (contenu spécifique à l'utilisateur).

immutable : La ressource ne change jamais (assets versionnés). Le navigateur ne fait pas de revalidation, améliorant la performance.

ETag et Last-Modified

ETag (Entity Tag) : Un identifiant unique pour la ressource. Le serveur l'utilise pour vérifier si la ressource a changé.

Last-Modified : Spécifie la date de dernière modification de la ressource. Le navigateur fait une requête conditionnelle avec le header If-Modified-Since.

Requête conditionnelle : Le navigateur fait une requête avec le header If-None-Match (ETag) ou If-Modified-Since (Last-Modified). Si la ressource n'a pas changé, le serveur retourne 304 Not Modified.

304 Not Modified : Si la ressource n'a pas changé, le serveur retourne seulement les headers, pas le body. Cela économise la bande passante.

CDN (Content Delivery Network)

Le CDN est un réseau qui sert des assets statiques (images, CSS, JS, polices) depuis des serveurs à différents endroits dans le monde.

Le CDN sert le contenu depuis le serveur le plus proche de l'utilisateur. Cela réduit la latence de 50 à 80%.

CDN populaires : Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Chacun a des prix et des fonctionnalités différents.

Configuration CDN : Serveur d'origine (source), serveurs edge (endpoints), cache TTL (durée de vie), purge (vidage du cache).

Contenu dynamique avec CDN : Certains CDN (Cloudflare Workers, Fastly Compute) peuvent générer du contenu dynamique à l'edge.

Stratégies de Cache

Cache First : Servir du cache d'abord, récupérer du réseau si non disponible. Idéal pour les assets statiques (CSS, JS, images).

Network First : Récupérer du réseau d'abord, revenir au cache en cas d'échec. Idéal pour le contenu dynamique (réponses API).

Stale While Revalidate : Servir du cache, mettre à jour du réseau en arrière-plan. Fournit une réponse rapide tout en gardant le contenu frais.

Cache Only : Servir uniquement du cache. Utilisé pour les applications offline.

Network Only : Récupérer uniquement du réseau. Utilisé pour les données en temps réel (cours des actions, chat).

Cache Busting

Noms de fichiers versionnés : Changez le nom du fichier avec style.css?v=1.2.3 ou style.abc123.css. Le navigateur charge le nouveau fichier.

Query string : Cache busting avec style.css?v=20261025. Certains CDN n'utilisent pas la query string comme clé de cache.

Content hash : Webpack/Vite crée un hash basé sur le contenu du fichier (main.a1b2c3.js). Le hash change quand le contenu change.

Service Worker : Le nouveau Service Worker devient actif immédiatement avec self.skipWaiting() et clients.claim(). Le cache est mis à jour.