How to Properly Setup Cloudflare with WP Rocket Plugin?

WP Rocket is one of the simplest and effective caching plugins for WordPress sites. It offers one click features for removing unused CSS, delay JavaScript and optimize caching to speed up your site. On other hand, Cloudflare is a free CDN service to deliver content from the nearest location to user visitors. It is a good idea to combine the power of WP Rocket caching with Cloudflare CDN to boost the performance of your site.

Rocket CDN Vs Cloudflare

WP Rocket also offers their own RocketCDN which you can integrate CDN section in WP Rocket settings. RocketCDN is from StackPath and you need $7.99 per month to get started with this premium only service. To use RocketCDN, you need to create CDN redirect by setting up CNAME in your DNS zone and add the CNAME in CDN settings page. However, Cloudflare is a free CDN and you do not need to create CNAME record for using Cloudflare in WordPress.

What you need is to change the nameserver of your domain pointing to Cloudflare servers and route entire traffic through them. This helps to apply protect your site and improve the content delivery to users. To use Cloudflare with WP Rocket, you need to enable an add-on and no need to use the CDN section.

WP Rocket Cloudflare Add-on

To use WP Rocket with Cloudflare, you have to enable an add-on that by default comes with WP Rocket plugin. It is not mandatory to use the add-on when using Cloudflare CDN with WP Rocket. However, the add-on helps to optimize the settings in your Cloudflare account to work the CDN setup properly with caching.

Enabling Cloudflare Add-on

Login to your WordPress admin panel and navigate to “Settings > WP Rocket” section. Navigate to “Add-ons” menu and scroll down to “Rocket Add-ons” section. At this point, WP Rocket offers two add-ons – Cloudflare and Sucuri. By default, all add-ons status are set to off. Turn on Cloudflare add-on by clicking the button against “Add-ons status” as shown below.

Setting Cloudflare with WP Rocket

After enabling the add-on, click “Modify Options” button to view configuration settings. There are three sections available to optimize the settings with Cloudflare.

Cloudflare credentials
Cloudflare settings
Cloudflare cache

Related Articles:

Cloudflare Credentials

To use WP Rocket with Cloudflare, you need to allow the plugin to access your Cloudflare account. This can be done by adding Cloudflare global API key, zone ID along with your login email address.

Go to your Cloudflare account and select your site to view the dashboard. You will land on “Overview” section and scroll down to view “API” section (this will show on the right sidebar). You can find the Zone ID here, copy this and paste in your WP Rocket Zone ID text box. After that click on “Get your API token” link showing just below your account ID.

This will take you to “API Tokens” section in your account profile. You can see “Global API Key” and “Origin CA Key” under “API Keys” section. Click “View” button against global API key option.

You need to enter your Cloudflare account password to view the global API key. So, enter your password and click “View” button in the pop-up.

Now, you will get your global API key which you can copy and paste in WP Rocket “Global API key” text box.

Note: For account email, make sure to provide you Cloudflare account email and not WP Rocket or WordPress admin email address.

Cloudflare Settings

Next section, you will have three options as shown below. Leave the developer mode and relative protocol options turned off and enable “Optimal settings” option.

Development mode will turn on the development mode in your Cloudflare account and disable caching/minify settings. You can use development mode testing the changes instantly without interfering with Cloudflare caching. Otherwise, just leave this option disabled. Enable optimal settings to automatically turn on the following features in Cloudflare:

Auto Minify – enable CSS, JSS and HTML minify options.
Change browser cache TTL to 1 year from the default value of 4 hours.
Disable Rocket Loader feature.
Enable caching level to standard.

The relative protocol option will change the URL of all static files like images to use // instead of http:// or https://. WP Rocket recommend using this only if the SSL status in Cloudflare is set to flexible. You can check the SSL/TLS status under “SSL/TLS > Overview” section in your Cloudflare account’s dashboard.

If you are using full or strict mode, then disable relative protocol option.

Cloudflare Cache

This is the final settings and you can click “Clear All Cloudflare Cache Files” only when you want to delete Cloudflare cached content. This is the same option as “Purge Everything” available under “Caching > Configuration” section of your Cloudflare account.

After finishing the setup, click on “Save Changes” button to connect WP Rocket and Cloudflare. You will see the summary of optimal settings changed in your Cloudflare account and WP Rocket will start preloading the pages.

Final Remarks

As you can see, WP Rocket simplifies the Cloudflare settings with an add-on. You just need to connect your Cloudflare account and enable optimal settings to use the CDN seamlessly. If something breaks your site, you can disable the add-on and make changes directly in Cloudflare account.

How to Properly Setup Cloudflare with WP Rocket Plugin?