Utiliser WP Rocket avec CloudFlare

WP Rocket est compatible et complémentaire avec Cloudflare. Vous trouverez toutes les informations et instructions sur la façon de synchroniser WP Rocket avec Cloudflare ci-dessous.

Pour commencer

Cloudflare ≠ CDN: Si vous utilisez l’add-on Cloudflare, il n'est pas nécessaire d'ajouter les infos de Cloudflare dans l'onglet CDN. Cela dit, WP Rocket est également compatible avec la plupart des fournisseurs de CDN, notamment Amazon Cloudfront, MaxCDN, KeyCDN et les autres. Si vous souhaitez savoir comment utiliser WP Rocket avec un CDN, c’est par ici : Utiliser WP Rocket avec un CDN

L'utilisation de notre module complémentaire Cloudflare n'est pas une obligation dans la plupart des cas, c'est seulement une commodité. Une fois que vous avez configuré votre compte Cloudflare correctement, il sera actif pour votre site, que vous utilisiez ou non le module complémentaire WP Rocket. Le module complémentaire fournit simplement un moyen pratique de configurer certains paramètres.

La première étape pour les utiliser ensemble est d'ajouter votre site à votre compte Cloudflare. Si vous ne l'avez pas encore fait, suivez le tutoriel de Cloudflare : Create a Cloudflare account and add a website. Ensuite, Change your domain name servers to Cloudflare.

Note : Si vous n'utilisez pas Cloudflare APO, il n’y pas besoin d’utiliser d’autres plugins liés à CloudFlare car l'add-on Cloudflare de WP Rocket se chargera toutes les étapes nécessaires pour configurer les réglages CloudFlare. WP Rocket fourni la même fonction pour les adresses IP originales des visiteurs

Add-on Cloudflare de WP Rocket

Conditions préalables

Vous devez avoir un accès direct à votre propre compte Cloudflare pour obtenir les informations sur la clé API nécessaires à la configuration du module complémentaire. Si vous utilisez Cloudflare par le biais d'une intégration fournie par votre hébergeur, il se peut que vous ne puissiez pas obtenir ces informations et que vous ne puissiez donc pas utiliser le module complémentaire, mais Cloudflare sera toujours actif sur votre site.

Dans l'onglet Add-ons, vous verrez l’Add-on Cloudflare. Basculez le statut de l’Add-on sur ON :

Sauvegardez les changements et l’onglet CloudFlare apparaitra. Allez dessus et vous verrez diverses options :

Voici ce que vous devrez régler :

La Global API key

Comment trouver votre Global API key:

1. Connectez-vous à votre compte Cloudflare
2. Cliquez sur l'icône de profiled haut à droite, puis sur My Profile
   
3. Cliquez sur l'onglet API Tokens
   

   

4. Vous y trouverez la Global API Key:
   

   

5. Après avoir entré votre mot de passe Cloudflare, la clé API sera révélée. Copiez la Global API key et collez-la dans les réglages WP Rocket settings.

Remarque : l'Add-on Cloudflare ne fonctionne qu'avec la Global API key, les autres API tokens de Cloudflare ne sont pas supportés.

Définir votre clé API dans votre fichier wp-config.php

Vous pouvez aussi définir votre clé API dans votre fichier wp-config.php. Cela peut-être particulièrement utile si vous avez plusieurs site sous le même compte CloudFlare. Voici comment vous devez l’ajouter à votre fichier config (n’oubliez pas de remplacer la deuxième valeur dans l’exemple avec votre propre clé API !)

define('WP_ROCKET_CF_API_KEY', '1238436u23873452394');

Avec la ligne de code suivante dans wp-config.php vous pouvez également masquer le champ de la clé API dans les paramètres de WP Rocket si vous préférez le garder secret :

define( 'WP_ROCKET_CF_API_KEY_HIDDEN', true );

Email du compte

Mettez l’adresse email utilisée pour créer le compte CloudFlare

Zone ID

Entrez votre Zone ID. Vous le trouverez dans la page Overview de votre compte Cloudflare :

Add-on Cloudflare et Cloudflare APO

Si vous utilisez Cloudflare APO et que le plugin Cloudflare est activé et authentifié, le Add-on Cloudflare sera réduit, et aura des informations différentes comme indiqué ci-dessous :

Voici les messages qui s'affichent dans le module complémentaire Cloudflare lorsque APO est utilisé :

Votre site utilise le plugin officiel Cloudflare. Nous avons activé la purge automatique de Cloudflare pour des raisons de compatibilité. Si vous avez activé APO, il est également compatible.

Le cache de Cloudflare sera purgé à chaque fois que WP Rocket effacera son cache pour s'assurer que le contenu est toujours à jour.

Dans ce cas, vous pouvez gérer les réglages de Cloudflare directement depuis le plugin Cloudflare. WP Rocket respectera ces réglages.

Vous pouvez trouver plus d'informations dans l'article Utiliser Cloudflare APO avec WP Rocket.

Mode développement

Cette option permet d'activer ou de désactiver le mode de développement de Cloudflare. Mode de développement vous permet de suspendre temporairement la mise en cache de Cloudflare.

Le saviez-vous ? L'activation du mode développement peut s'avérer particulièrement utile lorsque vous apportez des modifications à du contenu pouvant être mis en cache (comme des images, des feuilles de style CSS ou du JavaScript) et que vous souhaitez voir ces modifications immédiatement.

Activer les réglages optimaux pour Cloudflare

WP Rocket sélectionne automatiquement un ensemble d’options prédéfinies dans Cloudflare pour améliorer la performance de votre site :

• Réglons le niveau de mise en cache sur Agressif
• Désactivons leur Rocket Loader pour une meilleure compatibilité
• Il fixe le délai du cache navigateur à 1 an

Protocol relatif

Attention ! Ce paramètre ne doit être activé que si vous utilisez la fonction Flexible SSL de Cloudflare.
Vous ne devez PAS l'activer lorsque votre site WordPress fonctionne en SSL complet !

L’option Protocol relatif réécrira les URLs des fichiers statiques (CSS, JS, images) de cette manière // au lieu de http:// ou https://).

Quand vider le cache de Cloudflare ?

Cloudflare Cache Everything

Si vous utilisez la solution de Cloudflare Page Rules, l' Add-on Cloudflare et l'extension officielle Cloudflare permettront d'effacer les caches de WP Rocket et de Cache Everything de manière synchronisée.

Si vous utilisez les Cache Rules, alors l'extension officielle Cloudflare doit être utilisée pour s'assurer que les deux caches sont vidés de manière synchronisée.

Vous trouverez cette information ainsi que d'autres informations de dépannage dans cette doc Utiliser l'option Cache Everything de Cloudflare.

Cloudflare APO

WP Rocket est compatible avec Cloudflare APO, le nettoyage du cache sera synchronisé si le plugin Cloudflare est activé et authentifié. Voir plus d'informations dans l'article Utiliser Cloudflare APO avec WP Rocket.

Cloudflare Enterprise plan de Cloudways

Si vous souscrivez au plan Cloudflare Enterprise dans votre plan d'hébergement Cloudways, WP Rocket ne pourra pas synchroniser son cache avec celui de Cloudflare dans ce cas parce que Cloudways ne vous fournit pas de clé API et d'ID de zone que vous pouvez ajouter pour configurer notre add-on Cloudflare.

Vous devrez purger le cache Cloudflare vous-même à chaque fois que vous modifiez les réglages de WP Rocket, ou désactiver la mise en cache des pages de WP Rocket pour ne conserver que les optimisations. Voir : Désactiver la mise en cache des pages.

HTTP/2 server push de Cloudflare

Si vous utilisez le plugin Cloudflare et que vous activez la fonction Server Push à l'aide de la constante define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true);, Cloudflare ajoutera toutes les ressources avec l'indice rel=preload sur la page. Y compris les fichiers CSS.

Ce comportement n'est pas compatible avec l'option Supprimer les ressources CSS inutilisées, car il va à l'encontre de l'objectif de l'optimisation CSS. Par conséquent, il n'est pas recommandé d'utiliser le serveur HTTP/2 de Cloudflare avec la constante.

Dans ce cas, le message d'administration suivant s'affiche :

WP Rocket : La fonction HTTP/2 Server Push de Cloudflare est incompatible avec l'option Supprimer les ressources CSS inutilisées. Nous recommandons fortement de la désactiver.

Remarque : cette incompatibilité ne s'applique pas si vous utilisez uniquement les options HTTP/2 de Cloudflare dans le compte Cloudflare, dans Vitesse > Optimisation > Optimisation du protocole.

Résolution de problèmes

• Rocket Loader
  La cause la plus fréquente de problèmes lors de l'utilisation de CloudFlare est leur fonctionnalité Rocket Loader. Si vous avez des problèmes d'affichage ou d'autres problèmes lors de l'utilisation de CloudFlare, désactivez Rocket Loader et effacez votre cache pour voir si cela corrige le problème.
• Erreurs 502 ou page blanche lors de la purge du cache
  Dans certains cas, lorsque le plugin Query Monitor est actif et que Cloudflare fonctionne sur un site, l'effacement du cache peut déclencher une erreur 502 ou une erreur de page blanche. Si vous constatez ce problème sur votre site, vous devez désactiver le plugin Query Monitor. En général, le plugin Query Monitor ne doit être activé que lorsque les requêtes sont activement surveillées.