Quelle est la différence entre cache HTTP et Service Worker ?

Le cache HTTP est géré automatiquement par le navigateur via les en-têtes envoyés par le serveur (Cache-Control, ETag, Expires). Le Service Worker est un script JavaScript qui s'exécute en arrière-plan et vous permet de contrôler précisément quelles ressources mettre en cache, comment les servir et quand les renouveler. Le cache HTTP est passif, le Service Worker est actif et programmatique.

Les Service Workers fonctionnent-ils en mode hors connexion ?

Oui, c'est l'un de leurs principaux avantages. Un Service Worker peut intercepter les requêtes réseau et servir des ressources depuis le cache même sans connexion Internet. Cela permet de proposer une expérience hors ligne ou de gérer gracieusement les interruptions réseau, ce qui est particulièrement utile pour les Progressive Web Apps (PWA).

Cache HTTP et Service Workers : stratégies pour un site ultra-rapide

Pourquoi la mise en cache est essentielle pour la performance web

Un site qui met plus de 3 secondes à charger perd 53 % de ses visiteurs mobiles (source : Google). La mise en cache est le levier le plus puissant pour réduire ce temps de chargement, et pourtant, elle reste sous-exploitée sur la majorité des sites.

Deux mécanismes complémentaires permettent de maîtriser le cache côté client : le cache HTTP (natif au protocole) et les Service Workers (contrôle programmatique). Voyons comment les combiner intelligemment.

Le cache HTTP : la fondation incontournable

Comment ça fonctionne

Le cache HTTP repose sur des en-têtes de réponse envoyés par le serveur. Lorsqu’un navigateur reçoit une ressource (image, CSS, JS), ces en-têtes lui indiquent s’il peut la stocker localement et pour combien de temps.

Les en-têtes les plus importants :

Cache-Control : définit la durée de vie (max-age=31536000 pour 1 an)
ETag : empreinte unique du fichier pour vérifier s’il a changé
Last-Modified : date de dernière modification
Expires : date d’expiration (moins flexible, hérité de HTTP/1.0)

Exemple concret

Pour des assets statiques (polices, images, CSS/JS versionnés), une configuration optimale ressemble à ceci :

Cache-Control: public, max-age=31536000, immutable

Cette ligne indique au navigateur de conserver le fichier pendant 1 an sans même vérifier auprès du serveur. Résultat : zéro requête réseau pour ces ressources lors des visites suivantes.

Pour du contenu HTML dynamique, on préfère :

Cache-Control: no-cache, must-revalidate
ETag: "a1b2c3d4"

Le navigateur vérifie à chaque fois si le contenu a changé, mais ne retélécharge que si nécessaire.

Les Service Workers : le contrôle total côté client

Un proxy entre le navigateur et le réseau

Un Service Worker est un script JavaScript qui s’installe dans le navigateur et intercepte toutes les requêtes réseau. Contrairement au cache HTTP, il vous permet de définir une logique métier personnalisée.

Les stratégies courantes

Stratégie	Principe	Cas d’usage
Cache First	Sert le cache, puis met à jour en arrière-plan	Assets statiques, images
Network First	Tente le réseau, cache en fallback	Contenu API, données temps réel
Stale While Revalidate	Sert le cache immédiatement, met à jour en parallèle	Pages de contenu, catalogues
Cache Only	Uniquement le cache	Ressources offline critiques

La stratégie Stale While Revalidate offre le meilleur compromis : l’utilisateur voit instantanément le contenu en cache pendant que la version fraîche se télécharge silencieusement. C’est celle que nous recommandons le plus souvent chez Lueur Externe pour les sites e-commerce Prestashop et WordPress.

Chiffres à retenir

Un Service Worker bien configuré peut :

Réduire le Time to Interactive de 40 à 60 % sur les visites récurrentes
Économiser jusqu’à 80 % de bande passante pour les utilisateurs réguliers
Permettre un affichage en moins de 1 seconde même sur réseau 3G

Combiner cache HTTP et Service Workers : la stratégie gagnante

Les deux mécanismes ne sont pas concurrents, ils sont complémentaires :

Le cache HTTP gère les ressources statiques versionnées avec des durées longues
Le Service Worker orchestre la logique fine : fallback offline, mise à jour en arrière-plan, pré-chargement des pages suivantes
Les deux ensemble créent une couche de cache à deux niveaux quasi imbattable

Concrètement, le navigateur vérifie d’abord le Service Worker, qui lui-même peut s’appuyer sur le cache HTTP. Cette architecture en cascade garantit des performances optimales dans tous les scénarios.

Erreur fréquente à éviter

Ne configurez jamais un Cache-Control: max-age long sur vos fichiers HTML. Si votre page HTML est mise en cache pendant 1 an, le navigateur ne chargera même pas la nouvelle version de votre Service Worker. Résultat : vos utilisateurs restent bloqués sur une version obsolète sans le savoir.

Conclusion : la vitesse est un investissement rentable

La combinaison cache HTTP + Service Workers est aujourd’hui le standard pour tout site qui vise l’excellence en performance web. Chaque milliseconde gagnée se traduit par un meilleur taux de conversion, un meilleur référencement Google et une expérience utilisateur supérieure.

Chez Lueur Externe, agence web experte basée dans les Alpes-Maritimes depuis 2003, nous auditons et optimisons les stratégies de mise en cache de nos clients pour des résultats mesurables. Que vous soyez sur Prestashop, WordPress ou une solution sur mesure, nous mettons en place l’architecture de cache adaptée à votre contexte.

Votre site est trop lent ? Contactez Lueur Externe pour un audit performance complet et des résultats concrets.