Intégrer le CDN CloudFlare à WordPress pour gagner en performance

En tant que référenceur web, développeur ou simplement attaché à l’UX de votre projet web, vous connaissez l’intérêt du temps de chargement de votre site. Une des solutions qui peut être proposée pour améliorer la performance d’un site est d’utiliser un Content Delivery Network. Le principe du CDN est de fournir les ressources en cache demandées par l’internaute par le serveur CDN situé au plus près de chez lui afin de baisser le temps de réponse. Différents acteurs sur le marché proposent des offres CDN, mais nous allons nous concentrer sur la solution gratuite de CloudFlare et sa configuration pour un site WordPress. L’autre avantage de ce dernier est de sécuriser la connexion à votre site comme l’indique le schéma ci-dessous :

CDN CloudFlare performance

Ouvrir son compte CloudFlare et ajouter ses sites WordPress

Pour cela rien de bien compliqué, rendez-vous sur www.cloudflare.com/a/sign-up et renseignez les informations demandées. Ensuite, il vous suffira de cliquer sur « Add site » et renseigner les sites pour lesquels vous souhaitez mettre en place un CDN. Pour cela, mettez tous vos domaines séparés par une virgule puis cliquer sur « Begin Scan » pour lancer la détection des DNS :

Ajouter un site à CloudFlare

Une fois ce scan terminé, cliquez sur « Continue Setup », là vous verrez tous les DNS actuels de votre domaine, passez à l’étape suivante et choisissez l’offre gratuite de CloudFlare. Il vous sera alors demandé de modifier vos DNS chez votre registrar pour les remplacer par ceux de CloudFlare :

Changement de DNS chez votre registrar

OVH a tendance à être un peu long pour cette opération et peut facilement prendre 24h. D’autres registrars comme Internet.bs sont beaucoup plus rapide. La vérification des nouveaux DNS sera faite par CloudFlare et vous recevrez un email vous indiquant que tout est en place et que votre site est actif.

Jusqu’ici, il n’y a pas de différence entre l’ajout d’un site sous WordPress ou n’importe quel autre CMS. C’est pourquoi nous allons aller un peu plus loin car il faut savoir que ce qui est en place à ce moment n’impacte que la mise en cache des fichiers images, CSS et JavaScript de votre site, pas le cache HTML !

Configurer CloudFlare pour mettre en cache vos pages HTML et continuer d’accéder à votre administration WordPress

Pour mettre en cache vos pages HTML, nous allons cliquer sur le bouton « Page Rules » pour accéder à une page de configuration de la mise en cache sur le domaine sélectionné. Il y a 2 règles à mettre en place pour un WordPress, la première concerne la mise en cache du HTML de toutes vos pages et la seconde concerne l’exclusion de mise en cache de toute votre section d’administration. En effet, si cette règle n’est pas mise en place vous allez vous retrouver avec une erreur lorsque vous allez vouloir vous connecter à votre administration :

ERREUR : les cookies sont bloqués ou ne sont pas reconnus par votre navigateur. Vous devez activer les cookies pour utiliser WordPress.

Voici donc les Page Rules à mettre en place :

Page Rules de mise en cache du HTML sur CloudFlare

Page Rules CloudFlare pour mettre en cache le HTML sur WordPress

Ici, j’ai choisi de tout mettre en cache tous mes sous-domaines et toutes mes URI en utilisant le pattern *benjaminyeurch.com/* et j’ai activé la majorité des fonctionnalités proposées par CloudFlare dans son offre gratuite (tant qu’à faire 😉 ).

Page Rules d’exclusion de mise en cache de l’administration WordPress sur CloudFlare

Page Rules CloudFlare d'exclusion du cache de l'admin WordPress
Pour cette règle, on choisit par défaut les URI d’administration /wp-login.php et le dossier /wp-admin par le pattern *benjaminyeurch.com/wp-* et on désactive le cache « Bypass cache » et les fonctionnalités de CloudFlare.

Vous pouvez choisir l’ordre de vos Page Rules par drag and drop. Pensez bien à mettre celle d’exclusion en haut de la liste afin qu’elle soit traitée de manière prioritaire.

Pensez à désactiver l’affichage de la barre d’administration en front au risque de voir cette barre intégrée au cache de vos pages HTML, ce qui risque d’être très gênant… Pour cela, allez dans Utilisateurs > Votre profil et décocher « Afficher la barre d’outils lorsque vous visitez le site »

Si jamais, vous aviez déjà du cache, cliquer sur le bouton Caching et choisissez de purger l’intégralité du cache. Cela permettra de repartir sur vos Page Rules propres.

Dans la section Speed, vous pourrez aussi activer la minification JS, CSS et HTML selon les performances attendues.

Pour un réseau de MFA, CloudFlare permet d’héberger sur un serveur dédié des sites qui ne seront ensuite pas détectés comme hébergés sur le même serveur 😉

Votre charge serveur sera désormais allégée et votre temps de chargement optimisé !

Benjamin Yeurc'h

Consultant Web et SEO à Rennes, je partage ma veille sur les réseaux sociaux dont Twitter, Facebook, Google+, Linkedin et Viadeo.

4 commentaires

  1. Je ne suis toujours pas convaincu par CloudFlare. J’ai à nouveau essayé il y a quelques semaines sur plusieurs sites et même s’il y a des avantages, je trouve d’une part, le gain en temps de chargement très faible (sur des sites déjà bien optimisés) et surtout je constate que leur service tombe régulièrement.
    Toujours penser bien à monitorer vos sites quand on passe à CloudFlare et attention quand on veut faire des modifications dans le code, il ne faut pas oublier de mettre CloudFlare en « mode développement ». C’est un coup à s’agacer quand on l’oublie…

    Répondre
  2. Salut!

    CloudFlare est clairement devenu un must pour moi ! Notez cependant qu’ils n’échappent pas aux règles du jeu de la disponibilité et qu’à eux aussi, il peut arriver à quelques rares moments d’avoir une petite panne.

    Il m’est arrivé récemment d’avoir des problèmes d’accès à mes sites CloudFlare. J’ai d’abord mis en cause mon hébergeur. Ensuite, j’ai découvert CloudFlare Status, que je ne connaissais pas : https://www.cloudflarestatus.com

    Il y avait bien une intervention sur leurs serveurs d’Amsterdam.

    Moralité, en cas de problème de disponibilité sur votre site, vérifiez toujours cette page, surtout avant de taper sur votre hébergeur ????

    Répondre
  3. Nous sommes en train de l’installer sur notre site wordpress, mais nous rencontrons un souci car notre site est géré sous forme de répertoire ?

    Savez-vous comment résoudre ce problème ?

    Merci

    Répondre

Qu'en pensez-vous ?

banner