The following steps were completed to setup CloudFlare using W3 Total Cache, as part of both the 2016 Speed Study on CloudFlare & W3 Total Cache as well as the 2017 Speed Study on CloudFlare & W3 Total Cache.

W3 Total Cache Logocloudflare-logo

How to Setup CloudFlare & W3 Total Cache – Step by Step

Step 1: We setup CloudFlare following the previous tutorial on Setting up CloudFlare. Then deactivate WP Rocket and activate W3 Total Cache. The tutorial on How to Setup W3 Total Cache can be found here.

Step 2: Go to W3 Total Cache settings and click Extensions. Then find CloudFlare and click Activate.

Activate CloudFlare within W3 Total Cache - Screenshot 1

Step 3: Click Settings.

CloudFlare Settings - Screenshot 2

Step 4: Now it’s time to authorize our CloudFlare account. Click Authorize.

Authorize CloudFlare Account - Screenshot 3

Steps 5-7: Enter your CloudFlare account details, including the email you used during the setup of CloudFlare, plus the API key (found in My Settings within CloudFlare account). Then click Next.

CloudFlare Account Details - Screenshot 4

Step 8: To complete the setup, simply click Save Settings & Purge Caches.

Save Settings & Purge Caches - Screenshot 5

Step 9: The final recommended step is to ensure the Auto Minify settings are unchecked within the CloudFlare account. This is to prevent clashing with the Minify we already have setup within W3 Total Cache.

Turn off Minify in CloudFlare - Screenshot 6

Questions?

If you have any questions about this tutorial on How to Setup CloudFlare with W3 Total Cache, please feel free to ask in the comments below and I will try my best to answer them 🙂