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 web performance d’un site que vous pouvez analyser avec un outil comme Dareboost 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 :
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 :
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 :
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 :
Voici donc les Page Rules à mettre en place :
Page Rules de mise en cache du HTML sur CloudFlare
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
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.
Votre charge serveur sera désormais allégée et votre temps de chargement optimisé !
Arnaud
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…
Mister WP
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 ????
Delicatessen
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
Benjamin Yeurc'h
Il n’y a pas de raison pour que la construction de vos URLs vous empêche de mettre en place CloudFlare. Avez-vous bien paramétré vos Page Rules ?