Comment fonctionne le cache du navigateur ?

Le cache du navigateur est un mécanisme utilisé par les navigateurs pour stocker localement les ressources des pages Web. Cela ajoute des gains de performances, minimise la consommation de bande passante et crée globalement une expérience plus rapide. Dans cet article, nous expliquons comment fonctionne la mise en cache du navigateur et comment l'implémenter sur votre site Web.

Qu'est-ce que le cache du navigateur ?

Le cache est un composant logiciel ou matériel utilisé pour stocker temporairement des valeurs pour un accès futur plus rapide. Le cache du navigateur est une petite base de données de fichiers qui contient des ressources de pages Web téléchargées, telles que des images, des vidéos, CSS, Javascript, etc. L'idée de base sous-jacente est la suivante :

Le navigateur demande du contenu au serveur Web. Si le contenu n'est pas dans le cache du navigateur, il est récupéré directement à partir du serveur Web. Si le contenu était auparavant mis en cache, le navigateur contourne le serveur et charge le contenu directement depuis son cache.

Le contenu est considéré comme obsolète selon que le contenu mis en cache a expiré ou non. Frais, d'autre part, signifie que le contenu n'a pas dépassé sa date d'expiration et peut être servi directement à partir du cache du navigateur sans impliquer le serveur.

Le terme validation fait référence au contenu qui doit être vérifié par rapport à la version la plus récente que possède le serveur. Bref, pour déterminer si le contenu est obsolète ou non. L'invalidation se produit lorsque le contenu a été supprimé du cache avant la date d'expiration. Cela peut être forcé par le serveur, dans les cas où le contenu a changé, et le navigateur doit disposer de la version la plus récente afin de ne pas introduire de problèmes.

La mise en cache du navigateur peut être exploitée par les développeurs Web et les administrateurs grâce à l'utilisation d'en-têtes HTTP spécifiques. Ces en-têtes indiquent au navigateur Web quand mettre en cache une ressource, quand ne pas le faire et pendant combien de temps. L'utilisation d'en-têtes liés au cache HTTP peut être souvent frustrante car il y a un certain chevauchement avec les en-têtes dans les différentes réincarnations du protocole HTTP. Ajoutez à cela des éléments tels que l'étrange proxy Web entre les deux, les anciens navigateurs, les politiques de mise en cache et les implémentations conflictuelles (par exemple, différents plugins WordPress) et cela peut rapidement devenir un casse-tête.

En-têtes de mise en cache du navigateur

L'ensemble de règles définissant ce qui peut être mis en cache ou non et pendant combien de temps est appelé la politique de mise en cache. Ceci est mis en œuvre par le propriétaire du site Web grâce à l'utilisation d'en-têtes de réponse de mise en cache. Bien que cela puisse être réalisé de différentes manières, vous ne devriez probablement vous préoccuper que du contrôle du cache, au début.

Contrôle du cache

L'en-tête Cache-control a été introduit dans HTTP/1.1 et est considéré comme l'implémentation la plus moderne qui soit. Il existe plusieurs valeurs différentes que vous pouvez utiliser, selon la façon dont vous souhaitez que les navigateurs se comportent. Ce qui le rend assez polyvalent. Vous trouverez ci-dessous une liste de directives Cache-Control :

• Pas de cache
  Ordonne à votre navigateur Web de ne pas consulter le cache immédiatement, mais de valider le contenu par rapport au serveur. S'il est frais, il peut être servi à partir du cache.
• Pas de magasin
  Indique au navigateur de ne mettre en cache le contenu d'aucune façon. Il est principalement utilisé lorsqu'il s'agit de données sensibles ou de données qui changent fréquemment.
• Public
  Marque le contenu comme public, ce qui signifie qu'il peut être mis en cache par le navigateur et toute partie intermédiaire (comme les proxys, etc.).
• Privé
  Utilisé pour marquer le contenu comme privé, ce qui signifie qu'il ne peut être mis en cache que par le navigateur, et non par des proxys intermédiaires et autres. Il s'agit généralement de données relatives à l'utilisateur.
• Max-âge
  Max-age représente la durée maximale en secondes pendant laquelle un contenu peut rester dans le cache du navigateur avant que le client n'ait besoin de le revalider. Contrairement à l'en-tête Expires que nous verrons bientôt, max-age définit une valeur relative en secondes à partir du moment où le contenu a été mis en cache, et non une date d'expiration absolue.
• S-maxage
  Ceci est similaire à max-age mais il n'est utilisé que pour les caches intermédiaires.
• Doit-revalider
  Force le navigateur à revalider le contenu chaque fois qu'il en a besoin, au lieu de simplement le servir directement à partir du cache du navigateur.
  Ceci est pratique en cas d'interruption du réseau.
• Proxy-revalider
  Similaire à must-revalidate, mais s'applique uniquement aux caches intermédiaires.
• pas de transformation
  Ordonne au navigateur de ne pas transformer le contenu reçu du serveur de quelque manière que ce soit (généralement compression, etc.).

Etag

L'en-tête de réponse Etag est utilisé pour identifier une ressource spécifique. Chaque fois qu'une certaine ressource change, un nouvel Etag est généré. De cette façon, la bande passante est économisée, car le serveur Web n'a pas besoin de donner une réponse complète si l'Etag n'a pas changé. Par conséquent, l'en-tête Etag est activé par défaut sur Nginx et Apache, et les valeurs Etag sont générées automatiquement, vous n'avez donc rien à spécifier.

Hébergez votre site web avec Pressidium

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

Expire

Cela a été introduit dans HTTP/1.0 et définit une date précise dans le futur où le contenu sera considéré comme obsolète. Il s'agit en fait d'une date de péremption pour le contenu. Par exemple, Expire : jeu 25 mai 2017 12:30:00 GMT

pragmatique

Il s'agit d'un en-tête HTTP/1.0 quelque peu obsolète qui est principalement utilisé pour la rétrocompatibilité. Si vous insérez Pragma: no-cache , votre navigateur se comportera de la même manière que Cache-Control: no-cache .

Comment mettre en place une politique de mise en cache sur votre site Web

Il existe deux façons de mettre en œuvre une politique de mise en cache sur votre site Web. La première consiste à définir les en-têtes de réponse de mise en cache dans la configuration du serveur Web. La seconde est de le faire directement dans PHP. Vous trouverez ci-dessous des exemples des deux serveurs Web les plus populaires, Apache2 et Nginx :

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Comme vous pouvez le voir, c'est assez simple. Dans le premier exemple, nous utilisons la directive FileMatch d'apache2 pour faire correspondre un ensemble spécifique de types de fichiers (.ico, .pdf, etc.) et les rendre publics, avec un âge maximum de 84600 secondes. Dans la seconde, nous comparons à nouveau certains types de fichiers à l'aide de la directive d'emplacement de nginx et incluons un âge maximum de 365 jours. Nous les définissons également comme "publics" à l'aide de la clause add header.

PHP

Si vous souhaitez ajouter des en-têtes de réponse directement à votre code, utilisez simplement la commande header de PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Comment tester pour voir si ça marche

Vous pouvez facilement tester les règles de mise en cache de votre navigateur, en utilisant, par exemple, la console Web de Firefox ou les outils de développement de Chrome :

1. Cliquez sur l'icône hamburger en haut à droite.
2. Sélectionnez Plus d'outils > Outils de développement
3. Entrez votre URL dans la barre d'adresse et appuyez sur Entrée.

Vous devriez voir une liste de requêtes pendant le chargement de votre URL. Sélectionnez une ressource en cliquant dessus. Inspectez les en-têtes de réponse à droite, et en particulier le code d'état. Il imprime le code HTTP 200 mais indique entre parenthèses qu'il provient du cache mémoire.

Cela signifie que la ressource a été chargée automatiquement à partir du magasin de cache local, au lieu de la demander au serveur.

Dans les cas où vous avez une clause "must-revalidate" sur votre en-tête Cache-Control, le code d'état sera 304 (non modifié). Cela signifie que votre navigateur a revalidé la ressource par rapport au serveur et que le serveur a répondu que le contenu n'avait pas changé, il peut donc être servi à partir du cache du navigateur.

Continuez à désactiver le cache en cochant la case Désactiver le cache et en appuyant sur Recharger.

Dans ce cas, vous voyez que le code d'état est 200 sans aucune indication qu'il a utilisé le cache. Le navigateur a demandé la ressource au serveur Web, et le serveur Web a répondu en renvoyant une nouvelle copie.

Conclusion

La mise en cache du navigateur et les politiques de mise en cache peuvent devenir assez compliquées. Mais commencer à expérimenter avec Cache-Control comme nous l'avons démontré est simple. La plupart du temps, la mise en œuvre d'une politique de mise en cache « générique » pour les ressources statiques suffit à faire une différence dans les performances de votre site Web. Cependant, cela ajoute une couche supplémentaire de "souci" en plus de tant d'autres choses, et nous pensons que cela ne devrait pas être comme ça. Suivez-nous dans notre prochain article, où nous montrerons comment nous implémentons la mise en cache du navigateur dans Pressidium qui fait disparaître toutes ces inquiétudes.