Cache navigateur

Le cache navigateur est un espace de stockage local temporaire sur l'appareil d'un utilisateur, où le navigateur conserve des copies des fichiers déjà téléchargés, afin de ne pas devoir les retélécharger au chargement suivant.

Qu'est-ce que le cache navigateur ?

Chaque navigateur moderne (Chrome, Firefox, Safari, Edge) stocke des copies des fichiers qu'il télécharge, documents HTML, feuilles de styles CSS, scripts JavaScript, images, polices et autres ressources statiques, dans un cache local sur l'appareil du visiteur. Plutôt que de retélécharger chaque fichier à chaque chargement de page, le navigateur les lit directement depuis le disque ou la mémoire, ce qui réduit le temps de chargement, la consommation de bande passante et la charge sur le serveur d'origine. Les règles qui déterminent ce qui est stocké, et pour combien de temps, proviennent des en-têtes HTTP envoyés par le serveur.

Comment fonctionne la mise en cache navigateur

Lorsqu'un navigateur demande une ressource, la réponse du serveur inclut des en-têtes de cache qui indiquent s'il peut réutiliser ce fichier sans le redemander, et pendant combien de temps. Les deux en-têtes les plus importants sont Cache-Control et ETag :

• Cache-Control: max-age=31536000 indique au navigateur de réutiliser le fichier pendant un an sans recontacter le serveur.
• Cache-Control: no-cache force le navigateur à revalider auprès du serveur avant d'utiliser une copie en cache.
• ETag est une empreinte du contenu du fichier : s'il n'a pas changé, le serveur répond avec un léger 304 Not Modified plutôt que de renvoyer le fichier entier.

Un en-tête de réponse typique ressemble à ceci :

Types de cache et directives

• Cache privé : stocké uniquement dans le navigateur du visiteur.
• Cache partagé ou proxy : stocké sur un intermédiaire comme un serveur périphérique de CDN ou un proxy de FAI, partagé entre plusieurs visiteurs.
• Cache mémoire : conservé en RAM pour la session de navigation en cours, effacé à la fermeture de l'onglet ou du navigateur.
• Cache disque : persisté sur le stockage de l'appareil d'une session à l'autre, jusqu'à expiration ou effacement manuel par l'utilisateur.

Parmi les directives courantes : no-store (ne jamais mettre en cache), must-revalidate, immutable (le fichier ne changera jamais à cette URL, souvent utilisé avec un nom de fichier haché) et stale-while-revalidate (servir la copie en cache instantanément tout en récupérant une version fraîche en arrière-plan).

Cache navigateur vs cache CDN

Bonnes pratiques et pièges courants

Utilisez des valeurs max-age longues avec immutable sur les ressources statiques versionnées (fichiers avec un hash dans leur nom, comme app.3f2a1c.js), car un nouveau déploiement livre simplement un nouveau nom de fichier plutôt que d'invalider un cache. Gardez le HTML non mis en cache ou avec une durée de vie courte (no-cache) pour que les utilisateurs reçoivent toujours le dernier balisage. Une erreur fréquente consiste à mettre en cache une page HTML de façon trop agressive, ce qui sert ensuite un contenu obsolète ou des liens cassés après un déploiement. Une autre erreur consiste à oublier de changer le nom de fichier ou la chaîne de requête après avoir modifié un CSS ou un JS mis en cache, ce qui laisse les visiteurs sur une ancienne version jusqu'à expiration du cache.

Cache et Core Web Vitals

Une politique de cache efficace améliore directement le Largest Contentful Paint et le Time to First Byte lors des visites suivantes, puisque le navigateur évite entièrement l'aller-retour réseau pour les ressources déjà en cache. Google recommande lui-même une stratégie de mise en cache dans le cadre de l'optimisation de la vitesse de page, ce qui influence à son tour les scores Core Web Vitals et, indirectement, les signaux de classement liés à l'expérience de page.

Le cache navigateur chez BeBranded

Nous configurons les en-têtes de cache dès la construction de chaque projet de site web et d'application, en équilibrant des chargements rapides pour les visiteurs récurrents avec la capacité de déployer des mises à jour sans rester bloqué sur des ressources obsolètes.