Mettre en place le CDN CloudFlare sur WordPress

Cloudflare fourni des services de réseau de diffusion de contenu, encore appelé CDN. Si vous recherchez un moyen simple d’accélérer et d’ améliorer la sécurité de votre site WordPress , Cloudflare est une excellente solution. La plupart des clients peuvent même utiliser leur forfait gratuit, qui offre une bande passante CDN illimitée. Suivez les étapes ci-dessous pour savoir comment installer Cloudflare sur votre site WordPress.

Comment mettre en place un CDN tel que Cloudflare manuellement ?

Etape 1

Inscrivez-vous et connectez-vous au tableau de bord Cloudflare et cliquez sur «+ Add a site».

Entrez le domaine de votre site WordPress et cliquez sur «Commencer l’analyse». Choisissez le plan « Free » et cliquez sur « Confirm plan »

Etape 2

Cloudflare vous offre deux options. Vous pouvez utiliser leur CDN et leur protection (qui accélère et protège vos sites) ou vous pouvez simplement utiliser leur DNS . La plupart des clients voudront le premier, car c’est là que vous bénéficierez de tout ce que Cloudflare a à offrir. Pour vous assurer que vos domaines sont activés, assurez-vous que le cloud est en orange icone se trouvant derrière la Zone concernée). Si vous avez des enregistrements supplémentaires, tels que le courrier électronique (enregistrements MX), ceux-ci doivent être désactivés (gris). Cliquez sur continuer après avoir tout vérifié. Vous pouvez toujours modifier ces enregistrements ultérieurement.

Etape 3

Vous devrez ensuite modifier les serveurs de noms de votre domaine pour qu’ils pointent vers Cloudflare (utilisez ceux qu’ils fournissent). Cloudflare étant un service de proxy complet, son fonctionnement dépend essentiellement de Cloudflare. Il n’y a pas de temps d’arrêt lorsque vous changez de serveur de noms. Une fois les serveurs DNS changés, cliquez sur le bouton « continuer« .

Cela ne devrait pas prendre beaucoup de temps, mais prévoyez jusqu’à 24 heures pour que cette modification soit traitée.

Etape 4

A cette étape, il est nécessaire de vérifier que les Zones DNS se trouvant sur Cloudflare pointent bien vers votre hébergement Web. Pour cela, cliquez sur « DNS » et vérifier l’IP pour l’enregistrement de Zone A. Ajoutez aussi un enregistrement de type cName pour la valeur « WWW » et pointant vers votre domaine. L’adresse IP de votre site WordPress se trouve sur votre tableau de bord LWS, sous l’onglet « Zone DNS » se trouvant dans la rubrique « Gestion du domaine« .

Cloudflare est maintenant configuré pour fonctionner avec votre site WordPress.

Mettre en place Cloudflare par l’interface LWS Panel

Connectez-vous à votre espace client et cliquez sur « Domaine et hébergement« .

Cliquez sur le Bouton « Admin » se trouvant derrière le nom de domaine concerné.

Cliquez sur l’onglet « Cloudflare » se trouvant dans la rubrique « 5-Gestion MySQL/PHP/Sauvegardes« .

Le compte sera créé automatiquement et sera lié à votre espace client. Toutes les Zones DNS seront mises automatiquement en place sur Cloudflare.

Installer Cloudflare sur votre interface cPanel

Connectez-vous à votre interface cPanel, rendez-vous dans la rubrique « Logiciel » et cliquez sur le bouton « Cloudflare« .

Si vous ne disposez pas de compte Cloudflare, cliquez sur le bouton « Create your  free account« . Dans le cas contraire, cliquez sur « Sign in Here » afin de vous connecter à votre interface Cloudflare.

Cliquez sur le bouton « Provision Domain with Full Zone Setup » afin d’enregistrer toutes les Zones sur Cloudflare.

Comme lors de la mise en place manuelle de Cloudflare, il est demandé de modifier les Serveurs DNS chez votre hébergeur actuel pour les serveurs DNS de Cloudflare. Une fois les Serveurs DNS modifiés, il vous faudra attendre jusqu’à 24 heures que ces derniers se propagent et soient actif sur votre espace client.

Recommandation pour les sites WordPress

Il est recommandé d’effectuer une étape supplémentaire pour les sites WordPress. Cela n’est pas une obligation, cependant certaines choses peuvent ne pas fonctionner correctement si vous n’installez pas le plugin officiel de Cloudflare.

Il est possible de télécharger ce plugin par le biais du référentiel WordPress ou en le cherchant depuis votre tableau de bord, sous « Ajouter » de la rubrique « extensions« . Il comporte les éléments suivants:

• Correction pour que les commentaires n’apparaissent pas à partir de la même adresse IP
• Purge automatiquement le cache
• Réécriture d’en-tête pour empêcher une boucle de redirection lorsque le SSL de Cloudflare est activé
• Possibilité de modifier les paramètres du compte Cloudflare depuis le plugin lui-même (purge du cache, niveau de sécurité, optimisation de l’image)
• Affichez les analyses telles que le nombre total de visiteurs, la bande passante économisées et les menaces bloquées
• Prise en charge de HTTP2 / Server Push

Après avoir installé le plugin, vous devrez entrer votre adresse e-mail Cloudflare et votre clé API dans les paramètres. Vous pouvez en vous connectant à votre interface Cloudflare . Copiez celui qui dit «Clé API globale». Cliquez ensuite sur «Enregistrer les informations d’identification de l’API».

Sous l’onglet «Home», vous appliquez les paramètres par défaut ou mettez à jour les paramètres selon vos préférences.

Dans l’onglet « Setting« , vous pouvez activer l’optimisation d’image si vous êtes sur un plan professionnel, activez le mode de développement, modifiez le niveau de sécurité et activez les réécritures HTTPS automatiques.

Sous l’onglet « Analytics« , vous pouvez afficher le nombre de demandes, la bande passante, les visiteurs et les menaces sur votre site WordPress.

Problèmes communs à Cloudflare

Une erreur très courante que les utilisateurs rencontrent en essayant d’installer Cloudflare sur leur site WordPress est “ERR_TOO_MANY_REDIRECTS” dans Chrome ou “La page ne redirige pas correctement” (Firefox).

Cela est dû au fait que SSL est déjà installé sur votre serveur Web, puis que Flexible SSL est activé avec Cloudflare. Si vous avez déjà un certificat SSL auprès de votre hébergeur Web, il vous faudra basculer le mode SSL sur complet.

Test de performance

Un test a été effectué par le biais de GTMetrix, Pingdom et Google Speed test afin de voir si une différence était visible avant et après l’installation d’un système de cache sur un site WordPress. Afin d’effectuer ce test, un site WordPress disposant d’un thème DIVI a été installé sur un Hébergement Web cPanel.

Lors du premier test, aucun système de mise en cache n’a été activé, que ce soit Varnish sur cPanel ou Cloudflare (CDN).

Test sans système de mise en cache

GTMetrix: Lors du test effectué sur GTMetrix, le score PageSpeed était de 82% avec un YSlow Score de 62% et un affichage du site en 4 secondes.

PingDom: La performance du site sur Pingdom est de 75% avec un affichage du site en 5,35 secondes.

Google Speed Test: L’optimisation pour mobile est de 71% et de 84% sur ordinateur portable

Test avec le cache Varnish mais sans Cloudflare

GTMetrix: Il est bon de constater que la valeur PageSpeed et la valeur YSlow Score ne change pas, cependant, le temps de chargement de la page est plus rapide avec 3.7 secondes.

Pingdom: Sur Pingdom, le constat est le même que pour GTMetrix, cependant, l’affichage de la page reste aussi plus rapide avec un chargement moyen de 2.38 secondes. Le cache Varnish a permis de gagner 2 secondes lors de l’affichage de la page.

Google PageSpeed: L’optimisation du site semble être meilleur avec une valeur de 84% sur Mobile ( plus 13%) et de 89% sur Ordinateur (plus 5%)

Test avec Varnish et Cloudflare

Le troisième et dernier test a été effectué en couplant le cache Varnish avec celui de Cloudflare.

GTMetrix: Le YSlow Score a effectué un bon de 10% pour atteindre les 72%, le temps de chargement a encore été amélioré avec 0,7 seconde de gagné depuis le début du test pour atteindre les 3,3 secondes pour le chargement du site.

Pingdom: Pingdom indique désormais que le site s’affiche en moins d’une seconde, le test démontre que nous avons gagné presque 5 secondes en mettant en oeuvre le cache Varnish de cPanel et Cloudflare.

Google SpeedTest: L’optimisation du site pour Mobile a encore grimpé pour atteindre les 87% , soit 16% de plus qu’au début du test.

Pourquoi utiliser Varnish et Cloudflare en même temps ?

Varnish et Cloudflare sont deux choses totalement différentes. Varnish met en cache le contenu statique et dynamique de votre site WordPress (images, feuilles de styles CSS, HTML) afin d’accélerer de 3 à 5 fois la rapidité de votre site Web. Il s’agit d’un cache proxy.

Cloudflare est un réseau de distribution encore appelé CDN qui permet de mettre à disposition un cache de votre site Web sur plusieurs serveurs à travers le monde. Il permet d’envoyer une copie de votre site Web à vos visiteurs à partir de l’emplacement le plus près de l’ordinateur de l’individu.

Comme vous venez de le voir, le cache Varnish et Cloudflare ne servent pas les mêmes intérêts mais sont complémentaires.

Cloudflare: différences entre gratuit et payant

Bien que la version gratuite de Cloudflare peut être suffisante dans beaucoup de cas et propose la mise en cache, le SSL et beaucoup d’options, il peut être nécessaire de souscrire à une formule payante afin d’avoir accès à plus de fonctionnalité comme:

• WAF: le Parefeu Applicatif avec 25 règles personnalisables.
• La création de réglage supplémentaires tel que des URL de redirection de type 301 ou 302
• Étendre la capacité de mise en cache et améliorer la distribution du cache pour certains pays uniquement.

Conclusion

Félicitations, vous êtes désormais en mesure de mettre en place Cloudflare sur votre site WordPress. Vous avez aussi pu apprécié, par le biais d’un test, les performances apportées par le cache Varnish et par Cloudflare sur la rapidité d’affichage d’un site Web.