Comment gérer le cache de pages dynamiques via l’Edge Side Include
Ecrit par Mehdi Khocha
le
Introduction sur le cache web
Le cache, cette technologie qui peut faire peur aux premiers abords, n’a finalement rien de sorcier. Pour rappel, le cache permet de conserver une copie statique d’un ou plusieurs éléments pour économiser des ressources lors de leurs prochains chargements. De mauvaises performances sont néfastes tant pour le SEO que pour l’expérience utilisateur de vos internautes. Si votre site peine à charger dans des temps acceptables, jeter un coup d’œil au cache est généralement une bonne idée.
Si vous souhaitez vérifier si vos ressources sont en cache, vous pouvez aller sur https://www.webpagetest.org/ vous trouverez les ressources en cache dans l’onglet « Performance Review ». Ou sur Dareboost en mode comparaison première vs seconde visite.
En revanche il n’est pas possible de voir explicitement le cache dynamique car c’est le serveur qui s’en charge et il ne transmet pas cette information.
Types de caches
Le cache navigateur
Les caches les plus courants sont les caches navigateurs, votre navigateur préféré peut mettre en cache des éléments selon les règles fournies par le site web. En cas de ressources redondantes, celles-ci ne seront pas téléchargées à nouveau.
Le cache serveur et reverse proxy
Le cache serveur classique revient à faire une copie statique d’une page, ainsi si un nouvel internaute demande cette même page, le serveur enverra directement la copie statique. Économisant donc les ressources impliquées à la génération d’une page ainsi que le temps de chargement qui est si précieux lorsqu’on optimise les performances web.
Un serveur de reverse proxy va se placer entre le serveur et l’internaute pour fournir ces versions statiques sans même que la requête arrive sur le serveur.
Page statique vs dynamique
Une page dynamique diffère d’une page statique par sa manière d’être générée. La page statique sera fournie telle quelle à l’utilisateur alors que dans le cas d’une page dynamique, le serveur assemblera une page spécifique à chaque requête de l’utilisateur dans le but de personnaliser l’expérience de navigation.
Mais alors, que se passe-t-il si des éléments purement dynamiques doivent être mis en cache ? Les éléments dynamiques sont très courants et bloquent généralement les équipes techniques lorsqu’il s’agit de gérer le cache d’un site web. Il semble donc impossible d’archiver des copies et de les envoyer à la volée à un autre internaute.
Gérer le cache de pages dynamiques
Plusieurs méthodes sont utilisées pour gérer ce fameux cache dynamique avec pour chacun leurs avantages et inconvénients. Il sera alors important de faire le bon choix en fonction du projet.
Le cache Edge Side Include (ESI) pour gérer les éléments webs dynamiques
Entrons maintenant dans le vif du sujet avec la méthode la plus performante pour mettre en cache des pages web contenant des éléments dynamiques.
Fonctionnement de l’ESI
Le fonctionnement de l’ESI c’est globalement assez simple, il s’agit d’un format de marquage, pour indiquer au serveur ce qui peut être mis en cache, ou pas. Prenons cette page par exemple :
Les éléments en bleus sont dynamiques et faire une copie statique de cette page poserait rapidement des problèmes.
Nous allons donc marquer cette page pour indiquer au serveur de cache quels éléments pourront être réutilisés. Nous marquerons donc dans le code les éléments qui seront mis en cache sur les éléments blancs.
Avantages de l’Edge Side Include
L’avantage le plus notable est qu’il est désormais possible d’effectuer une mise en cache de la quasi-totalité des pages web. On diminue alors fortement la charge serveur et on constatera alors une augmentation des webperf, et ces économies font la différence lors de fort trafic.
Quelles technos utiliser pour l’ESI ?
Symphony et Varnish semblent être les technos les plus utilisées lorsque l’on souhaite mettre en place de l’edge side include, une documentation complète est disponible à ce sujet sur le site officiel. Mais ce sont surtout des acteurs privés qui proposent de prendre en charge cette mise en cache dans leur offre, on peut alors parler d’Akamai, Cloudflare et Fastly qui supportent cette technologie qui, par ailleurs, est complémentaire avec leurs produits respectifs.
Attention toutefois à l’ajax qui peut être utilisé comme alternative de l’ESI, ces technologies client side posent régulièrement des problèmes SEO et nous vous déconseillons de les utiliser.
Conclusion
En mai 2020, Google annonce l’arrivée de 3 nouveaux Core Web Vitals. Dans ces nouveaux critères, deux d’entre eux sont orientés webperf. Un LCP « Largest Contentful Paint » trop élevé, peut être réglé en optimisant uniquement le cache dans certaines situations.
Aujourd’hui plus que jamais notre attention est tellement sollicitée qu’une demi-seconde peut faire la différence entre une visite et un rebond. Les problématiques de webperf sont, certes, un critère de classement. Elles en sont d’autant plus un critère d’engagement et d’UX.
En optimisant correctement le cache navigateur et le cache serveur, il est possible de diminuer grandement les temps de chargement. Ces quelques secondes peuvent alors faire la différence lorsque l’on sait que 53% des visiteurs d’un site mobile quittent une page lorsqu’elle prend plus de 3s à charger.
Vos temps de chargement sont toujours trop bas malgré une bonne gestion du cache ? Jetez un coup d’œil à nos conseils pour améliorer votre temps de chargement.