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é !

• Tweeter