Configure Cloudflare for Easy Critical CSS

← Back to all Easy Critical CSS docs

If your site uses Cloudflare, you will need to adjust a couple of settings so Easy Critical CSS can work correctly. Cloudflare must allow the Easy Critical CSS Generator to access your site in order to create your Critical and Secondary CSS with the unused CSS removed, and it must also allow the generator to send the finished CSS back to WordPress. The steps below make sure both parts work as expected.

Set up Cloudflare to clear cache correctly

  1. In your WordPress admin, go to Settings > Easy Critical CSS and click the Show Advanced Settings button.
  2. Enter your Cloudflare account email address in the Cloudflare Email field.
  3. Retrieve your API key and enter it in the Cloudflare API Key field.
  4. Find your Zone ID by selecting the three dots next to your domain on the Cloudflare Account Home page. Enter that Zone ID in the Cloudflare Zone ID field.
  5. Save your settings.
Screenshot of the Cloudflare Account Home page. The three dot menu beside a domain is open, and the option “Copy zone ID” is highlighted.
Cloudflare menu with the Zone ID option

Allow CriticalCSS.net to deliver generated Critical CSS

  1. Go to Security > WAF > Custom Rules > Create Rule.
  2. Enter a rule name. For example, “Allow Easy Critical CSS API”.
  3. Set the expression to: (http.user_agent contains "EasyCriticalCSS Generator")
  4. Set the action to Skip.
  5. Deploy the rule.
Screenshot of the Cloudflare interface showing the Create Rule page. A custom WAF rule is being created with the User Agent condition set to “contains EasyCriticalCSS Generator,” and the action set to Skip with several WAF components selected to be skipped.
WAF rule setup for the Easy Critical CSS Generator
← Back to all Easy Critical CSS docs Next step: Automatic Generation Failures