WordPress Tutorial

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

Speed Up WordPress

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?

Speed Up WordPress Website

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 Gtetrix.com, ran the website speed test but crap! Result was 7.7s, which was way longer than my expectation.

Website Performance

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)

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.

Best plugins to speed up WordPress

Introducing w3 total cache ( WordPress Plugin )

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

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

Best plugins to speed up WordPress

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:

Type A – thehackersolutions.com – points to *ip address*
CNAME – www – is an alias of thehackersolutions.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-cache1

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:

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

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

c. Image CDN: We use Jetpack Photon what will serve images from cookie-free domain and lower the site rendering time.

d. 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 7.7 seconds to 0.015 seconds!

2

Comments

Most Popular

To Top