Depuis plusieurs mois désormais Cloudflare propose une gestion de son cache beaucoup plus fine.
Grâce à cela il est possible de drastiquement améliorer les performances des sites, notamment pour les visiteurs anonymes.
On peut notamment gérer la politique de cache en fonction des cookies, de l'user agent ou encore de l'url consultée.
C'est en effet grâce à ces options que l'on peut par exemple décider de forcer la mise en cache d'un site pour tout visiteur anonyme, tout en bypassant ce dernier pour les utilisateurs authentifiés (rédacteurs par exemple, espace adhérent, etc).
Pour la plupart des sites "vitrines", c'est à dire sans interaction entre le visiteur et le site, cela apporte à la fois une bien meilleure réactivité du site, mais également permet de réduire drastiquement la consommation de ressources côté serveur.
ATTENTION : Il est impératif que votre site présente EXACTEMENT le même contenu à tous les visiteurs pour que ceci fonctionne parfaitement. Par exemple utiliser un theme responsive afin que visiteurs mobiles et fixe récupèrent exactement le même contenu ! Si vous souhaitez faire des distinctions il faut les faire via du JS/CSS côté navigateur du visiteur.
Je vais me baser sur un site sous Wordpress afin d'expliciter le mécanisme.
Ces principes peuvent bien évidemment s'appliquer à n'importe quel site / CMS, mais il faut les adapter aux spécificités de votre outil.
Concrètement il faut se rendre dans le menu Caching
puis Cache Rules
.
Comme vous pouvez le voir, c'est une option encore en béta, mais qui fonctionne déjà parfaitement.
L'idée principale va être d'exclure du cache les zones d'administration ainsi que les utilisateurs "authentifiés". Pour tous les autres, on va demander à cloudflare de tout mettre en cache (ce qu'il ne fait pas par défaut) et servir ce cache aux visiteurs.
Quand on va créer une rule
on va énumérer un certain nombre de règles qui vont déterminer si Cloudflare doit présenter le cache au visiteur ou si il doit lui renvoyer du contenu "frais" depuis le serveur d'origine.
Voici la rule que j'utilise sur la plupart des sites :
(http.host contains "xxx" and not http.cookie contains "wordpress_logged_in_" and not http.cookie contains "woocommerce_items_in_cart" and not http.cookie contains "woocommerce_cart_hash" and not http.cookie contains "comment_author_" and not http.cookie contains "comment_author_email_" and not http.request.uri.path contains "/wp-admin/" and not http.cookie contains "wp_sec_" and not http.request.uri.query contains "nocache" and not http.request.uri contains "wp-login.php" and not http.user_agent contains "WP Rocket/Preload" and not http.request.uri.path contains "feed")
On va reprendre tout ça par étape, à noter que j'utilise systématiquement le "connecteur logique" and
ou et
si vous êtes en Français.
http.host contains : ça c'est pour dire que le nom de domaine concerné doit inclure xxx, à remplacer par le nom de domaine de votre site.
not http.cookie contains : là je liste toute une série de cookie que je recherche chez le visiteur. Si un seul de ces cookies est présent la règle ne doit plus s'appliquer. Ces cookies identifient des utilisateurs authentifiés, des clients sur woocommerce qui ont des items dans leur panier ou encore si c'est quelqu'un qui a publié un commentaire.
not http.request.uri.path contains "/wp-admin/" : ici on précise à cloudflare ne pas mettre en cache les requêtes qui se passent dans le dossier wp-admin, on n'a pas vraiment envie le backoffice dans un cache public !
not http.request.uri contains "wp-login.php" : ne pas mettre en page l'url de login où vous risquez d'avoir des petits soucis d'authentification. A adapter dans le cas où vous utilisez un plugin pour changer cette url.
not http.request.uri.query contains "nocache" : j'ajoute toujours cette rule, elle permet de prendre n'importe quelle url sur le site et d'y ajouter ?nocache pour bypasser le cache. Très utile quand on fait des tests.
not http.user_agent contains "WP Rocket/Preload" : cette rule sert à ne pas fournir de cache au "bot" wp-rocket quand il va accéder à une page pour précalculer le cache. WP-Rocket doit récupérer du contenu "à jour" et pas le cache cloudflare qui n'est pas forcément tout à fait à jour.
not http.request.uri.path contains "feed" : Pour que les utilisateurs ou les bots qui scannent les urls contenant feed
récupèrent du contenu à jour en dehors du cache cloudflare.
Si vous souhaitez exclure la home de votre site il faut ajouter cette rule :not http.request.full_uri eq "https://url-complete-du-site/".
Attention, le / à la fin est indispensable.
Dès que tout ceci est configuré on passe à la suite. Là il y a encore 2 paramètres à configurer.
Tout d'abord on détermine que ce qui est conforme à la rule que l'on vient de configurer est éligible au cache
.
Ensuite sur la partie TTL Edge
on met Remplacer l'origine
et vous choisissez une durée. Pour ma part je préconise 2H. Pour un site rarement mis à jour vous pouvez mettre +. Dans ce cas il peut être utile d'utiliser l'API de Cloudflare pour faire une purge du cache, afin que les modifications soient bien prise en compte rapidement lorsque vous faites une modification sur votre site.
Bien évidemment, comme à chaque fois que vous mettez en place ce genre de règles il est impératif de surveiller le comportement de votre site. Faites des tests depuis un autre poste, un autre navigateur, testez via votre mobile, en navigation privée, etc etc etc...