Utiliser WP Rocket avec CloudFlare
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
WP Rocket est entièrement compatible et complémentaire avec CloudFlare.
La première chose à faire sera naturellement enregistrer votre site dans votre compte CloudFlare. Si vous ne l'avez pas encore fait, vous pouvez suivre ces instructions: Create a Cloudflare account and add a website.
CloudFlare peut réaliser le processus de minification de fichiers CSS et JS à l’instar de WP Rocket, mais il y a une chose supplémentaire que WP Rocket fait, qui s’appelle la concaténation. Cela signifie que WP Rocket combine les fichiers en petits groupes pour une meilleur compatibilité et de meilleures performances, et c’est une caractéristique très utile qui n’est pas incluse dans CloudFlare.
Nous recommandons d’activer la minification dans CloudFlare et dans WP Rocket dans le but d’obtenir de meilleurs résultats.
Note : 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. Depuis la version 2.7, nous fournissons aussi la réécriture vers le protocole https.
Add-on Cloudflare de WP Rocket
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
Vous pouvez aussi définir votre clé API dans votre fichier wp-config. 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 :
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.
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.