Quelle est la durée de vie du cache dun navigateur ?

Quelle est la durée de vie du cache dun navigateur ?

quelle est la durée de vie du cache dun navigateur influence directement la vitesse de chargement et la disponibilité des fichiers enregistrés localement. Une mauvaise configuration entraîne des ressources obsolètes ou des suppressions automatiques dans le stockage du navigateur. Comprendre le fonctionnement du cache aide à éviter des problèmes de performance sur un site web.

Quelle est la durée de vie réelle du cache d'un navigateur ?

La durée de vie du cache dun navigateur nest pas une valeur universelle mais dépend principalement des instructions envoyées par le serveur web. Il peut sagir de quelques minutes pour un fichier texte ou dune année entière pour une image statique. En labsence de directives explicites, le navigateur applique ses propres algorithmes pour estimer la fraîcheur du contenu.

Pour être honnête, jai souvent vu des développeurs sarracher les cheveux parce quun site ne se mettait pas à jour chez leur client. Cest frustrant. Dans la réalité, lutilisation du cache permet de réduire significativement le temps de chargement des pages lors des visites suivantes, car ^[1] le navigateur na pas besoin de télécharger à nouveau les mêmes fichiers CSS ou JavaScript. Mais il existe pourtant un piège redoutable que 70% des développeurs ignorent lors de la mise en place dun cache longue durée - je vous en reparlerai dans la section sur le Cache Busting.

Les en-têtes HTTP : les verrous de la mémoire

Cest le serveur qui dicte sa loi au navigateur via des en-têtes HTTP spécifiques. Le plus moderne et le plus puissant est sans aucun doute paramétrer cache-control max-age, qui permet de définir une durée précise en secondes via la directive max-age.

La directive Cache-Control et le max-age

La directive max-age indique au navigateur combien de temps dure le cache navigateur pendant lequel une ressource est considérée comme fraîche. Les actifs immuables, comme les logos ou les bibliothèques de scripts, sont souvent mis en cache pour une durée de 1 an, soit 31.536.000 secondes. Cest ^[2] le maximum recommandé par la plupart des standards web pour garantir une performance optimale sans risquer de saturer les politiques de stockage.

Initialement, je pensais que mettre un cache très long était toujours la meilleure solution pour la vitesse. Quelle erreur. Jai vite compris - après avoir bloqué une mise à jour critique pendant 48 heures - que la gestion du cache est un équilibre subtil entre performance et fraîcheur. Si vous définissez un délai trop long sans stratégie de renommage de fichiers, vos utilisateurs resteront bloqués sur une version obsolète.

L'en-tête Expires : la vieille école

Len-tête Expires est lancêtre de Cache-Control. Il définit une date et une heure absolues après lesquelles la ressource nest plus valide. Bien que toujours utilisé pour la compatibilité avec les systèmes plus anciens, il présente un défaut majeur : il repose sur la synchronisation parfaite de lhorloge du serveur et de celle de lutilisateur. Si lordinateur de votre visiteur retarde, le expiration cache navigateur peut se comporter de manière imprévisible.

Pourquoi le cache ne dure-t-il pas indéfiniment ?

Même si vous paramétrez un cache pour dix ans, il ne restera probablement pas aussi longtemps sur lappareil de lutilisateur. Les navigateurs allouent généralement environ 10% de lespace disque disponible au stockage du cache. Lorsque ^[3] cette limite est atteinte, le navigateur commence à supprimer les fichiers les plus anciens ou les moins consultés pour faire de la place aux nouveaux.

Le ménage se fait tout seul. Rarement ai-je vu un cache survivre à un nettoyage de printemps automatique de Chrome ou Safari quand lespace disque commence à manquer sur un smartphone. La durée de vie cache http théorique rencontre alors la réalité physique du stockage. Sur mobile, la volatilité est encore plus grande car les systèmes dexploitation mobiles sont impitoyables avec les données temporaires pour préserver la mémoire flash.

Le piège du Cache Zombie et le Cache Busting

Cest ici que se trouve le piège que jévoquais plus haut : le cache zombie. Si vous mettez un cache dun an sur un fichier CSS sans changer son nom, vos modifications resteront invisibles pour lutilisateur tant que le délai ne sera pas écoulé. Cest un cauchemar pour le support technique.

La solution sappelle le Cache Busting. Au lieu dappeler votre fichier style.css, vous le nommez style.v2.css ou vous ajoutez une empreinte numérique (hash) à la fin. Pour le navigateur, il sagit dune nouvelle ressource, ce qui force le téléchargement immédiat. (Cela ma sauvé la mise plus dune fois lors de déploiements durgence). Cest la seule façon sécurisée de comment modifier durée cache site web en combinant des durées de cache très longues avec la possibilité de mettre à jour son site instantanément.

Durées de mise en cache recommandées par type de fichier

Fichiers HTML

1. Un cache trop long empêche l'utilisateur de voir les nouveaux contenus ou les correctifs
2. 0 à 600 secondes (maximum 10 minutes)
3. C'est le point d'entrée du site; il doit être frais pour refléter les changements de structure

Images et Polices (Assets)

1. Utiliser impérativement des noms de fichiers uniques (versioning) pour chaque mise à jour
2. 1 an (31.536.000 secondes)
3. Ces fichiers changent rarement; le cache long améliore drastiquement la vitesse

Scripts JS et Styles CSS

1. Recommandé uniquement si vous maîtrisez le cache busting via votre outil de build
2. 1 mois à 1 an
3. Poids souvent important impactant le rendu visuel de la page (LCP)

Le dilemme de Lucas : Le logo fantôme

Lucas, développeur freelance à Lyon, vient de terminer le site vitrine d'un client exigeant. Pour optimiser les performances, il configure un cache d'un an sur toutes les images. Le client valide tout, mais demande au dernier moment de changer la couleur du logo.

Lucas télécharge le nouveau logo avec le même nom de fichier sur le serveur. Problème : son client voit toujours l'ancienne version, tout comme 90% des visiteurs déjà venus. Lucas essaie d'expliquer au client comment vider son cache, mais celui-ci est perdu et s'agace.

Après une heure de stress, Lucas réalise son erreur de débutant. Il renomme le fichier logo-v2.png et met à jour le code. Le changement est instantané pour tout le monde.

Cette erreur lui a appris qu'un cache long est une arme à double tranchant. Désormais, Lucas utilise systématiquement des suffixes de version, ce qui lui permet de garder un score de performance élevé tout en restant flexible.