Using WP Rocket with CloudFlare

WP Rocket is totally compatible and complementary with CloudFlare.

The first step to use them together, is adding your site to your CloudFlare account. If you haven't done this yet, follow CloudFlare's tutorial: Create a Cloudflare account and add a website.

CloudFlare can perform the minification process of CSS and JS files as well as WP Rocket, but there is one extra thing that WP Rocket does, and it is called concatenation. This means that WP Rocket combines files into little groups for better compatibility and performance, and that is one useful feature that is not included in CloudFlare.

We recommend you activate minification in CloudFlare as well as WP Rocket in order to get the best results.

Note: If you use the WP Rocket CloudFlare integration, you no longer need the official CloudFlare plugin. WP Rocket provides the same function of providing originating IP addresses. As of WP Rocket 2.7, we also provide https protocol rewriting.

WP Rocket’s CloudFlare Settings

In the CDN tab in Settings → WP Rocket you will see the Show CloudFlare settings tab checkbox. Check that one and a popup will appear. Confirm, save changes, and the CloudFlare Tab will appear. 

Go to it and you will see multiple options:

  • Account Email – Fill in email address used for creating CloudFlare account
  • Global API Key – Login to your CloudFlare account and visit your Account page. You will see this:

  • Copy the Global API Key and paste in WP Rocket settings.As of WP Rocket 2.6.7, you can also define your API key in your wp-config file. This can be especially useful if you have several sites under the same CloudFlare account. Here is how you would add it to your wp-config file (remeber to replace the second value in the example with your own API key):

    define('WP_ROCKET_CF_API_KEY', 'put-your-API-key-here');
    	

    You can also hide the API Key field if you prefer to keep it secret:

    define( 'WP_ROCKET_CF_API_KEY_HIDDEN', true );
    	
  • Domain – Enter your domain
  • Development mode – This toggles on or off CloudFlare’s development mode. This is useful to turn on if you are making a lot of changes to your site, or if you want to troubleshoot. From CloudFlare:
    “Development Mode temporarily allows you to temporarily suspend CloudFlare’s edge caching and minification features. Development mode is useful if you are making changes to cacheable content (like images, css, or JavaScript) and would like to see those changes right away.”
  • Auto enable the optimal CloudFlare settings - WP Rocket automatically selects a pre-determined set of options within CloudFlare to improve the performance of your site (We activate minification, set the caching level to aggressive and deactivate their Rocket Loader for better compatibility).
  • Clear Cache - This will clear your CloudFlare cache.

Troubleshooting

The most common cause of issues when using CloudFlare is their Rocket Loader feature. If you have display or other issues when using CloudFlare, disable Rocket Loader and clear your cache to see if this fixes the problem.

CloudFlare Cache purge error: No Zone ID set in the WP Rocket settings

If you're receiving this error after configuring CloudFlare, or when purging CloudFlare cache, please try this:

  • Go to WP Rocket → CloudFlare settings tab.
  • Empty the domain text field and save settings.
  • Then re-add your domain and save the settings again.