C’est une réalité, chaque jour nous vidons notre cache et nous expliquons autour de nous comment le faire. Parfois ça fonctionne du premier coup, parfois c’est moins évident, il faut changer de poste, de navigateur d’onglet …
Bref le cache nous joue parfois des tours. Voici donc quelques conseils pour casser le cache : Cachebreak !
Le cache qu’est-ce que c’est ?
Le cache, c’est une forme de mémoire qui permet de stocker temporairement les fichiers d’un serveur en local pour ne pas avoir à les re-télécharger par la suite.
Concrètement, si je me connecte pour la première fois à un site, il téléchargera par exemple le fichier de styles et cette requête serveur prendra du temps. Mais suite à cette première connexion de « mise en cache », le fichier de style sera directement appelé en local (depuis le disque dur de l’ordinateur).
Le chargement sera donc plus rapide et le serveur distant sera beaucoup moins sollicité. Le cache est donc notre ami !
Pourquoi et comment purger son cache ?
Purger le cache de son navigateur permet de recharger les fichiers depuis le serveur. Si il y a eu des modifications sur les fichiers et que ces fichiers n’ont pas changé de nom ; alors il faudra purger son cache pour voir apparaître les modifications. Sinon, une version plus ancienne du fichier sera appelée en local.
Petit rappel pour recharger une page en purgeant le cache avec des raccourcis clavier :
- Edge : Ctrl + F5
- Internet Explorer : Ctrl + F5 ou Alt + X
- Firefox (Windows et Linux) : Ctrl + F5 ou Maj + Ctrl + R
- Firefox (Mac OS) : Maj + ⌘ + R
- Chrome (Windows) : Ctrl + F5 ou Maj + F5 ou Maj + Ctrl + R
- Chrome (Linux) : Maj + Ctrl + R
- Chrome (Mac OS) : ⌘ + Maj + R
- Safari : Pas de raccourci 🙁 Allez dans Safari > Vider le cache
Sur mobile, le moyen le plus simple consiste à ouvrir la page dans un onglet de navigation privée.
Cachebreak en PHP
Pour les développeurs frontend qui souhaitent que le style ne se mette jamais en cache, il est possible de rajouter un paramètre toujours différent dans la déclaration du fichier de style. Cela aura pour effet de leurrer le navigateur en lui faisant croire que le fichier n’est pas le même.
<link rel="stylesheet" type="text/css" media="all" href="all.css?=1584529395 "/>On utilise php pour concatener un timestamp à la suite du fichier :
<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'all.css?='.time(); ?>"/>L’inconvéniant de cette méthode est qu’on ne profite plus du tout des avantages du cache : plus grande sollicitation côté serveur et temps de chargement plus long côté client.
Cachebreak en dur
C’est la méthode qu’on préfère utiliser. Le développeur concaténera un nouveau paramètre à la suite de son de fichier de style à chaque modification (en le versionnant). Ainsi le fichier à jour sera toujours téléchargé la première fois puis mis en cache jusqu’à la prochaine modification :
<link rel="stylesheet" type="text/css" media="all" href="all.css?ver=1.2"/>On utilise php pour concatener manuellement une version à la suite du fichier :
<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'all.css?ver='.'1.2'; ?>"/>Et le cache de Magento ? De WordPress ?
Magento 1 propose la fusion des fichiers css : ils sont tous regroupés en un seul et sont nommés via un hash. Si cette option est activée sur Magento 1 (Système > Configuration > Développeur > Fusionner les CSS), il suffit de purger le cache des fichiers concaténés pour générer un nouveau chemin (Système > Gestion du cache > Effacer le cache Javascript / CSS)
Magento 2 permet de passer d’un mode développement sans mise en cache à un mode production avec concaténation et minification des css en un seul fichier. A savoir que Magento 2 s’appuie sur Less pour la génération des CSS.
Enfin WordPress nativement appelle simplement le fichier css tel qu’il est déclaré dans <head>. Mais couplé à un plugin tel WP Rocket, il minifiera et concaténera le code et le purgera à chaque mise à jour de contenu et/ou périodiquement.
Pour conclure, le cache navigateur ; même si parfois il agaçe ; est une puissante fonctionnalité des navigateurs pour économiser de la ressource.
A noter que le cache navigateur est le dernier maillon de la grande famille du cache, suivi par le cache CMS (Full Page Cache), le cache serveur (ReDis, Varnish) et enfin le cache DNS des opérateurs (qui se purge en redémarrant la box).