Le web caching ou le HTTP Caching ou mieux la CDN(Content Delivery Network)

Un bon developpeur et surtout un developpeur web doit savoir et comprendre le web et son fonctionnement de bout en bout d'ailleur comme tout bon informaticien 2.0.

Qui ne s'est jamais plein quand il n'arrive pas à telecharger rapidement une video sur youtube, facebook, whatsapp etc..? qui n'est jamais frustré quand il ouvre un site web parfois la page se charge sans les images ou les video associées à cette page, pas à cause de la connession internet mais à cause peut etre d'une grande quantité de persones qui, à ce moment precis, sont eux aussi entrain de demander la meme page et donc les memes images et donc les memes video etc..

Voilà d'ou nait la necessité du web caching, donc du HTTP cahing c'est à dire trouver un mechanisme pour memoriser certains contenus qui ne changent pas le plus souvent de manière à rapidement les retourner au navigateur sans faire appelle au serveur ainsi, diminuer la charge et le travail du serveur car si un serveur doit recevoir des milliers voir des millions de requetes par secondes, il faut bien des mechanismes en amont pour le faire traiter seulement les requetes qui changent donc les contenus dynamiques. La technologie le plus utilisées pour faire du web caching c'est à dire mettre en cache/mémoire certaines resources du site web qui ne change presque jamais par exemple les images, les fichiers javascript, json,  meme les pages statiques HTML, les fichiers css etc.. c'est le Content delivery Network ou mieux CDN, un CDN c'est un réseau de machine, donc de serveur aynat pour unique but, de sauveguarder les contenus statiques des sites web dans l'optique de le retourner à l'utilisateur sans jamais arrivé au serveur web originale ou se trouve le site web en question, les CDN sont globalement repartit sur les datacenter partout dans le monde comem en image suivante, quand un utilisateur demande une page web pour la première fois à travers sont navigateur, si la app web est bien projecté et utilise les CDN pour le caching, au lieu que la requete va jusqu'au serveur web pour recuperer des contenus statiques dejà telechargé par d'autres utilisateurs auparvent, c'est la CDN qui retourne le contenu statique au navigateur de l'utilisateur ainsi la page est rapidement servit sans gros retard. c'est meme la première technique pour optimiser les performances d'un site web.

En image 1, un "WEB Cache" c'est quelque chose entre le client (navigateur) et le serveur web, qui est aux aguets de tous les traffics HTTP entre le client et le serveur, les analyse et memorise ceux qui ne changent pas de manière à rapidement les retourner au navigateur sans arriver jusqu'au serveur ainsi faciliter et augmenter la rapidité de reponse du serveur.

En image 2 vous avez tous les acteurs qu'on retrouve dans la web cache:

Client=> ça peut etre le navigateur ou toute application qui demande une resource(image, video, fichier, page html, css, javascript etc..) ou du contenu sur un serveur.

Origin Server => le serveur qui detient la resource que le client recherche (le serveur ou vous en tant que developpeur avez deployé votre site web).

Stale Content => c'est du contenu memorisé mais dejà expiré.

Fresh Content => contenu présent en memoire (cache). mais pas encore expiré.

Cache Validation=> le processus qui consiste à contacter le server pour savoir s'il y a une mise à jour pour une resource donnée present en cache.

Cache Invalidation => Processus qui elimite toutes les reources expirées presentes dans la memoire.

Web Cache => c'est la CDN

Voici les endroits ou il est possible de mémoriser les resources donc faire du caching:

le cache du navigateur (Browser cache) => le cache du navigateur sert pour memoriser des contenus que le navigateur juge ne pas faire une requete au serveur pour la recuperer, par exemple quand vous faite un click sur le bouton "retour en arrière" la fleche en haut à gauche là, le navigateur ne va pas quand meme refaire la requete sur le serveur pour recuperer tout son contenu.. il le prend dans sa cache.

La cache d'un serveur proxy (Proxy Cache)  ou CDN=> en image 3, vous pouvez avoir une idée du serveur Proxy en marche, comme son nom l'indique c'est un serveur qui fait du trait d'union entre le vrai serveur web et le navigateur et son role c'est de filtrer les requetes et agir en consequence, en fait ce type de serveur proxy se trouve le plus souvent chez le fournisseur d'accès à internet (ISP dans l'image), donc les fournisseurs disposent eux meme de leur propre mechanisme pour "cacher(memoriser)" certain contenu sans faire la requetes vers le serveur d'origine, car n'oubliez pas, plus l'utilisateur n'otient pas rapidement un contenu, plus il est frustré plus il peut abandonner le site et le concepteur du site peut abandonner l'hebergeur qui lui meme peut abandonner le fournisseur d'accès à internet.. c'est du capitalisme et du buisness.

Les reverse Proxy  CDN => ce sont toujours, des serveurs intermediaires, mais plus proche du serveur d'origine, ici c'est un serveur present chez votre hebergeur, en image 4 vous avez le positionement d'un reverse proxy, son role est de reduire la quantité de requetes destinées au serveur d'origine, le proxy serveur chez le fournisseur internet ISP est fait pour diminuer le traffic donc la largeur de bande en terme technique, mais chez l'hebergeur, le reverse proxy lui diminuit la charge du serveur en repondant à sa place pour certaines requetes.

Comment fonctionne donc le mechanisme de caching?

Quand le serveur web repond à une requete HTTP, il insert dans l'entete de cette reponse (ce qu'on appelle HTTP HEADER en anglais), des informations qui indiquent aux differents acteurs durant le parcourt s'il est faut memoriser la resource contenu dans sa reponse HTTP. En image 5, si vous faite F12 dans n'importe quel page web vous avez un ensemble d'information sur ce qui se passe réellement derriere la page (F12 est utilisé en developpement frontend pour debboguer), dans l'etiquette "Network" (donc reseau en français), vous pouvez voir les echanges HTTP fait entre votre navigateur et les reponses du serveur, du moins tout ce qui est contenu dans le HTTP, si vous remarquez dans la requete pour une image par exemple vous verrez dans l'entete HTTP donc le HEADER des parametres comme : Expires(date d'expiration), Pragma, Cache-control, private etc.. tous ces parametres servent pour indiquer au navigateur mais aussi au proxy serveur toutes les informations sur la memorisation de la resource traité dans la requetes HTTP.

Les framework et language web comme PHP, java, ou c# dispose de leur propre mechanisme pour "Cacher" ou non certains contenu, par exemple en php, on peut indiquer au serveur dans un fichier .htaccess ce que le serveur peut "Cacher" en écrivant un texte comme celui ci dans ce fichier:

# Cache any images for one year

<filesMatch ".(png|jpg|jpeg|gif)$">

Header set Cache-Control "max-age=31536000, public"

</filesMatch>

# Cache any CSS and JS files for a month

<filesMatch ".(css|js)$">

Header set Cache-Control "max-age=2628000, public"

</filesMatch>

ce texte parle de lui meme, on demande au serveur que dans sa reponse, il doit indiquer aux acteur de memoriser toutes les resources de type image ".(png|jpg|jpeg|gif)" pendant 1 an et tous les fichier css et js ".(css|js)" de les memoriser pour 1 mois. Attention ceci veut dire que si par exemple vous mettez à jour des images, ou du code javascript ou css, vos utilisateurs ne verront pas cette mise à jour tant que les dates d'exprirations ne sont pas passés. 

J'espers que cela vous sera utile, si oui partagez et commentez.

Bon coding

---

---

Share

Comments (2)

Leave A Comment

Your Name:
Comment: