Introduction à la mise en cache HTTP
Je suis sûr que vous avez remarqué que lorsque vous ouvrez un site Web pour la première fois, le chargement prend un certain temps. Cependant, lorsque vous l'ouvrez à nouveau après un certain temps, le site se verrouille beaucoup plus rapidement. Imaginez si un site prenait le même temps pour se charger à chaque fois, à quel point la navigation serait lente. Eh bien, tout cela est dû à une idée astucieuse appelée HTTP Caching. Jetons un coup d'œil à ce que c'est, comment cela fonctionne et comment il est utilisé pour faire de la navigation Internet une expérience plus rapide.
Qu'est-ce que la mise en cache HTTP?
La mise en cache HTTP est l'idée de stocker des données couramment ou fréquemment utilisées à un endroit auquel l'accès est rapide. Avec cela, il y a de très bonnes chances que la plupart des données nécessaires soient accessibles beaucoup plus rapidement car l'ordinateur n'a pas à aller trop loin pour les obtenir.
Dans le cas de la navigation Web, la mise en cache est envisagée lorsque votre navigateur Web tel que Chrome stocke une copie d'un site Web ou d'une application Web sur le stockage local. Une fois qu'un site Web est mis en cache, un navigateur Web n'aura pas à retélécharger toutes les données du serveur, ce qui rendra la navigation beaucoup plus rapide.
Par exemple, une fois qu'un fichier CSS d'un site Web est téléchargé, un navigateur n'a pas à le télécharger pour chaque page de la session. La même chose peut être dite pour de nombreux fichiers JavaScript, images (comme le logo du site et les icônes de médias sociaux) et même certains contenus dynamiques. La mise en cache est activée à l'aide des en-têtes de cache.
En-têtes de cache dans HTTP
La mise en cache HTTP a deux en-têtes de cache principaux, le premier est appelé «Cache-Control» et le second est appelé «Expire». Jetons un coup d'œil aux deux:
Cache-Control
Vous pouvez considérer Cache-Control comme un commutateur pour activer la mise en cache dans le navigateur de l'utilisateur. Une fois cet en-tête ajouté, il active la mise en cache pour tous les navigateurs Web pris en charge. Si cet en-tête n'est pas présent, aucun navigateur ne gardera un cache du contenu de la page Web même s'il prend en charge la mise en cache.
Le contrôle du cache a deux types de paramètres de confidentialité, le premier est public et le second est privé.
Dans le cas de Public, les ressources peuvent être mises en cache par tout proxy intermédiaire tel que Content Delivery Networks (CDN).
Un en-tête Cache-Control avec réponse privée indiquera au navigateur que la mise en cache ne sera effectuée que pour un seul utilisateur et non pour un proxy intermédiaire.
La valeur «max-age» dans l'en-tête Cache-Control définit la durée pendant laquelle le contenu sera mis en cache. Ce temps est en secondes.
Cache-Control:public, max-age=31536000
Expire
L'en-tête Expires est utilisé lorsque Cache-Control est présent dans le code. Il s'agit d'un simple en-tête de cache HTTP qui définit une date à partir de laquelle toute ressource de cache est considérée comme non valide. Une fois le cache expiré et l'utilisateur charge le site Web, un navigateur Web demandera simplement à nouveau tout le contenu de la page.
Demandes conditionnelles
Les en-têtes mentionnés ci-dessus indiquent simplement au navigateur quand récupérer les données du serveur Web. Les demandes conditionnelles, en revanche, indiquent au navigateur comment les récupérer. Les demandes conditionnelles indiquent à un navigateur comment il peut demander au serveur si la copie des données dans le cache est obsolète.
Dans ce processus, le navigateur envoie des données sur les ressources qu'il a mises en cache dans sa mémoire et après avoir lu ces données, le serveur décide si les données sont obsolètes ou non.
Demandes basées sur le temps
Dans les demandes temporelles, il est vérifié si la ressource demandée a été modifiée ou non sur le serveur. Si la copie mise en cache dans le navigateur est la dernière, le serveur renverra le code 304.
Pour définir la demande conditionnelle sur la base du temps, vous pouvez utiliser «Dernière modification» dans l'en-tête de réponse.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Basé sur le contenu
Dans les demandes basées sur le contenu, le hachage MD5 (ou toute autre option viable) est vérifié pour la copie du serveur et la copie du cache. Cela indique si les données sont identiques ou non, dans le cas où les données sont différentes, la somme de contrôle MD5 ne correspondra pas et le serveur enverra une nouvelle copie des ressources.
Cela se fait via «ETag» dans l'en-tête. La valeur de celui-ci est le condensé des ressources.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Visibilité
Presque tous les navigateurs modernes incluent des outils liés au développement qui vous permettent de vérifier les ressources, le code source et d'autres aspects d'une page Web. Parmi eux, vous pouvez trouver un outil pour voir les en-têtes retournés par n'importe quelle application.
Sur Google Chrome, pour voir ces en-têtes, vous pouvez cliquer avec le bouton droit sur n'importe quelle zone vide d'une page Web et cliquer sur «Inspecter» ou appuyer sur CTRL + MAJ + I pour ouvrir DevTools. Dans cet outil, cliquez sur l'onglet Réseau et appuyez sur CRTL + R pour recharger pour voir tous les en-têtes de la page.
Cas d'utilisation dans la mise en cache HTTP
Voici quelques cas d'utilisation de la mise en cache HTTP qui sont les suivants:
Pour les actifs statiques
Pour les actifs statiques d'une page tels que les images, les fichiers JS et tous les fichiers CSS, vous pouvez opter pour un cache agressif du contenu. Ne pas avoir à charger ces fichiers entraînera une amélioration impressionnante des performances. Pour ce cas d'utilisation, optez pour l'en-tête Cache-Control avec la valeur max-age de plus d'un mois ou même d'un an.
Cache-Control:public; max-age=31536000
Pour les contenus dynamiques
Dans le cas du contenu dynamique d'une page, vous devrez vous demander quels fichiers le navigateur doit mettre en cache et pendant combien de temps. Dans le cas où le contenu sera modifié fréquemment, vous devrez vous assurer que la durée que vous choisissez pour la mise en cache ne causera aucun problème pour l'utilisateur.
Mise en cache de contenu privé
Comme nous l'avons vu dans la section Cache-Control, dans le cas où le contenu de la page est de nature privée, vous pouvez l'empêcher d'être mis en cache par des mandataires intermédiaires tels que les CDN en ajoutant «Cache-Control: private» dans l'en-tête.
Une autre approche plus sûre consiste à ne mettre en cache aucun contenu privé.
Implémentation de la mise en cache HTTP
Maintenant que vous savez ce qu'est la mise en cache HTTP et comment elle fonctionne, voyons comment vous pouvez l'implémenter sur votre site Web. L'implémentation de la mise en cache HTTP est un peu différente pour différents types de serveurs. Dans notre cas, voyons comment implémenter la mise en cache via le fichier .htaccess.
Pour activer la mise en cache sur site, vous pouvez ajouter les en-têtes dans le fichier .htaccess sur votre serveur par exemple:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
Ce qui précède mettra en cache tous les fichiers PDF, flv, jpg.webp et autres mentionnés dans le «File Match» pendant un an.
Conclusion
La mise en cache HTTP est l'une des astuces les plus importantes qui font de la navigation sur votre site une expérience plus rapide pour vos visiteurs et maintenant que vous pouvez voir comment cela fonctionne, vous pouvez l'implémenter sur vos sites et applications Web pour les rendre plus rapides pour vos utilisateurs et pour économiser la bande passante de votre serveur.
Articles recommandés
Cela a été un guide pour la mise en cache HTTP. Ici, nous avons discuté de l'implémentation, des requêtes conditionnelles, de l'en-tête du cache et des cas d'utilisation de HTTP. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Apprenez ce qu'est le HTML
- Comment installer Github?
- Qu'est-ce que MapReduce dans Hadoop?
- Guide du débutant pour les commandes de nœuds
- Cookies HTTP | Sécurité