Make 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 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 share those three important facts what persuaded me. I bet so will you.

  1. Google counts on site speed as a ranking factor. (Source: GWCB)
  2. 40% of people abandon a website that takes more than 3 seconds to load. (Source: Akamai)
  3. If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost $2.5 millions in lost sales every year. (Source: Kissmetrics)

When I first heard about them, I went straight to Pingdom, ran the website speed test but crap! Result was 3.26s, which was way longer than my expectation.

before optimization

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 can not give that stunning improvement.
  • The tools and services mentioned are maximum paid.

I admire not everyone is ready to invest for page load improvement in 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)

configuring cloudflare and w3 total cache

I get scared to think how desperate I was then and how longer 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

w3 total cache

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 wordpress repository. Go to Plugins > Add New from wordpress admin panel, search “W3 Total Cache”, install and activate it.

install

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 sub pages. 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 more 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 everything. 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 public. You will need to click “Deploy” button to apply those changes to the main site.

general

1.2. Page Cache

➥ Page cache: Checked

➥ Page cache method: Disk: Enhanced

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

page cache

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 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 at one place. We preferred cloudflare.

minify

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.

database cache

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

object cache

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

cdn

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.

debug

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

page cache general

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 the interval 900 seconds and 10 pages per interval. You can change it, but our suggested value looks ideal.

cache preload

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 longer user’s data will be retained in the browser. Both are useful, and the settings we suggested are standard for all website.

page cache advanced

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.

database cache general

4.2. Advanced

➥ Maximum lifetime of cache objects: 180 seconds

➥ Garbage collection interval: 3600 seconds

➥ Everything else: Default

Lifetime of cache objects is for defining how longer 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.

database cache advanced

5. Object Cache

5.1. Advanced

➥ Default lifetime of cache objects: 180 seconds

➥ Garbage collection interval: 3600 seconds

➥ Everything else: Default

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

object cache advanced

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.

browser cache general

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”

browser cache css and js

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”

browser cache html and xml

6.4. Media & Other Files

➥ Everything: Same as “6.2. CSS & JS”

browser cache media and other files

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

cloudflare extension

Introducing cloudflare

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.

Installing

 1. Create an account

Simply go to https://www.cloudflare.com/sign-up and create a new account.

2. Select a website

Right after you sign up, you will be asked to enter your website. So there is nothing more to do, just enter your domain and click “Add website”.

3. Configure your records

Cloudflare will perform a 60 seconds test. In the meanwhile, they will show you a video about how it works. Please do check the video for further knowledge. When the scan is completed, click the “Continue” button.

Now your website’s dns records will be listed. You will see orange or gray clouds on the right side of dns records. Orange cloud means that is accelerated by cloudflare. And the gray cloud means that is bypassed by cloudflare.

Make sure your root domain and sub-domains have orange clouds. So they will be served from cloudflare. You may also exclude any sub-domain from it. But it is recommended that you accelerate all with cloudflare.

Here in Blogging Spell, we use www subdomain. For that, we’ve activated cloudflare for two records:

  1. Type A – bloggingspell.com – points to *ip address*
  2. CNAME – www – is an alias of bloggingspell.com

blogging spell dns records

4. Choose initial settings

You will be asked to configure it initially. You can change it later. However, you need to get started with it. Here is what we did:

➥ Choose a plan: Free

➥ Performance: CDN + Full Optimizations

➥ Security profile: Low

➥ Automatic IPv6: On

➥ SmartErrors: On

5. Update your DNS

In the final step, you will need to update your domain name servers. They will give you two name servers what you have to replace with your current ones.

The process may vary from domain name providers. But you can find and change it from your domain manager. In case you can’t find it, you should contact your domain name provider.

Alternative method for cpanel based hosting

Nowadays, cpanel managed hosting comes with cloudflare integrated. If your hosting provider supports it, you can enable cloudflare in just one click.

Login to your site’s cpanel and look for cloudflare. If it is available, click on it and activate the cloud. That’s it.

cpanel cloudflare

P.S: (1) Choose any one method. You may choose the manual, or the cpanel integrated. But please do not combine these two. They could potentially cause problems.

(2) DNS prorogation can take up to 72 hours. In that period, your website could be unusable or inaccessible. There is nothing to worry, just wait.

Configuring

After your website successfully integrated with cloudflare, you will see a green check mark. Now click on the gear icon and go to “CloudFlare settings” for further configuration. Then follow the settings as below sorted by the tabs.

cloudflare settings

1. Settings overview

➥ Security profile: Low

➥ Performance profile: CDN + Full Optimizations

➥ Automatic IPv6: Full

➥ Always online: On

➥ IP Geolocation: On

➥ SSL: Flexible SSL

You may ask why low in the security profile? Many people confronted annoying captcha over and again for high setting. By keeping it low you can avoid it. The captcha will still show up for the people with high malicious activities.

CDN + Full optimizations will ensure maximum performance. So it is recommended with all other options we suggested.

settings overview

2. Security settings

➥ Basic protection level: Low

➥ Challenge passage TTL: 1 Week

➥ Email address obfuscation: On

➥ Server side exclude (SSE): On

Security selection from “Settings overview” will reflect here. Keep the rest of settings default.

security settings

3. Performance settings

➥ Caching level: Aggressive

➥ Minimum expire TTL: 5 days

➥ Auto Minify (Web optimization): JS, CSS, HTML Checked

➥ Rocket Loader: Automatic

Aggressive caching level will ensure you the maximum cache value. We set the expire TTL 5 days depending on the site activity. You may change it or do the same as us.

We kept minify unchecked on w3 total cache. So here you should check minify for all JS, CSS and HTML. We got better performance by using it.

Most importantly, you have to enable Rocket Loader “Automatic”. It is what significantly improved our load time. It will load javascripts asynchronously, so they will no more affect page loading.

P.S: Sometimes you may see a javascript resource is not working because of rocket loader. In that case, you can exclude it and avoid the problem. You will find more about it here.

performance settings

Integrating cloudflare with w3 total cache

➥ Cloudflare: Enabled

If you installed the cloudflare extension from w3 total cache, a block of settings like the following image will appear on “General Settings” page.

Go right there, tick on Cloudflare, input account email, API key (what you will find in your cloudflare “Account” page) and other values as we suggested in this post.

integrate cloudflare with w3 total cache

A few more things we considered

1. Good hosting provider

A better host means better uptime and better server response time. To be honest, your page load will partially rely on it. So choose a hosting provider who are capable of providing better response time and better uptime.

How would you determine your host is good or bad? I use Pingdom Monitoring to track uptime and response time. I don’t want to keep it secret that HostGator is providing us a brilliant service and never gave any chance to regret.

Here is our past six month’s report:

pingdom report

2. Premium/well-coded theme

A theme can unnecessarily delay page loading. A wrong code in a theme can prevent rendering or significantly delay it. For sure, it will affect your performance.

Choose a theme that is coded professionally or go for any high performing premium theme. We are currently using MyThemeShop. You know what all of their themes are optimized for ultra speed and seo. That’s the reason why we use them.

3. Amount of plugins

Plugins can prove overwhelming for your site. Sometimes a single plugin can potentially delay several seconds in loading. So your task is to find out high impacting plugins and minimizing them for better performance.

How would you find those plugins? There is a wordpress plugin named P3 Profiler what will help you identify which plugin is slowing your site. Install it and run the test. I bet you will come to realize what is causing higher loading.

4. Image optimization

Images consume the highest server resource next after scripts. If you are serious about load time, you have to be serious about images. Here is what we did to optimize our images for faster load time:

  • Specifying width: In our theme, text container is highest 680px in width. So we limited image width to 680px or less. In this way, we can save unnecessary bandwidth losing.
  • Compressing image: We use WP Smush.it plugin to compress images highly before using. You may not believe it can compress images up to 50%.
  • Image CDN: We use Jetpack Photon what will serve images from cookie-free domain and lower the site rendering time.
  • Lazy loading: Currently we are not using Lazy Loading, but once we did. We noticed significantly improvement in page loading.
  • Disabling hotlinking: Hotlinking of image can cause higher server resource consuming and sometimes it can crash your server. So it is recommended to disable hotlinking.

5. Database Optimization

The faster your database, the lower your time of content creation. In wordpress, database size can increase aimlessly with unused data. By keeping your database clean, you can lead way better performance.

We use WP-Optimize to clear post revisions, auto drafts, spams, trashes, transient options, pingback, trackback and many other unnecessary data.

The result!

That’s all we did in our experiment. The result is in front of you. We’ve taken down the page load from 3.26 seconds to 0.339 seconds!

after optimization

After calculation, the improvement stands 10x. I did the same experiment to my other sites. The result was not exactly .399s but it improved by almost 10x from the primary page loading time.

improvement

Isn’t that great? I mean so. Those people we are still struggling for performance improvement should try this method. I bet this one is going to make a difference.

Last but not least, I want to make another important statement. CloudFlare will add an extra layer security for malicious visits or spambots. So your wordpress site can be more secure than ever.

What do say about w3 total cache and cloudflare? There is nothing more delightful than hearing your feedback!

Loved this post? Sign up below to get updates for more stuff like this that you don't want to miss.

45 Comments

  1. Ron Killian March 14, 2015
    • Abrar Mohi Shafee March 14, 2015
  2. shubham maurya March 22, 2015
    • Abrar Mohi Shafee March 22, 2015
      • shubham maurya March 23, 2015
        • Abrar Mohi Shafee March 23, 2015
  3. Mark March 27, 2015
    • Abrar Mohi Shafee March 27, 2015
      • Mark March 27, 2015
        • Abrar Mohi Shafee March 28, 2015
  4. Tanvir Hasan April 21, 2015
  5. Terrence Blair May 15, 2015
    • Abrar Mohi Shafee May 15, 2015
  6. Furious Theme May 31, 2015
    • Abrar Mohi Shafee June 12, 2015
  7. Lu June 12, 2015
    • Abrar Mohi Shafee June 12, 2015
  8. Ridha July 5, 2015
    • Abrar Mohi Shafee July 5, 2015
      • sulbha January 15, 2016
  9. Adeel Sami July 12, 2015
  10. Apoorv Agrawal August 14, 2015
    • Abrar Mohi Shafee August 15, 2015
  11. hoomix August 16, 2015
    • Abrar Mohi Shafee August 17, 2015
  12. Joao September 23, 2015
  13. Jamaluddin Rahmat October 17, 2015
  14. pukander December 8, 2015
  15. Amandeep Singh December 9, 2015
  16. Neal Umphred December 22, 2015
  17. Neal Umphred December 22, 2015
  18. Neal Umphred December 22, 2015
  19. Neal Umphred December 22, 2015
  20. Neal Umphred December 22, 2015
  21. Diana January 19, 2016
  22. Fawad Naveed February 1, 2016
  23. Julie March 3, 2016
  24. Sarah March 15, 2016
  25. Jorge March 22, 2016
    • Jorge March 22, 2016
  26. Jorge March 23, 2016
  27. harry March 24, 2016
  28. Shan Yi March 25, 2016
  29. Den May 30, 2016

Leave a Reply

Your email address will not be published. Required fields are marked *