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. Then Change your domain name servers to Cloudflare.

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 add-on, you no longer need the official Cloudflare plugin.
WP Rocket provides the same functionality of providing originating IP addresses.

WP Rocket’s Cloudflare add-on

In the Add-ons settings tab you will see the Cloudflare add-on. Switch Add-on status to ON:

Then click the Modify Options button. It will take you to the Cloudflare tab that has  appeared under the Add-ons tab:

These are the settings you need to set:

Global API key

Sign in at your Cloudflare account and visit your Account page. You will see this:

Copy the Global API key and paste in WP Rocket settings. 

Define API key in wp-config.php

If it suits your use case, you can also define your API key in your wp-config.php file. This can be useful if you have several sites under the same Cloudflare account. Here is how you would add it to your wp-config.php file (remember to replace the second value in the example with your own API key):

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

With the following line of code in wp-config.php you can also hide the API key field in WP Rocket’s settings if you prefer to keep it secret:

define( 'WP_ROCKET_CF_API_KEY_HIDDEN', true );

Account Email

Fill in the email address used on your Cloudflare account.

Zone ID

Enter your zone ID for your domain. This is found on the Overview page of your Cloudflare account: 

Development mode

This toggles Cloudflare’s development mode on or off.  Development Mode allows you to temporarily suspend Cloudflare’s edge caching and minification features. 

Did you know? Activating Development mode can be particularly useful when you are making changes to cacheable content (like images, CSS, or JavaScript), and you would like to see those changes right away.

Optimal settings

Activating this option is highly recommended. WP Rocket automatically selects a pre-defined set of options for Cloudflare to improve the performance of your site:

  • Set Cloudflare’s caching level to Agressive
  • Activate Cloudflare’s minification
  • Deactivate Rocket Loader (name unrelated to WP Rocket)
  • Set Cloudflare’s browser cache to 1 month

Relative protocol

Heads up! This setting should only be activated if you use Cloudflare’s Flexible SSL feature.
You should NOT activate it when your WordPress site runs on full SSL!

The Relative protocol setting rewrites the URLs of static files (CSS, JS, images) to use a relative protocol ( // instead of http:// or https://).

Clear all Cloudflare cache files

It’s not necessary to press this button every time you clear WP Rocket’s cache. 
It will clear the Cloudflare cache, and it mostly needed for troubleshooting, or when you think Cloudflare is serving outdated files for whatever reason.

Troubleshooting

The most common cause of issues when using Cloudflare is their  Rocket Loader feature. If you see display issues, or JavaScript errors while running Cloudflare, disable Rocket Loader and clear your cache to see if this fixes the problem. (Rocket Loader is in no way related to WP Rocket.)