Gestion du cache avec Cloudflare

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 etsi vous êtes en Français.

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...