Speed Up WordPress 10x Faster By W3 Total Cache + CloudFlare

Are you worried about your WordPress site speed? Did you try different techniques without success? Hold your breath, we had a little experiment on w3 total cache and Cloudflare. The result is the straight 10x improvement in the load time!

Before we proceed, you could ask why did I consider website performance in the arsenal? Does it matter for marketing or SEO? To be honest “Yes, absolutely”.

I want to share those three important facts what persuaded me. I bet so will you?

Google counts on site speed as a ranking factor. (Source: GWCB)

40% of people abandon a website that takes more than 3 seconds to load. (Source: Akamai)

If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost $2.5 million in lost sales every year. (Source: Kissmetrics)

When I first heard about them, I went straight to Gtmetrix.com, ran the website speed test but crap! The result was 7.7s, which was way longer than my expectation.

I googled “how to improve page loading time” and got a ton of ideas. But soon I realized:

The methods provided are geeky, not every individual person can do that.
The suggested plugins itself cannot give that stunning improvement.
The tools and services mentioned are the maximum paid.

I admire not everyone is ready to invest for page load improvement at the beginning stage of a website. So I kept looking for something that is easy, provide significant improvement and basically free of cost.

Searching by the eagle’s eye, my attention got into a forum where a person suggested, Try w3 total cache + Cloudflare combo. So is my task. I installed that plugin and enabled Cloudflare.

You guess it worked? Nope, page load was not satisfactory, at least not for me. It improved by a pinch, but I was looking for a stunning speed.

Maybe the configuration was not correct. So I kept researching and testing different settings, and all of a sudden, I got it worked. The speed improved by 10x! (proves are given afterward)

I get scared to think how desperate I was then and how long it took to come out successful. So finally I’ve decided to share the full walk-through, in case many sufferings like me would be over.

By going through this post, you will know how to make the perfect combination of these two which are absolutely free of cost.

Introducing w3 total cache (Wordpress Plugin)

W3 Total Cache is an easy WordPress Performance Optimization (WPO) framework that enhances the user experience by utilizing cache, minify and CDN. This is the only caching plugin available providing advanced and flexible features.

How does it work? In short, it will minimize the number of HTTP requests, reduce the page size, and so is the page load time. It has got authority’s choice including HostGator, GoDaddy, Mashable, Yoast who use to recommend it for always.

Installing

First, you need to install this plugin from the wordpress repository. Go to Plugins > Add New from WordPress admin panel, search “W3 Total Cache”, then install and activate it.

Configuring

You will see a new tab “Performance” added to your left WordPress admin menu. Hover on it and you will see a few more subpages. The basic configurations are located at “General Settings” page, where the advanced options are available separately.

For your better understanding, I will explain them, point by point in the correct order. So figuring it out will be much easier than ever!

1. General Settings

1.1. General

Toggle all caching types on or off (at once): Unchecked
Preview mode: Disabled

The first option is to enable or disable all caching on or off at once. It looks like we didn’t need anything. So you can leave it unchecked.

On the other side, by activating preview mode, you can test settings before applying it. So you may or may not use it. In our case, it seemed not required as we knew what we were doing.

But beware, when it is enabled, your settings will be saved separately and it will not show up for the public. You will need to click the “Deploy” button to apply those changes to the main site.

1.2. Page Cache

Page cache: Checked
Page cache method: Disk: Enhanced

Page cache reduces server response time and improves performance. So we enabled it. The best and recommended page cache method is “Disk: Enhanced”.

1.3. Minify

Minify: Disabled

Minify is to reduce the number of javascript and CSS files by combining. It will weed out unnecessary codes from js, CSS and HTML as well. So it looks really important, doesn’t it?. But why didn’t we enable it?

Actually, Cloudflare also supports minify. It seems like Cloudflare minify can give better performance. We noticed sometimes w3 total cache minify can break a site. But we didn’t encounter any single problem with Cloudflare. So we enabled minify on Cloudflare and disabled it on the w3 total cache.

Please be noted that allowing minify both on w3 total cache and Cloudflare can also break your site. So stay safe, use it in one place. We preferred Cloudflare.

1.4. Database Cache

Database Cache: Checked
Database Cache Method: Disk

Database cache reduces post, page and feed creation time. It will minimize the response time and the load on the database. So you should enable it like we did. The method by default “Disk” is recommended.

1.5. Object Cache

Object Cache: Checked
Object Cache Method: Disk

Dynamic sites such as WordPress can use Object Cache API. This option can reduce the common object execution time. You should enable it and leave the method to default “Disk”.

1.6. CDN

CDN: Unchecked

Content delivery network (CDN) can improve the delivery of static materials. But they are all paid.

Here in this post, we wanted to show how to reduce page load time without spending a single penny. So we are leaving it unchecked. In case you can afford to invest in it, you should definitely do. I bet it will make more improvement.

1.7. Reverse Proxy

Enable varnish cache purging: Unchecked

If you want to purge varnish cache, you can enable it and specify the IP address right underneath it. Or you should leave it unchecked when you are not sure. Please note that we didn’t use it.

1.8. Monitoring

New Relic: Unchecked

If you’ve New Relic installed on your server, you may enable it for monitoring. We didn’t have it installed and felt not necessary. So we left it unchecked.

1.9. Debug

Page Cache: Unchecked
Database Cache: Unchecked
Object Cache: Unchecked

This option is to append cache details in your page source publicly. I saw it increases the HTML page source size and length quite unnecessarily. So you should leave all of them unchecked.

2. Page Cache

2.1. General

Cache front page: Checked
Cache feeds: site, categories, tags, comments: Checked
Don’t cache pages for logged in users: Checked

If your site uses an SSL certificate, you should check “Cache SSL (https) requests”. Current we don’t have SSL installed, so we left it unchecked. We also left the rest of them unchecked since they didn’t help.

2.2. Cache Preload

Automatically prime the page cache: Checked
Update interval: 900 seconds
Pages per interval: 10
Sitemap URL: Your current XML sitemap
Preload the post cache upon publish events: Checked

This option is to pre-generate cache after a particular interval. It reduces server resource consuming. According to our site requirements, we make an interval of 900 seconds and 10 pages per interval. You can change it, but our suggested value looks ideal.

2.3. Purge Policy

Everything: Default

It is safe by default. So we didn’t bother to alter it. In fact, you shouldn’t worry about it.

2.4. Advanced

Garbage collection interval: 3600 seconds
Comment cookie lifetime: 1800 seconds
Everything else: Default

Garbage interval is how often you want to remove cached data. And comment cookie is set to define how long user’s data will be retained in the browser. Both are useful, and the settings we suggested are standard for all website.

3. Minify

We had nothing to do here

Since we said in “1.3. Minify”, we used Cloudflare minify feature that gave us error-free performance. So we had nothing to do with w3 total cache minify.

Below in this post, we will talk more about Cloudflare minify and how to configure it.

4. Database Cache

4.1. General

Don’t cache queries for logged in users: Checked

Caching queries for logged in users might cause unusual problems. So we better checked it.

4.2. Advanced

The maximum lifetime of cache objects: 180 seconds
Garbage collection interval: 3600 seconds
Everything else: Default

The lifetime of cache objects is for defining how long you want to cache objects. The garbage interval is for removing cached data after the specified period. Both are dependable on website behaviors. Though our suggested settings are standard.

5. Object Cache

5.1. Advanced

The default lifetime of cache objects: 180 seconds
Garbage collection interval: 3600 seconds
Everything else: Default

Same as the previous paragraph lifetime is to set the expiry time of the cached items. And garbage interval is to define when to dump cached data.

6. Browser Cache

6.1. General

Set Last-Modified header: Checked
Set expires header: Checked
Set cache control header: Checked
Set entity tag (ETag): Checked
Set W3 Total Cache header: Checked
Enable HTTP (gzip) compression: Checked
Others: Unchecked

These options will control browser behavior, and we got better results using them. It is recommended to check what we did and to uncheck what we didn’t.

6.2. CSS & JS

Expires header lifetime: 31536000 seconds
Cache-Control policy: cache with max-age (“public, max-age+EXPIRES_SECONDS”)
Everything else: Same as “6.1. General”

6.3 HTML & XML

Expires header lifetime: 3600 seconds
Cache-Control policy: cache with max-age (“public, max-age+EXPIRES_SECONDS”)
Everything else: Same as “6.1. General”

6.4. Media & Other Files

Everything: Same as “6.2. CSS & JS”

7. CDN

We had nothing to do here

We already said in this article, we will show you the ways to improve WordPress performance without spending a single penny. CDNs are paid. We unchecked CDN on “General Settings” page. So we had nothing to do here.

But still, if you afford to get a CDN service, please do. It will certainly improve your load time. However, we may not talk here but in another post in the future. Please note that we got 10x improvement without using any external CDN.

Setting up an external CDN with Cloudflare would be geeky. Here is a helpful tutorial by TutsPlus, Activating Ludicrous Speed: Combine CloudFlare With a CDN on Your Blog.

8. Extensions

CloudFlare: Activated

In the “Extensions” page, you will have to activate CloudFlare extension. It is necessary for integration. For now, just activate it. I will show you how to integrate it later on this post.

Introducing Cloudflare

Cloudflare is a US based company who provides content delivery network, performance optimization, security optimization, and web analytics to supercharge a website in just five minutes. You will be amazed to know their starting package is totally free!

They have some exciting technologies such as Rocket Loader, Aggressive Caching, Distributed DNS System, which are accelerating more than 785,000 websites (according to the report of 2012) and counting.