Using Cloudflare with WP Rocket

WP Rocket is compatible and complementary with Cloudflare. You can find more information and instructions on how to synchronize WP Rocket with Cloudflare, and other useful information below.

Getting started

Cloudflare ≠ CDN: Do not enter Cloudflare CNAMES on the CDN tab, this will break your site!
You may use a standard pull CDN in addition to Cloudflare depending on your needs. WP Rocket has its own premium CDN service, RocketCDN, and is also compatible with most CDN providers, including Amazon Cloudfront, Bunny CDN, KeyCDN and others. If you need information about how to use WP Rocket with a CDN, please: Using WP Rocket with a CDN

Using our Cloudflare add-on is not a requirement in most cases, it's only a convenience. Once you've set up your Cloudflare account correctly, it will be active for your site regardless of whether you are using the WP Rocket add-on. The add-on simply provides a convenient way to configure some settings.

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.

Note: If you use the WP Rocket Cloudflare add-on, you no longer need the official Cloudflare plugin (unless you use Cloudflare APO or Cloudflare's Cache Rules - more about this below). WP Rocket provides the same functionality of providing originating IP addresses.

WP Rocket’s Cloudflare add-on

Prerequisites

You must have direct access to your own Cloudflare account to get the API key information needed to configure the add-on. If you are using Cloudflare through an integration provided by your host, you may not be able to get this information and therefore you won't be able to use the add-on, but Cloudflare will still be active on your site.

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

How to find your Global API key: 

1. Log in to your Cloudflare account
2. Click the profile icon at the top right, then click My Profile
   
3. Click API Tokens
   

   

4. There you will find the Global API Key:
   

   

5. After entering your Cloudflare password, the API key will be revealed. Copy the Global API key and paste into the WP Rocket settings. 

Note: the Cloudflare Add-on works only with the Global API key, other Cloudflare API tokens are not supported.

For security and privacy, only the last 4 characters of the  Global API key and Zone ID will be displayed on the Cloudflare Add-on page.

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 completely hide the API key field in WP Rocket’s settings if you prefer to keep it totally hidden:

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 for your domain in your Cloudflare account: 

Cloudflare Add-on and Cloudflare APO

If you're using Cloudflare APO and the Cloudflare plugin is enabled and authenticated, the Cloudflare Add-on will be dimmed, and will have different information as shown below:

These are the texts inside the Cloudflare Add-on when APO is used:

Your site is using the official Cloudflare plugin. We have enabled Cloudflare auto-purge for compatibility. If you have APO activated, it is also compatible.

Cloudflare cache will be purged each time WP Rocket clears its cache to ensure content is always up-to-date.

In this case, you can manage Cloudflare settings directly from the Cloudflare plugin. WP Rocket will respect those settings.

You can find more information in the Using Cloudflare APO with WP Rocket article.

Development mode

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

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 Standard
• Deactivate Rocket Loader (name unrelated to WP Rocket)
• Set Cloudflare’s browser cache to 1 year

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://).

When should I Clear all Cloudflare cache files?

By default, 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, in case you've made changes to your files without changing their filenames, or when you think Cloudflare is serving outdated files for whatever reason.

Cloudflare Cache Everything

If you're using Cloudflare's Page Rules, both the Cloudflare Add-on and the official Cloudflare plugin will work to clear both WP Rocket's cache and Cache Everything's caches in sync.

If you're using Cloudflare's Cache Rules, then the official Cloudflare plugin must be used to ensure both caches are cleared in sync.

You can find this and other troubleshooting information in the Using Cloudflare Cache Everything with WP Rocket article.

Cloudflare APO

WP Rocket is compatible with Cloudflare APO, cache clearing will be synchronized if the Cloudflare plugin is enabled and authenticated. Please see more information in the Using Cloudflare APO with WP Rocket article.

Cloudways' Cloudflare Enterprise plan

If you subscribe to Cloudflare Enterprise plan within your Cloudways hosting plan, WP Rocket won't be able to synchronize its cache with Cloudflare's in this case because Cloudways does not provide you with an API key and zone ID you can add to configure our Cloudflare add-on.

You'll need to purge the Cloudflare cache yourself each time you change the WP Rocket settings, or disable WP Rocket's page caching to keep only the optimizations. See: Disable page caching.

Cloudflare's HTTP/2 server push

If you're using the Cloudflare plugin and enabling Server Push using the define('CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE', true); constant, Cloudflare will add all resources with the rel=preload hint on the page. Including CSS files.

This behavior is not compatible with the Remove Unused CSS feature, as it goes against the purpose of the CSS optimization. Therefore, it's not recommended to use Cloudflare's HTTP/2 server push with the constant. 

In this case, the following admin notice will be displayed:

WP Rocket: Cloudflare's HTTP/2 Server Push is incompatible with the features of Remove Unused CSS and Combine CSS files. We strongly recommend disabling it.

Note: this incompatibility doesn't apply if you're only using the Cloudflare's HTTP/2 options in the Cloudflare account, at Speed > Optimization > Protocol Optimization.

Troubleshooting

• Rocket Loader
  
  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.).
• 502 error or blank page when clearing the cache
  In some cases, when the Query Monitor plugin is active and Cloudflare is running on a site, clearing the cache can trigger a 502 error or a blank page error. If you find this issue on your site, you should disable the Query Monitor plugin, or try the code snippet provided here. In general, the Query Monitor plugin should be enabled only while queries are being actively monitored.