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. © 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 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. 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. © The Webmaster. 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. © The Webmaster. 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. © The Webmaster. 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. © The Webmaster. 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. © The Webmaster.

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 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 © The Webmaster. 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 © The Webmaster. Configure Page Cache Page cache - Tick the box to Enable.

- 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 © The Webmaster. 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 © The Webmaster. 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

- 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 © The Webmaster. Configure Database Cache Database Cache - Enable

- 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 © The Webmaster. Configure Object Cache Object Cache - Enable

- 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. Miscellaneous Enable Google Page Speed Dashboard Widget - Do not enable

- Do not enable Show page rating in admin bar - Do not enable

- Do not enable Verify Rewrite Rules - Keep enabled

- Keep enabled Enable file locking - Do not enable

- Do not enable Optimize disk enhanced page and minify disk caching for NFS - Keep disabled

- Keep disabled Anonymously track usage to improve product quality - Do not enable

- Do not enable Enable caching statistics - Enable only for Pro users.

I recommend the following settings: × Miscellaneous © The Webmaster. 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 © The Webmaster. 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 © The Webmaster.

Part 2.2. Page Cache

How to Configure Page Cache in W3 Total Cache 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 © The Webmaster. Configure Page Cache - General Cache front page - Enable

- Enable Cache feeds: site, categories, tags, comments - Enable

- Enable Cache SSL (https) requests - Enable (if you use SSL)

- Enable (if you use SSL) Cache URIs with query string variables - Enable (if available)

- Enable (if available) Cache 404 (not found) pages - Disable

- Disable Don’t cache pages for logged in users - Enable

- 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 URI s 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 © The Webmaster. Configure Aliases Cache alias hostnames - Ignore

- Ignore Additional home URLs - Ignore I recommend redirecting alias hostnames to your main hostname. Duplicate content is very bad for SEO. × Configure Aliases © The Webmaster. Configure Cache Preload Settings Automatically prime the page cache - Enable

- Enable Update interval - 900 seconds

900 seconds Pages per interval - 10 (If you have a more powerful server or VPS, you can increase this)

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 .

- Enter the URL of your sitemap. If you are using Yoast it will be . 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 © The Webmaster. 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.

- Enable Front Page, Post page, Blog feed. Specify the feed types to purge - Keep Rss2 (default)

- Keep Rss2 (default) Limit page purging - Enter 15 (although more powerful servers can handle a higher number).

- Enter 15 (although more powerful servers can handle a higher number). Additional Pages - Leave blank

- 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 © The Webmaster. Configure REST API REST API - Keep default - Don’t Cache

× Configure REST API © The Webmaster. Configure Advanced Section Late initialization - Default - Disabled

- Default - Disabled Late caching - Default - Disabled

- Default - Disabled Compatibility Mode - Default - Disabled

- Default - Disabled Charset - Default - Disabled

- Default - Disabled Reject HEAD requests - Default - Disabled

- Default - Disabled Garbage collection interval - 3600 seconds (although this will be grayed out if not caching to disk)

- 3600 seconds (although this will be grayed out if not caching to disk) Comment cookie lifetime - 1800 seconds

- 1800 seconds Accepted query strings - Leave blank

- Leave blank Rejected user agents - Leave blank

- Leave blank Rejected cookies - Keep default

- Keep default Never cache the following pages - Keep default

- Keep default Never cache pages associated with these categories - Keep default

- Keep default Never cache pages that use these tags - Keep default

- Keep default Never cache pages by these authors - Keep default

- Keep default Never cache pages that use these custom fields - Keep default

- Keep default Cache exception list - Keep default

- Keep default Non-trailing slash pages - Keep default

- Keep default Specify page headers - Keep default

- 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 © The Webmaster.

Part 2.3. Minify

How to Configure Minification in W3 Total Cache 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 © The Webmaster. 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 © The Webmaster.

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 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 © The Webmaster. Database Cache - General Don’t cache queries for logged in users - Enable × Database Cache - General © The Webmaster. Database Cache - Advanced Maximum lifetime of cache objects - High traffic sites: 180 seconds. Low traffic sites: 7200 seconds.

- 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.

- Enter 3600 seconds if caching to disk, otherwise it will be grayed out. Never cache the following pages - Leave blank

- Leave blank Ignored query stems - Add wc_session if using WooCommerce, else leave as default.

- Add if using WooCommerce, else leave as default. Reject query words - Leave as default

- 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 © The Webmaster.

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 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 © The Webmaster. Object Cache - Advanced Default lifetime of cache objects - High traffic sites: 180 seconds. Low traffic sites: 7200 seconds.

- 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.

- Enter 3600 seconds if caching to disk; otherwise it will be grayed out. Global groups - Leave as default

- Leave as default Non-persistent groups - Leave as default

- Leave as default Enable caching for wp-admin requests - Disable. This can cause issues.

- 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 © The Webmaster.

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 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 © The Webmaster. Browser Cache - General Set Last-Modified header - Enable

- Enable Set expires header - Enable

- Enable Set cache control header - Enable

- Enable Set entity tag (eTag) - Enable

- Enable Set W3 Total Cache header - Enable

- Enable Enable HTTP (gzip) compression - Enable

- Enable Prevent caching of objects after settings change - Leave Blank

- Leave Blank Remove query strings from static resources - Leave Blank

- Leave Blank Prevent caching exception list - Leave Blank

- Leave Blank Don’t set cookies for static files - Enable

- Enable Do not process 404 errors for static objects with WordPress - Enable

- Enable 404 error exception list - Leave as Default

- Leave as Default Rewrite URL structure of objects - Leave Blank × Browser Cache - General © The Webmaster. CSS & JS Set Last-Modified header - Enable

- Enable Set expires header - Enable

- Enable Expires header lifetime - Keep it as 31536000 seconds

- Keep it as 31536000 seconds Set cache control header - Enable

- Enable Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”

- Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)” Set entity tag (eTag) - Enable

- Enable Set W3 Total Cache header - Enable

- Enable Enable HTTP (gzip) compression - Enable

- Enable Prevent caching of objects after settings change - Leave blank

- Leave blank Remove query strings from static resources - Leave Blank

- Leave Blank Disable cookies for static files - Enable × CSS & JS © The Webmaster. HTML & XML Set Last-Modified header - Enable

- Enable Set expires header - Enable

- Enable Expires header lifetime - High traffic sites: 3600 seconds. Low traffic sites: 10800 seconds (or more, depending how often your content changes).

- High traffic sites: 3600 seconds. Low traffic sites: 10800 seconds (or more, depending how often your content changes). Set cache control header - Enable

- Enable Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”

- Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)” Set entity tag (ETag) - Enable

- Enable Set W3 Total Cache header - Enable

- Enable Enable HTTP (gzip) compression - Enable × HTML & XML © The Webmaster. Media & Other Files Set Last-Modified header - Enable

- Enable Set expires header - Enable

- Enable Expires header lifetime - Enter 31536000 seconds

- Enter 31536000 seconds Set cache control header - Enable

- Enable Cache Control policy - Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)”

- Select “cache with max-age (“public, max-age=EXPIRES_SECONDS”)” Set entity tag (ETag) - Enable

- Enable Set W3 Total Cache header - Enable

- Enable Enable HTTP (gzip) compression - Enable

- Enable Prevent caching of objects after settings change - Leave blank

- Leave blank Remove query strings from static resources - Leave Blank

- Leave Blank Disable cookies for static files - Enable × Media & Other Files © The Webmaster. 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 © The Webmaster.

Part 2.7. Ignore the remainder of the Sections

How to Configure the remainder of the settings in W3 Total Cache Ignore User Agent Groups You can safely ignore all settings in this section. Ignore Referrer Groups You can safely ignore all settings in this section. Ignore Cookie Groups You can safely ignore all settings in this section. 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. Ignore Fragment Cache You can safely ignore all settings in this section. Ignore Monitoring You can safely ignore all settings in this section. 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 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 © The Webmaster.

Part 3. How to set up CloudFlare

How to set up CloudFlare 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. © The Webmaster. Add a Site to CloudFlare Add Your Site - Click the “Add a Site” button

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 a Site to CloudFlare © The Webmaster. Enter your domain name Enter Domain name - Enter your domain name in the box and click “Add Site”

× Enter your domain name © The Webmaster. Wait while CloudFlare queries your DNS records Click Next

CloudFlare will take a few seconds to query your DNS records. Click Next to verify, and activate your site on CloudFlare. × Wait while CloudFlare queries your DNS records © The Webmaster. 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 © The Webmaster. Confirm Plan Click 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. × Confirm Plan © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster. 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 © The Webmaster.

Part 4. How to Configure CloudFlare for WordPress

How to Configure CloudFlare for WordPress 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. © The Webmaster. Activate the CloudFlare extension. Click Activate - This activates the extension.

× Activate the CloudFlare extension. © The Webmaster. Go to the CloudFlare extension settings. Click Settings - View all the CloudFlare extension settings.

× Go to the CloudFlare extension settings. © The Webmaster. 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. © The Webmaster. 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. © The Webmaster. 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

- Last 6 hours Cache time - 180

- 180 Page caching - Keep Disabled

× Configure CloudFlare General Settings. © The Webmaster. 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

- Keep Disabled Cache time - Agressive (cache all static resources, including ones with a query string)

- Agressive (cache all static resources, including ones with a query string) Query String Sorting - Keep Disabled

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

- 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

- 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 © The Webmaster. Configure CloudFlare: Content Processing Rocket Loader - On (automatically run on the JavaScript resources on your site)

- On (automatically run on the JavaScript resources on your site) Minify JS - Enable

- Enable Minify CSS - Enable

- Enable Minify HTML - Enable

- Enable Server side exclude - Keep Disabled

- Keep Disabled Email obfuscation - Enable

- Enable Response buffering - Not available on the Free Plan

- Not available on the Free Plan Prefetch preload - Not available on the Free Plan

- Not available on the Free Plan Mobile Redirect - Keep enabled (default)

- 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 © The Webmaster. Configure CloudFlare: Image Processing Hotlink Protection - Keep Disabled

- Keep Disabled Mirage - Pro Plans only - Enable

- 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 © The Webmaster. Configure CloudFlare: Protection Security Level - Medium

- Medium Browser integrity check - Enable

- Enable Always Online - Enable

- Enable Web Application Firewall - Pro Plans Only - Enable

- Pro Plans Only - Enable Advanced DDoS protection - Enabled by default

- 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 © The Webmaster. Configure CloudFlare: Protection IP geolocation - Enable

- Enable IPv6 - Enable

- Enable True client IP - Enable Keep these enabled for maximum compatibility with third-party themes \ plugins and hosting providers. × Configure CloudFlare: Protection © The Webmaster. 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.

- 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.

- Disabled by default. TLS 1.2 Only - Disable

- 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 © The Webmaster.

Frequently Asked questions