Close

March 28, 2017

Speed Up Your WordPress Site with W3 Total Cache + Cloudflare

Boost WordPress site speed with W3 Total Cache and Cloudflare

Is your website painfully slow? Does it take forever to load? If you answered yes to those questions, you have a problem on your hands.

It’s important to mention that there are a number of things that can greatly affect your website speed, including the following:

  • Your hosting – some hosting providers are terrible (GoDaddy comes to mind), and should be avoided at all costs. If you have a crappy hosting plan, your site will be slow, period. If you see “reduce server response time” in your Google Page Speed Insights, then your hosting is slow and you should find a better web host.
  • The quality of coding in your theme – multi-purpose themes are super bloated and full of features that most people never even use. Instead of choosing a multi-purpose theme, try to select one that will fit your site’s needs, but is not overkill.
  • The amount of WordPress plugins you use on your site. As a general rule, you want to keep the amount of plugins you use to a minimum.

The speed at which your website loads is extremely important, and cannot be overlooked. Honestly, it makes a terrible first impression on those unfortunate people who happen to stumble onto your site. The bottom line is that visitors simply will not wait for your site to load. Instead, they will look for what they need somewhere else, praying that the next site loads faster than yours.

There are a couple things you can do to speed up your WordPress website, and they won’t cost you a dime. In this post, you will learn how to configure the W3 Total Cache plugin to use it in conjunction with the free version of Cloudflare CDN (Content Delivery Network).

What is W3 Total Cache?

A caching plugin is a must-have for your WordPress website, and should be one of the first plugins you install. WordPress is a database-driven content management system (CMS) which relies on queries to and from a MySQL database to fetch and render both pages and posts. W3 Total Cache is a plugin that improves the user experience of your site by caching every aspect of your website, resulting in improved user experience and enhanced server performance. W3 Total Cache reduces website download times by creating static copies of your pages and posts, which makes them load more quickly.

Take the performance of your site even further by using W3 Total Cache in conjunction with the free version of Cloudflare CDN. See all free and paid Cloudflare plans to make sure the free version will work with your site.

Save yourself some time and download my recommended W3 Total Cache settings instead of going through the guide below. To upload them, go to Performance > General Settings > then click on the Import/Export Settings button. You will have to adjust a couple things to reflect your site, but it will still save you a good amount of time (make sure you enter your URL in the settings under Performance > Extensions > Cloudflare). You do not need a DropBox account to download the file, just click on the link and the download will start.

Configuring W3 Total Cache

W3 Total Cache plugin settings

The W3 Total Cache settings are quite extensive, and it is difficult to know which settings are best for optimal performance. I will walk you through all the different settings with the help of images.

1. General Settings

W3 Total Cache general settings

2. Page Cache

Page Cache Settings in W3 Total Cache plugin

3. Minify

If you’re using Cloudflare, Minify should be disabled in General Settings. If you’re not using Cloudflare (or another CDN), then the default settings are recommended.

4. Database Cache

It is recommended that you use the default settings.

5. Object Cache

The default settings should be used here as well.

6. Browser Cache

Browser Cache settings in W3 Total Cache

7. Extensions

Activate Cloudflare in W3 Total Cache Extensions tab

In the Extensions tab, activate Cloudflare, as well as any other extensions you are using. I currently have both Cloudflare and Yoast SEO activated, but everything else is turned off. Your situation may be different, and you may have more extensions enabled.

After you activate Cloudflare, click on settings and configure the extension as seen below.

8. Cloudflare

W3 Total Cache Cloudflare settings.

Enable hotlink protection to prevent crappy websites from using your images on their site, while you’re still hosting them. They do this by posting an image link on their site which refers to the image hosted on your website. It eats up your hosting bandwidth, and can put a huge strain on your hosting server. It’s a good idea to regularly monitor the links to your site using Google Search Console.

After you have configured the Cloudflare extension settings in W3 Total Cache, you will need to create a Cloudflare account.

What is Cloudflare?

Cloudflare is a company that provides a variety of helpful features, including a Content Delivery Network, performance and security optimization, as well as website analytics. By using it in conjunction with W3 Total Cache, you can drastically improve the speed and security of your WordPress website.

Cloudflare signup

You can get started with the free version Cloudflare in just a few minutes. Simply follow this step-by-step guide and you’ll have it up and running in no time.

To register, simply enter your email address and desired password, then click Sign Up. You will then need to check your email to confirm your account. After you let them know that you’re not a robot :), you can proceed with the setup.

After you login to your account, click the + Add Site link in the upper right hand corner.

Enter your website url in the box, then click the Begin Scan button.

Add your site in Cloudflare.

Next, you will click Continue Setup.

Cloudflare continue setup

Then, scroll all the way down and click on Continue.

Verify DNS settings in Cloudflare

Select ‘Free Website’, then continue.

Cloudflare select your plan

At this point, Cloudflare will provide you with two nameservers to use. You will have to change the DNS records at your registrar. In most cases your registrar will be the same as your hosting provider, but not always (e.g. I purchased my domain name for ReyherPhoto through GoDaddy, but host the site on InMotion Hosting).

Change name servers on Cloudflare

In order to change your nameservers, do a search on Google for “change nameservers (or DNS) on “name of your host or registrar.” You will simply replace the old nameservers with the new Cloudflare ones using the custom nameservers option. Now, you can head back over to Cloudflare and click on “I’ve added all missing records, continue.”

At this point, you will configure Cloudflare for optimal performance.

Speed settings in Cloudflare

After optimizing the speed section of Cloudflare, you will want to create a few page rules. You are allowed to use 3 of them with a free account, and can purchase extra ones if you need them. I think you’ll be set if you just use the 3 below.

Create a page rule for your login page. In most cases, your url will look like this: yourdomain.com/wp-admin*. If you have changed the login page (often done for security reasons), then enter the new url followed by an asterisk and no trailing slash.

Then, add the following conditions by choosing the proper dropdowns on the left, and setting the options on the right as seen below. Once you’re finished, click the Save and Deploy button.

Set up page rules in Cloudflare

Now, create another page rule using your homepage url (with a trailing slash) followed by *preview=true*. Again, choose the proper dropdowns on the left, and set the correct options on the right. Then click Save and Deploy.

Page rules in Cloudflare

Create one more page rule for your homepage url followed by a trailing slash and asterisk. Once again, select the proper dropdowns (only two this time :)), and set the correct settings on the right. Once you click the Save and Deploy button, you’re finished setting up Cloudflare’s page rules.

Cloudflare's page rules

Once you’ve completed the setup in Cloudflare, you should purge all caches in W3 Total Cache (see screenshot below). Just hover over “Performance” at the top of your dashboard, and click “Purge All Caches.”

Purge All Caches in W3 Total Cache

Common Problems

Messed-up Site Appearance – In some cases, using minify will mess up the formatting of your website. If something goes awry with the look of your site, simply turn off minify in the general settings tab of W3 Total Cache. If you followed this guide, you won’t have this problem because we took care of minify in Cloudflare, and kept it disabled in W3 Total Cache settings.

Dashboard is Super Slow Make sure that Object Cache is disabled in the General Settings tab of W3 Total Cache.

Any time your site is acting up, it’s a good idea to disable all plugins, then reactivate them one-by-one to see which one is problematic. Certain plugins conflict with one another, and some plugins do not work well with certain themes.

If you’ve checked all the plugins and they are not causing any problems, it is likely a conflict with your theme. To be sure of this, you can switch to a default WordPress theme (try Twenty Sixteen) to see if the problem persists. If everything works fine when you switch to a default theme, then you know that your theme is the problem. At this point, you can try to get help from the theme developer. He/she may just tell you to use an alternate plugin which is compatible.

Slower Website Load Times You may have to wait up to 72 hours for propagation. When I changed my nameservers to Cloudflare, the propagation was pretty quick, but it can take a while so be patient.

Your Website Crashes If for some reason your website crashes, you may need to edit your wp-config.php file. Open it up and delete the following lines:

/** Enable W3 Total Cache */
define(‘WP_CACHE’, true); // Added by W3 Total Cache

Then, you’ll want to open up your .htaccess file and delete all the lines between and including the following:

# BEGIN W3TC
# END W3TC

Next, you’ll need to delete a few files from your wp-content folder, including the following:

  • advanced-cache.php
  • objectcache.php
  • db.php

Finally, you should delete the W3-total-cache folder located in wp-content/plugins.

Conclusion

Website speed is critical, and cannot be overlooked. I don’t know about you, but I have zero patience for slow-loading sites, and find myself leaving them right away… never to return again 🙁 Don’t piss off your visitors, and make sure your website loads quickly.

Follow and implement the tactics in this guide to boost your WordPress website speed. This post is modeled after one written by Tom Dupuis of Online Media Masters.

Can you think of any more helpful speed optimizations that I may have missed? Leave a comment and let me know.