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.
Dans cette documentation
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.
Cloudflare peut effectuer le processus de minification des fichiers CSS et JS aussi bien que WP Rocket, nous vous recommandons donc d'activer la minification dans les deux pour obtenir les meilleurs résultats.
Note : Si vous n'utilisez pas Cloudflare APO, il n’y pas besoin d’utiliser d’autres plugins liés à CloudFlare car 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:
- Connectez-vous à votre compte Cloudflare
- Cliquez sur l'icône de profiled haut à droite, puis sur My Profile
- Cliquez sur l'onglet API Tokens
- Vous y trouverez la Global API Key:
- 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
À partir de WP Rocket 3.14, 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
Ce bouton passe en ON ou en OFF le Mode développement de Cloudflare. Si vous faites beaucoup de changements sur votre site, ou si vous voulez régler des problèmes, cette option peut être utile. Cloudflare explique :
"Le mode développement vous permet de suspendre temporairement CloudFlare's edge caching et les fonctionnalités de minification. Le mode développement est utile si vous faites des changements sur du contenu qui peut être mis en cache (comme les images, le CSS, ou JavaScript) et que vous voulez voir ces changements tout de suite."
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
- Nous activons la minification
- 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 ?
Si vous avez activé la fonction Cache Everything de Cloudflare, le cache Cloudflare sera automatiquement purgé en même temps que le cache WP Rocket.
> Consultez ce guide si vous utilisez la fonction Cache Everything de Cloudflare.
Cloudflare APO
Depuis la version 3.14, 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.