Cloudflare - Comment corriger les erreurs du Critical CSS

Pare-feu Cloudflare

Si vous voyez cette erreur : "La protection CloudFlare empêche le service d'accéder au site Web", cela signifie que les adresses IP de notre outil sont bloquées par le pare-feu Cloudflare.

Pour résoudre ce problème, veuillez autoriser les adresses IPs suivantes dans votre compte Cloudflare : 

• 109.234.160.58
• 51.83.15.135

Afin d’autoriser les adresses IP de notre outil de génération du Critical Path CSS, veuillez suivre ces instructions :

1. Allez dans Firewall > Tools, et créez-y une nouvelle IP Access Rule.
2. Entrez nos IPs 109.234.160.58 et 51.83.15.135.
3. Sélectionnez Whitelist. 
4. Répétez pour chaque adresse IP.

La procédure en image :  
Vous pouvez également choisir si la règle sera appliquée pour vos autres sites dans Cloudflare, et vous pouvez aussi laisser une note si vous le souhaitez. 

Voici à quoi ça devrait ressembler une fois que vous aurez terminé :

Mode BFM (Bot Fight Mode) de Cloudflare

Le mode BFM (Bot Fight Mode) de Cloudflare peut empêcher le générateur du Critical Path CSS (CPCSS) d'accéder à votre site.
Désactivez-le et vérifiez si le CPCSS est généré :

Cloudflare Workers

Dans certains cas, notre outil peut être bloqué par un Cloudflare Worker. Si c'est la raison, vous verrez une erreur similaire à celle-ci :

Error 1101: Rendering error. Worker Threw Exception.

Une cause fréquente de ce problème est un Cloudflare Worker lançant une "runtime JavaScript exception".

Pour déboguer ceci :

1. Connectez-vous à votre compte Cloudflare.
2. Allez dans l'onglet Workers.
3. Désactiver tout les workers que vous avez activé. 
4. Une fois les workers désactivés,essayez de régénérer le CSS critique dans WP Rocket.

Si la génération se déroule sans problème, vous devrez déboguer le code de votre worker pour détecter d'éventuelles erreurs.

Voici comment vous pouvez accéder à la section des Workers, et modifier un worker:

Si ça ne fonctionne pas, veuillez demander l'aide au support de Cloudflare pour permettre l'accès à notre outil.

D'autres étapes de dépannage du Critical Path CSS peuvent être trouvées ici : https://fr.docs.wp-rocket.me/article/1440-eliminez-les-ressources-qui-bloquent-le-rendu.