Qu'est-ce que la mise en cache ?

La mise en cache consiste à stocker à court terme des fichiers, tels que des images et des pages Web, afin que les mêmes fichiers ne doivent pas être chargés à chaque fois qu'une page est affichée. Cela accélère généralement l'expérience de l'utilisateur, car cela réduit la quantité de données à charger. La mise en cache peut se faire à plusieurs endroits. Par exemple, votre navigateur web peut mettre en cache des fichiers pour ne pas avoir à les télécharger à nouveau sur une page que vous avez déjà visitée.

Un réseau de diffusion de contenu (CDN) tel que Cloudflare mettra également en cache des fichiers à plus grande échelle, de sorte qu'après l'accès à un fichier pour le compte d'un utilisateur, le même fichier peut être stocké sur ses serveurs pour d'autres utilisateurs également, sans avoir à faire de demandes supplémentaires au serveur d'origine. En mettant en cache de cette manière, les CDN peuvent réduire le temps nécessaire pour fournir un fichier en cache à l'utilisateur.

Mise en cache, CloudFlare et CSS

L'un des problèmes potentiels de la mise en cache est qu'elle peut conduire à une situation où des modifications peuvent être apportées à un site sans qu'elles soient immédiatement visibles pour les visiteurs du site. Cela peut se produire, que le site ait été mis en cache par un navigateur Web ou par un serveur.

Bien que des instructions soient normalement en place pour éviter que la mise en cache ne devienne problématique de cette manière, cela peut être un problème particulier avec les feuilles de style en cascade (CSS). Si vous utilisez CloudFlare pour votre site, il mettra votre CSS en cache pendant une longue période. Cela signifie que si vous apportez des modifications à votre CSS, il faudra un certain temps avant de les voir sur le site en direct.

Solution pour la mise en cache du CSS

Ce problème peut être résolu en modifiant la référence à votre fichier CSS dans le code HTML de la page en question de manière à ajouter une nouvelle chaîne d'interrogation - par exemple en remplaçant "exemple.css" par "exemple.css?v=2.2.2". Les CDN et les navigateurs Web se comportent alors comme s'il s'agissait d'un nouveau fichier qu'ils n'ont jamais téléchargé auparavant, même si c'est le cas.

Dans l'exemple donné, CloudFlare mettra en attente son hypothèse habituelle selon laquelle "example.css" est le même fichier que celui qu'il a toujours utilisé, et effectuera une toute nouvelle requête au serveur d'origine pour obtenir la dernière copie du fichier.

Le serveur d'origine ignorera la chaîne de requête "?v=2.2.2", mais fournira néanmoins la dernière version du fichier. Lors de la prochaine mise à jour de " exemple.css ", cette chaîne peut être remplacée par " exemple.css?v=2.2.3 " - ou par tout autre nombre préféré par l'éditeur - afin que CloudFlare obtienne à nouveau la dernière version.

Vous trouverez plus de détails sur cette stratégie ici.