Cloudflare - How to fix Critical CSS generation errors
This article contains information related to the known issues caused by Cloudflare's security options that affect the Load CSS Asynchronously feature when trying to generate the Critical Path CSS.
Cloudflare Firewall
If you are seeing this error: " Cloudflare protection prevents the service from accessing the website", it means that our tool’s IP address is blocked by the Cloudflare firewall.
To fix this, please add the IP addresses found in this list to the allowlist in your Cloudflare account.
In order to whitelist our Critical Path CSS tool’s IP address, please follow these instructions:
- Go to Firewall > Tools, you will be creating a new IP Access Rule.
- Enter the IP.
- Select Whitelist.
- Repeat for each IP address.
Here’s a picture of the process:
Here’s how it should look after you have added it to the allowlist:
Cloudflare Bot Fight Mode
Cloudflare's Bot Fight Mode can prevent the Load CSS Asynchronously and Remove Unused CSS tools from accessing your site.
Disable it and check if the Critical Path CSS/Used CSS is generated:
Cloudflare Workers
In some cases, our tool can be blocked by a Cloudflare Worker. If that's the reason, you will see an error similar to this one:
Error 1101: Rendering error. Worker Threw Exception.
A common cause of this is a Cloudflare Worker throwing a runtime JavaScript exception.
To debug this:
- Log in to your Cloudflare account.
- Go to the Workers tab.
- Deactivate any worker you have enabled there.
- Once the workers are disabled, try regenerating the Critical CSS in WP Rocket.
If the generation runs smoothly, you will need to debug your worker's code for any errors.
This is how you can access the Workers section, and edit a worker:
If that doesn't help, please ask Cloudflare's support to allow access to our tool.
More troubleshooting steps can be found here: https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#errors.