Optimisation du cache

Le cache réutilise les ressources déjà téléchargées : moins de requêtes, meilleur LCP sur les visites répétées. Référence : Caching HTTP - MDN.

Mis à jour le

Les trois niveaux de cache

  • Navigateur : Cache-Control (préféré à Expires), ETag, Last-Modified.
  • CDN : ressources servies au plus près de l'utilisateur.
  • Serveur : Redis, Memcached, cache de pages (voir Serveur).

En-têtes recommandés

# Ressources versionnées (app.3f9a1c.js)
Cache-Control: public, max-age=31536000, immutable
# Document HTML : toujours revalidé
Cache-Control: no-cache

Versionnez les noms de fichiers (hash) pour pouvoir utiliser immutable sans risque.

Exemple Apache (.htaccess)

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
</IfModule>

Service Worker

Pour les PWA : cache-first, network-first ou stale-while-revalidate.

self.addEventListener('fetch', e => {
  e.respondWith(caches.open('v1').then(async cache => {
    const hit = await cache.match(e.request);
    const net = fetch(e.request).then(r => { cache.put(e.request, r.clone()); return r; });
    return hit || net;   // stale-while-revalidate
  }));
});