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.
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:
You can also choose if the rule will be applied for your other sites in Cloudflare, and you can also leave a note if you want.
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:
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.
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.