How To Make WordPress Faster Using W3 Total Cache and CloudFlare

Site Speed is important. It affects your place in the Google Search results, and affects usability, reducing bounce rates and increasing conversions. Failure to act is not an option. Furthermore, it's easy with W3 Total Cache and CloudFlare.

NB. This tutorial was last tested to work with WordPress 5.0.1, W3 Total Cache Version 0.9.7, and CloudFlare on January 3rd, 2019.

Slow sites really suck. Just ask anyone. If I’m trying to load a web page, and have to wait for more than a second or two, I’m out of there.

That’s why I am going to show you how to make your WordPress site significantly faster by implementing W3 Total Cache and CloudFlare. With my optimal settings, your site will literally fly, I promise.

But why do you need a fast website, I hear you ask.

There are multiple reasons, and they are best seen in light of the following information:

Google did some research into the relationship between page load time and bounce rate and found that:

  • The average time it takes to load a mobile landing page fully was around 15 seconds in February 2018, an improvement of 7 seconds from 2017.
  • 53% of mobile site visits leave a page that takes longer than three seconds to load.

Here are the full stats from Google:

Mobile page speed benchmarks relating to bounce rate.
Mobile page speed benchmarks relating to bounce rate. © Google

You get the point.

This can really hurt a company’s bottom line, with less traffic, and ultimately resulting in fewer sales or advertising revenue.

Why are Unoptimized WordPress sites so slow?

Let’s say I visit a page on an unoptimized WordPress site.

It can take many seconds to load because WordPress builds that page from scratch. When a user requests the page in the browser, it is created using PHP templates, and is populated with information from a database.

The problem is confounded because many WordPress theme and plugin developers produce all-singing, all-dancing themes, and plugins.

They try and do everything for everyone to appeal to as many people as possible, because, you know, sales. This means more templates, PHP scripts, and database calls. Resulting in, of course, slower sites.

You get the picture. Unoptimized WordPress sites are slooooooooow.

Thankfully, there is a solution, and it involves W3 Total Cache and CloudFlare.

How will W3 Total Cache and CloudFlare improve your page speed?

The W3 Total Cache WordPress Plugin boosts your site speed by caching the dynamically rendered portions of your page into plain HTML. This means subsequent visitors will see a pre-rendered HTML version of a web page instead of it being created on demand. It integrates seamlessly with many content delivery networks, including the CloudFlare CDN for increased site performance.

In addition to caching the HTML of the page, W3 Total Cache can minify, compress and enable browser caching of your pages to reduce bandwidth usage by up to 80%.

CloudFlare increases your site speed by using a CDN to cache your static files at multiple servers around the world, instead of just one server. Because the files are served closer to your visitors, they load significantly faster.

Another option (which may be suitable) for CloudFlare users is to use Page Rules to cache the HTML of your page and server those via the CDN.

There are many other website optimization benefits to using CloudFlare, including Javascript optimization, Image Optimization, DDoS protection, HTTP/2, Browser, Argo Smart Routing and Tiered Caching.

I’ve kept this tutorial simple, but there is a lot to get through. You should allow between 30 minutes and an hour to set everything up. It will be worth it, I promise.

Part 1. How to Install the W3 Total Cache Plugin

How to Install W3 Total Cache
  1. Uninstall other caching plugins (if any).
    The plugin is not compatible with other caching plugins, so make sure these have all been uninstalled before proceeding further.
  2. In the WordPress admin area, click ‘Plugins’ in the left hand menu.
    To install the Plugin, go to the “Plugins” option in the left-hand menu of your WordPress Admin panel.
    In the WordPress admin area, click 'Plugins' in the left hand menu.
  3. Click ‘Add New’ in the ‘Plugins’ sub-menu.
    Underneath where you previously selected “Plugins” in the admin menu, you will see an option to “Add New”. This will start the process of adding a new plugin.
    Click 'Add New' in the 'Plugins' sub-menu.
  4. Search for the W3 Total Cache Plugin.
    In the search box type “W3 Total Cache”. The list of plugins will automatically update to show the W3 Total Cache Plugin as the first entry.
    Search for the W3 Total Cache Plugin.
  5. Click ‘Install Now’ to install the WordPress Plugin.
    Click the “Install Now” button. After a few seconds, the ‘Install Now’ button will change to ‘Activate’.
    Click 'Install Now' to install the WordPress Plugin.
  6. Activate W3 Total Cache.
    Click the ‘Activate’ button to activate the W3 Total Cache. Once you have done this, you will be ready for Part 2 of this tutorial.
    Activate W3 Total Cache.

Part 2. How to Configure W3 Total Cache Settings for CloudFlare

It can be tempting to install W3 Total Cache, enable everything, and then call it a day.

While this is feasable, you can get significantly better results if you take 10 minutes to customize it properly.

I’ll take you through all the steps in no time. Don’t worry.

After showing you how to configure W3 Total Cache, I’ll walk you through how to set up CloudFlare.

Part 2.1. General Settings

How to Configure General Settings in W3 Total Cache
  1. Click the General Settings menu item under Performance

    The company behind the plugin lists all the settings under the “Performance” option in the WordPress menu.

    In order to access the General Settings, click Performance, then General Settings.

    Click the General Settings menu item under Performance
  2. General Section - Preview Mode
    • Preview Mode - Click Enable.

    The General Section within the General settings is where you enable “Preview Mode”.

    This does exactly what is says on the tin. You can preview all changes before they are made live. To make changes live, either disable, or deploy the changes.

    I will remind you to disable Preview Mode later.

    General Section - Preview Mode
  3. Configure Page Cache
    • Page cache - Tick the box to Enable.
    • Page cache method - Select “Disk: Enhanced”.

    Page cache is pretty much the most important feature of W3 Total Cache. Even if you just use this you will see massive gains.

    Page caching takes a copy of the page after it has been created so that subsequent copies of the page can be retrieved using that copy instead of having to run all the PHP scripts and database queries again.

    In addition to significantly improving page speed, it also reduces the load on your server allowing you to serve more visitors on a cheaper plan. I highly recommend SSD hosting with WordPress and W3 Total Cache.

    You can read my commentary on the different Caching Methods here.

    NB. If you are installing W3 Total Cache on a brand new website, you may get an error asking you to enable Fancy Permalinks. You should do this and repeat the step above.

    Configure Page Cache
  4. Configure Minification
    • Minify - Leave disabled.

    CloudFlare, intelligently minifies and combines JavaScript, as well as optimizing its loading order to ensure an optimized page load time (via its Rocket Loader).

    CloudFlare does not combine CSS which is a common issue with website display problems caused by this plugin and only minifies them.

    As such I recommend not duplicating minification here.

    Configure Minification
  5. Configure Opcode Cache

    If your hosting provider offers Opcache you may have the following option available. Some hosts automatically configure Opcache at the server level, so this option may not be available, even though it is enabled. Check with your hosting provider if you are unsure.

    If available, use the following settings:

    • Opcode Cache - Zend Opcache
    • Validate timestamps - Enable

    Zend Opcache is the default Opcache for PHP 5.5 and above, as all other Opcaches have not been updated to work with the later versions of PHP.

    Opcache works by caching the results of PHP scripts significantly speeding up later reuse.

    Configure Opcode Cache
  6. Configure Database Cache
    • Database Cache - Enable
    • Database Cache Method - Select “Memcached”. If Memcached is unavailable, choose disk.

    The database cache will store the results of any database queries to increase the speed of your website by allowing your server to retrieve the data faster. Memory-based caching, such as Memcached, is significantly faster than disk-based. I highly recommend choosing a host that offers this.

    For disk-based caching, I recommend using a hosting plan with SSD storage.

    NB. Several years ago, Database caching would actually make your website slower on budget hosts due the limitations on CPU usage. With significant improvements to web hosting servers over the last few years this is now rarely the case.

    Configure Database Cache
  7. Configure Object Cache
    • Object Cache - Enable
    • Object Cache Method - Select “Memcached”. If Memcached is unavailable, choose disk.

    By default, WordPress has a caching system as standard called Object Caching. Object Cache will store anything into cache utilizing this WordPress Caching API to reduce the amount of calls needed to the database and thus speeding up your site.

    For disk-based caching, I recommend using a hosting plan with SSD storage.

    Configure Object Cache
  8. Configure Browser Cache
    • Browser Cache - Enable

    This stores a copy of the webpage in the User’s browser, so that if they revisit the page it will load from their own browser cache rather than requesting the page again from the server.

    This setting also enables HTTP compression to reduce the size of your pages and static files. We will also enable Brotli compression in CloudFlare to further optimally compress the static files.

    Configure Browser Cache
  9. Configure CDN
    • CDN - Keep disabled

    CloudFlare implements a CDN, but it is dealt with under a separate extension (which we will look at later). Therefore, there is nothing to configure here.

    CDN stands for Content Delivery Network. As the name suggests a CDN will distribute your static files to various servers around the world, so that when a user requests the webpage those assets will be served locally rather than from the main server. This can significantly speed up the load time of your website from users that are located a large distance from the server.

    Configure CDN
  10. Configure Reverse Proxy
    • Enable Varnish Cache Purging - Ignore

    A reverse proxy is a type of server that retrieves resources from one or more other servers and can have many benefits such as distributing the load between multiple servers, compressing content or speeding up the serving of dynamic content. Of course, this depends on the individual configuration of the server.

    Varnish caching is an outdated technology as it does not support encryption (HTTPS).

    Configure Reverse Proxy
  11. Configure Monitoring
    • New Relic - Ignore

    New Relic is a third party service that will provide detailed performance statistics of your website and server. Unless you have a particular reason to use this, we recommend you keep it disabled.

    Configure Monitoring
  12. Configure Fragment Cache
    • Fragment Cache Method - Ignore

    Fragment caching is where you can cache specific parts of the page, such as sidebars, headers, or footers. Fragment caching is only available in specific premium themes, such as those by Studiopress.

    Configure Fragment Cache
  13. Configure Licensing
    If you have purchased the Pro Version of W3 Total Cache you can add the license key here to enable additional functionality.
    Configure Licensing
  14. Miscellaneous
    I recommend the following settings:

    • Enable Google Page Speed Dashboard Widget - Do not enable
    • Show page rating in admin bar - Do not enable
    • Verify Rewrite Rules - Keep enabled
    • Enable file locking - Do not enable
    • Optimize disk enhanced page and minify disk caching for NFS - Keep disabled
    • Anonymously track usage to improve product quality - Do not enable
    • Enable caching statistics - Enable only for Pro users.
    Miscellaneous
  15. Configure Debugging
    • Debug Mode - Keep disabled

    When you enable the Debug mode detailed information about your caching gets added to the HTML source code, which is publicly viewable. As such this will increase the size of your page, and create more work for your web server. You should only enable this when you are trying to troubleshoot an issue.

    Configure Debugging
  16. Import / Export Settings
    You can easily import and export your settings files so that you can easily and quickly configure your W3TC settings. This is very useful if you have spent 30 minutes or so configuring your settings, and want to back them up, or if you wish to take a copy before making changes so you can easily revert them.
    Import / Export Settings

Part 2.2. Page Cache

How to Configure Page Cache in W3 Total Cache
  1. Click the Page Cache menu item under Performance
    In order to access the Page Cache Settings, click Performance, then Page Cache.
    Click the Page Cache menu item under Performance
  2. Configure Page Cache - General
    • Cache front page - Enable
    • Cache feeds: site, categories, tags, comments - Enable
    • Cache SSL (https) requests - Enable (if you use SSL)
    • Cache URIs with query string variables - Enable (if available)
    • Cache 404 (not found) pages - Disable
    • Don’t cache pages for logged in users - Enable
    • Don’t cache pages for following user roles - Disable

    There are a couple of points to note with the settings above:

    In some cases, the “Cache URIs with query string variables” can cause some issues such as page cache not refreshing properly. If you have pages using query strings, then you may want to test this option.

    If, when you log out of WordPress, you still see the admin bar, check that you have enabled the “Don’t cache pages for logged in users” option. I’ve written about this issue more here.

    Configure Page Cache - General
  3. Configure Aliases
    • Cache alias hostnames - Ignore
    • Additional home URLs - Ignore

    I recommend redirecting alias hostnames to your main hostname. Duplicate content is very bad for SEO.

    Configure Aliases
  4. Configure Cache Preload Settings
    • Automatically prime the page cache - Enable
    • Update interval - 900 seconds
    • Pages per interval - 10 (If you have a more powerful server or VPS, you can increase this)
    • Sitemap URL - Enter the URL of your sitemap. If you are using Yoast it will be sitemap_index.xml.
    • Pre-load the post cache upon publish events - Enable

    A page is only cached after a visitors loads a page in the browser. To accelerate this process W3 Total Cache can prime at a set frequency.

    This feature significantly benefits sites or pages that receive fewer visitors.

    Configure Cache Preload Settings
  5. Configure Purge Policy: Page Cache
    • Specify the pages and feeds to purge when posts are created, edited, or comments posted - Enable Front Page, Post page, Blog feed.
    • Specify the feed types to purge - Keep Rss2 (default)
    • Limit page purging - Enter 15 (although more powerful servers can handle a higher number).
    • Additional Pages - Leave blank
    • Purge sitemaps - There should be a default regular expression here. Leave it as is.

    When you create a new post, or change content or even add comments unless you update the cache, the changes will not be immediately viewable on the pages that list all your posts. This is where you set what pages to refresh upon specified events.

    Configure Purge Policy: Page Cache
  6. Configure REST API
    • REST API - Keep default - Don’t Cache
    Configure REST API
  7. Configure Advanced Section
    • Late initialization - Default - Disabled
    • Late caching - Default - Disabled
    • Compatibility Mode - Default - Disabled
    • Charset - Default - Disabled
    • Reject HEAD requests - Default - Disabled
    • Garbage collection interval - 3600 seconds (although this will be grayed out if not caching to disk)
    • Comment cookie lifetime - 1800 seconds
    • Accepted query strings - Leave blank
    • Rejected user agents - Leave blank
    • Rejected cookies - Keep default
    • Never cache the following pages - Keep default
    • Never cache pages associated with these categories - Keep default
    • Never cache pages that use these tags - Keep default
    • Never cache pages by these authors - Keep default
    • Never cache pages that use these custom fields - Keep default
    • Cache exception list - Keep default
    • Non-trailing slash pages - Keep default
    • Specify page headers - Keep default
    • Handle XML mime type - Keep default

    Sometimes you may not want to Cache Certain pages because the data changes regularly, or you have issues with a specific page displaying properly when cached. Add any such URLs to the Cache Exception List.

    For the most part, I have kept to the default W3 Total Cache settings here.

    Configure Advanced Section

Part 2.3. Minify

How to Configure Minification in W3 Total Cache
  1. Click the Minify menu item under Performance
    In order to access the Minify Settings, click Performance, then Minify.
    Click the Minify menu item under Performance
  2. Keep Minification Disabled

    You can ignore this section. I recommend you use CloudFlare to minify your static assets such as CSS and JS.

    W3 Total Cache’s Minify can cause issues with third-party plugins, including Jetpack. For this reason, CloudFlare is better.

    Keep Minification Disabled

Part 2.4. Database Cache

The Database Cache will store the most commonly used queries used by your WordPress website to reduce the time it takes to load the dynamically generated parts of your website.

How to Configure Database Cache in W3 Total Cache
  1. Click the Database Cache menu item under Performance
    In order to access the Database Cache Settings, click Performance, then Database Cache.
    Click the Database Cache menu item under Performance
  2. Database Cache - General
    • Don’t cache queries for logged in users - Enable
    Database Cache - General
  3. Database Cache - Advanced
    • Maximum lifetime of cache objects - High traffic sites: 180 seconds. Low traffic sites: 7200 seconds.
    • Garbage collection interval - Enter 3600 seconds if caching to disk, otherwise it will be grayed out.
    • Never cache the following pages - Leave blank
    • Ignored query stems - Add wc_session if using WooCommerce, else leave as default.
    • Reject query words - Leave as default
    • Reject constants - Leave as default

    Setting a large maximum lifetime of cache objects may use up a significant disk space. W3 Total Cache recommends a lifetime of just 180 seconds, or 3 minutes. I would recommend at least 7200 seconds or higher for very low traffic websites.

    If you have an extremely busy website, you can reduce the maximum lifetime of cache objects, and reduce the Garbage collection interval (deletion of expired cache).

    Database Cache - Advanced

Part 2.5. Object Cache

The object cache will store the results of common runtime operations that again will reduce CPU usage and in turn also speed up your website.

How to Configure Object Cache in W3 Total Cache
  1. Click the Object Cache menu item under Performance
    In order to access the Database Cache Settings, click Performance, then Database Cache.
    Click the Object Cache menu item under Performance
  2. Object Cache - Advanced
    • Default lifetime of cache objects - High traffic sites: 180 seconds. Low traffic sites: 7200 seconds.
    • Garbage collection interval - Enter 3600 seconds if caching to disk; otherwise it will be grayed out.
    • Global groups - Leave as default
    • Non-persistent groups - Leave as default
    • Enable caching for wp-admin requests - Disable. This can cause issues.
    • Store transients in database - Enable.

    Setting a large maximum lifetime of cache objects may use up a significant disk space. W3 Total Cache recommends a lifetime of just 180 seconds, or 3 minutes. I would recommend at least 7200 seconds or higher for very low traffic websites.

    If you have an extremely busy website, you can reduce the maximum lifetime of cache objects, and reduce the Garbage collection interval (deletion of expired cache).

    Object Cache - Advanced

Part 2.6. Browser Cache

Browser cache stores web pages and static files in the browser so that upon subsequent views the data is retrieved from their saved copy in the browser.

W3 Total Cache uses the browser settings for the Page Cache times.

How to Configure Browser Cache in W3 Total Cache
  1. Click the Browser Cache menu item under Performance
    In order to access the Browser Cache Settings, click Performance, then Browser Cache.
    Click the Browser Cache menu item under Performance
  2. Browser Cache - General
    • Set Last-Modified header - Enable
    • Set expires header - Enable
    • Set cache control header - Enable
    • Set entity tag (eTag) - Enable
    • Set W3 Total Cache header - Enable
    • Enable HTTP (gzip) compression - Enable
    • Prevent caching of objects after settings change - Leave Blank
    • Remove query strings from static resources - Leave Blank
    • Prevent caching exception list - Leave Blank
    • Don’t set cookies for static files - Enable
    • Do not process 404 errors for static objects with WordPress - Enable
    • 404 error exception list - Leave as Default
    • Rewrite URL structure of objects - Leave Blank
    Browser Cache - General
  3. CSS & JS
    • Set Last-Modified header - Enable
    • Set expires header - Enable
    • Expires header lifetime - Keep it as 31536000 seconds
    • Set cache control header - Enable
    • Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”
    • Set entity tag (eTag) - Enable
    • Set W3 Total Cache header - Enable
    • Enable HTTP (gzip) compression - Enable
    • Prevent caching of objects after settings change - Leave blank
    • Remove query strings from static resources - Leave Blank
    • Disable cookies for static files - Enable
    CSS & JS
  4. HTML & XML
    • Set Last-Modified header - Enable
    • Set expires header - Enable
    • Expires header lifetime - High traffic sites: 3600 seconds. Low traffic sites: 10800 seconds (or more, depending how often your content changes).
    • Set cache control header - Enable
    • Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”
    • Set entity tag (ETag) - Enable
    • Set W3 Total Cache header - Enable
    • Enable HTTP (gzip) compression - Enable
    HTML & XML
  5. Media & Other Files
    • Set Last-Modified header - Enable
    • Set expires header - Enable
    • Expires header lifetime - Enter 31536000 seconds
    • Set cache control header - Enable
    • Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”
    • Set entity tag (ETag) - Enable
    • Set W3 Total Cache header - Enable
    • Enable HTTP (gzip) compression - Enable
    • Prevent caching of objects after settings change - Leave blank
    • Remove query strings from static resources - Leave Blank
    • Disable cookies for static files - Enable
    Media & Other Files
  6. Security Headers

    There is one important change to make here to remove a bug in the current version of W3 Total Cache. The Default value for the Referrer policy became “” (blank) in an update in early 2018, but in fact should be “origin”. In any event, because we use CloudFlare for Browser Header sescurity I recommend you disable this functionality.

    • Referrer Policy - Disable

    You can safely leave then other security headers as default.

    CloudFlare offers more comprehensive security features, and I will show you how to configure this shortly.

    Security Headers

Part 2.7. Ignore the remainder of the Sections

How to Configure the remainder of the settings in W3 Total Cache
  1. Ignore User Agent Groups
    You can safely ignore all settings in this section.
  2. Ignore Referrer Groups
    You can safely ignore all settings in this section.
  3. Ignore Cookie Groups
    You can safely ignore all settings in this section.
  4. Ignore CDN
    You can safely ignore all settings in this section. You will be using CloudFlare for your CDN, and I will show you how to set CloudFlare up later in the tutorial.
  5. Ignore Fragment Cache
    You can safely ignore all settings in this section.
  6. Ignore Monitoring
    You can safely ignore all settings in this section.
  7. Ignore Extensions (for now)

    I will show you how to install the CloudFlare extension later in the tutorial. You will first need to set up CloudFlare, which I cover below.

    For now, you can ignore all extensions.

Part 2.8. Deploy W3 Total Cache Settings

How to Deploy W3 Total Cache Settings
  1. Deploy W3 Cache Settings

    In Part 2.1, Step 2, I recommended that you activate Preview Mode.

    Now that you have finished configuring W3 Total Cache you should browse your website to ensure there are no display issues. In particular, check the styling or any javascript functionality works as expected.

    Once you are happy, deploy all the changes by clicking the “Deploy” button at the top of the Performance settings page.

    • Preview mode is active - Click Deploy
    Deploy W3 Cache Settings

Part 3. How to set up CloudFlare

How to set up CloudFlare
  1. Sign up to CloudFlare.

    You will need to sign up to CloudFlare here.

    If you already have a CloudFlare account, log in to your existing account.

    Sign up to CloudFlare.
  2. Add a Site to CloudFlare
    Once you are signed in to CloudFlare you will need to add your site. You can add your site on the main dashboard, or “Home”.

    • Add Your Site - Click the “Add a Site” button
    Add a Site to CloudFlare
  3. Enter your domain name
    • Enter Domain name - Enter your domain name in the box and click “Add Site”
    Enter your domain name
  4. Wait while CloudFlare queries your DNS records
    CloudFlare will take a few seconds to query your DNS records. Click Next to verify, and activate your site on CloudFlare.

    • Click Next
    Wait while CloudFlare queries your DNS records
  5. Select a Plan

    The next step is to select a plan.

    I highly recommend the Pro plan for important websites, or websites that get a lot of traffic. It includes a powerful Web Application Firewall (WAF) to keep your WordPress site secure, mobile and image optimizations, and additional page rules.

    To learn more about the different plans, click here. I also wrote a brief overview of CloudFlare, which you can read here.

    For the purposes of this tutorial I will be using the Free Plan.

    • Click the Free Plan - A tick will overlay your choice. You can then click the button to confirm the plan, and proceed further.
    Select a Plan
  6. Confirm Plan
    A website modal (pop-up box) will appear. You will need to confirm your plan choice and agree to their terms and conditions.

    • Click Confirm Plan
    Confirm Plan
  7. Check DNS Records

    In my experience CloudFlare is very good at importing your existing settings. At a minimum you should have an “A” record pointing to your hosting server, and a “CNAME” pointing to the www version of your domain.

    You may have other CNAMEs, A records, and MX records which may relate to any subdomains, cPanel (or other control panel) login pages, and email settings.

    Once you are happy with your settings, click “continue”.

    • Click Continue
    Check DNS Records
  8. Change your Nameservers

    In order to start receiving traffic through CloudFlare you must update your Nameservers at your domain registrar.

    CloudFlare will display your existing nameservers, along with the ones you will need to change them to.

    Underneath, there will be a link “I need help changing my nameservers”. If you click this, you will see instructions for changing your nameserver at Namecheap, Enom, GoDaddy, Netwwork Solutions, along with a generic “other” option.

    I have also written some in-depth instructions for changing your nameserver at Namecheap and GoDaddy here.

    Change your Nameservers
  9. Complete your nameserver setup

    You will have changed your nameservers in the preceding step. CloudFlare will automatically recheck your Nameserver settings, but you can click the “Re-check now” button to check manually.

    You may need to wait up to 48 hours for your Nameservers to update. I have described how you can check the propagation process in the next step.

    Complete your nameserver setup
  10. Wait up to 48 hours for your Nameservers to Propagate

    It may take up to 48 hours for your new nameservers to Propagate and become active. This is completely normal. It usually takes less than 24 hours.

    You can check the progress of the propogation here. Enter your domain name and select NS. See screenshot.

    Wait up to 48 hours for your Nameservers to Propagate
  11. CloudFlare is now protecting your site

    Once everything is working, you will see a message saying the following:

    • Great news! Cloudflare is now protecting your site

    In the next Part I will show you how to configure CloudFlare to work with WordPress.

    CloudFlare is now protecting your site

Part 4. How to Configure CloudFlare for WordPress

How to Configure CloudFlare for WordPress
  1. View all W3 Total Cache extensions.

    It is easy to configure CloudFlare with the W3 Total Cache CloudFlare extension. This links W3 Total Cache via the CloudFlare API allowing you to configure almost all aspects of CloudFlare from within WordPress.

    The CloudFlare extension can be found under the Extensions menu option, under Performance.

    • Click Performance -> Extensions
    View all W3 Total Cache extensions.
  2. Activate the CloudFlare extension.
    • Click Activate - This activates the extension.
    Activate the CloudFlare extension.
  3. Go to the CloudFlare extension settings.
    • Click Settings - View all the CloudFlare extension settings.
    Go to the CloudFlare extension settings.
  4. Copy your CloudFlare API key.
    • Go to your CloudFlare Profile Page (Click the person icon in the top right, then select “My Profile”).
    • Scroll down to the section “API Keys” and click the “View” button next to the “Global API Key”
    • Enter your CloudFlare password to view your API keygen
    • Copy your API key (keep it safe)
    Copy your CloudFlare API key.
  5. Authorize your CloudFlare Credentials.
    • Click Reauthorize
    • Enter your email and API Key and click “Next”
    • Select your domain from the list
    Authorize your CloudFlare Credentials.
  6. Configure CloudFlare General Settings.

    On your Performance Dashboard you will now see some basic statistics for your CloudFlare account. To reduce the load on your server we will sset this to update every 6 hours, with a cache time of 180 minutes.

    I always view the statistics via the CloudFlare site as they are much more informative.

    • Widget statistics interval - Last 6 hours
    • Cache time - 180
    • Page caching - Keep Disabled
    Configure CloudFlare General Settings.
  7. Configure CloudFlare: Caching

    For caching, I recommend using the most agressive setting. This will cache files with query strings uniquely which is useful when css or javascript files related to themes and plugins are updated.

    • Development mode - Keep Disabled
    • Cache time - Agressive (cache all static resources, including ones with a query string)
    • Query String Sorting - Keep Disabled
    • Browser Cache TTL - 691200 (NB - This setting cannot be changed via the plugin (default is 7200) - it appears to be bugged as at 2nd January 2018. You may want to log in directly to CloudFlare and configure this to 8 days if it does not work.)
    • Challenge TTL - 86400
    • Edge Cache TTL - 604800 (1 week)

    As we are only caching static resources (images, css, JavaScript) we can be agresssive with our caching policy for greater performance.

    Configure CloudFlare: Caching
  8. Configure CloudFlare: Content Processing
    • Rocket Loader - On (automatically run on the JavaScript resources on your site)
    • Minify JS - Enable
    • Minify CSS - Enable
    • Minify HTML - Enable
    • Server side exclude - Keep Disabled
    • Email obfuscation - Enable
    • Response buffering - Not available on the Free Plan
    • Prefetch preload - Not available on the Free Plan
    • Mobile Redirect - Keep enabled (default)
    • Enable error pages - Keep Disabled

    CloudFlare’s Rocket Loader is renowned for causing display issues or other broken functionality on websites using JavaScript, although it is significantly better than it used to be since it was refreshed in July 2018.

    It is highly recommended checking your website carefully after implementation. If you find after enabling Rocket Loader that a specific page doesn’t work (for example a page that uses advanced functionality) then you can set a page rule to turn Rocket Loader off for that page. If none of your pages display correctly, then you will need to turn it off.

    Alternatively, ask your web developer to disable Rocket Loader for specific files or scripts. This is easily implemented by a developer, and something I even do on this site.

    Configure CloudFlare: Content Processing
  9. Configure CloudFlare: Image Processing
    • Hotlink Protection - Keep Disabled
    • Mirage - Pro Plans only - Enable
    • Images polishing - Pro Plans only - Lossy (Further reduce the size of JPEG files for faster image loading)

    I recommend keeping Hotlink Protection turned off as it will prevent your images from appearing on social media sites such as Pinterest. If you don’t want other sites to use your images then you can turn it on.

    Mirage and Polish images are a Pro Plan only feature. I highly recommend the Pro Plan if you can afford it (it’s what I use on this site). Mirage will optimize the loading of images on your website for slow connections and mobile users. Polish Images will Optimize your images for faster page load times.

    As this tutorial is based upon the free plan, I have these features disabled in the screenshot.

    Configure CloudFlare: Image Processing
  10. Configure CloudFlare: Protection
    • Security Level - Medium
    • Browser integrity check - Enable
    • Always Online - Enable
    • Web Application Firewall - Pro Plans Only - Enable
    • Advanced DDoS protection - Enabled by default
    • Max Upload - 100

    The Web Application Firewall offers powerful protection for WordPress sites with special rules to ensure Malicious visitors cannot hack your website. This feature is only available with the Pro Plan and above.

    Configure CloudFlare: Protection
  11. Configure CloudFlare: Protection
    • IP geolocation - Enable
    • IPv6 - Enable
    • True client IP - Enable

    Keep these enabled for maximum compatibility with third-party themes \ plugins and hosting providers.

    Configure CloudFlare: Protection
  12. Configure CloudFlare: SSL
    • SSL - If using SSL set to “Full” if you have an SSL installed on your hosting server. You can use “Flexible” until you install the SSL certificate on your server.
    • Security header (SSL) - Disabled by default.
    • TLS 1.2 Only - Disable
    • TLS client auth - Disable

    HTTPS is a Google Ranking Factor and with the introduction of HTTP/2 it now provides significant performance benefits too.

    As such, I highly recommend that you install a SSL certificate at your host, and configure CloudFlare to work with HTTPS.

    While outside the scope of this tutorial, I have the following comments:

    • Most providers now have one-click install SSL certificates, or will install an SSL certificate for you.
    • After installing the SSL certificate remember to update the WordPress Address (URL) and the Site Address (URL) in the Settings -> General admin section to use HTTPS. To simplify the process I recommend the Really Simple SSL plugin.
    • Until you get around to installing an SSL certificate at your host you can update the WordPress settings to use HTTPS and set CloudFlare to the Flexible SSL setting.
    Configure CloudFlare: SSL

Frequently Asked questions

What are the different types of WordPress Caching?
  • Page Cache — If you use a CMS, such as WordPress, whenever a page is viewed the server has first to query the database and run scripts to understand what form it should take. Page Caching stores a copy of the finished page so it can be retrieved without having first to do all this work for subsequent loads.

  • Database Cache — This stores the results of any database queries, making the retrieval of subsequent duplicate queries faster.

  • Fragment Cache — A page can be made up of various parts (i.e. Main content, Sidebar, Footer, etc.). Fragment Cache works like Page Cache but can store and retrieve each section separately.

  • Object Cache — This stores any calculations made by the WordPress API into the cache.

  • Browser Cache — This places a copy of the webpage in the Users Browser Cache. When that user re-visits the same page using the same browser, it will be loaded from the cache stored on their computer rather than querying the web server.

What are the different caching methods?

Shared Servers:

  • Disk: Basic - This method will invoke a PHP script to serve the cached page.
  • Disk: Enhanced - This method will modify the .htaccess file to direct Apache to a static Cached version of the page, so is much faster, and recommended.

If for whatever reason your website slows as a result of using Disk: Enhanced then we recommend you find a new host. It is very rare that this happens, but it is not unknown.

Dedicated / Virtual Server

While the majority of hosts do not offer these on shared hosting, there are some exceptions, especially on the most expensive plans such as Business Hosting or Semi-dedicated hosting.

  • Opcode: Alternative PHP Cache (known as APC Cache) - This caches the PHP code into RAM, and for a long time was the PHP Opcode Cache of Choice. It is now used much less as it is no longer supported, and will only work with PHP 5.4 and below. There are no plans to make it work with PHP 5.5. and 5.6.
  • Opcode: eAccelerator - A not so common Opcode cache, but one you will see from time to time. Again, it will store compiled PHP scripts into shared memory and will execute code from it speeding up dynamic websites.
  • Opcode: XCache - This is now the go to Opcode cache of choice. It is well supported, and updated and works with all versions of PHP. XCache has both a PHP Cache component that works to cache the PHP files directly into RAM and a Variable Cache component that works off the W3TAPI to cache the data that is subject to change. This is our recommended choice.
  • Opcode: WinCache - This is an Opcode Cache for Windows servers.

Multiple Servers

  • Memcached - Memcached is a distributed system that you will often see when web hosts have multiple server configurations. It speeds up dynamic web applications by reducing database load by storing chunks of data from the results of database calls.

Which WordPress versions are supported?
3.2 or higher.
Will the plugin interfere with other plugins or widgets?
Sometimes you can experience display issues caused by using the minification functionality. For this reason, I recommend using CloudFlare for minification.
No, you should uninstall any other caching solutions (not just disabled).

Jonathan Griffin. Editor @ The Webmaster

About the author

Editor, Hosting Expert, SEO Developer, & SEO Consultant.

Jonathan is currently the Editor & CEO at The Webmaster. He is also an SEO Developer offering consultancy services, primarily to other web development companies. He specializes in the technical side of SEO, including site audits, development of SEO related features, and site structure & strategy.

In his spare time, Jonathan has a passion for learning. He regularly undertakes professional courses on subjects ranging from python, web development, digital marketing, and Advanced Google Analytics.

Read more about Jonathan Griffin on our About Page.