in

How to 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 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 that 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, provides 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 it was 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 about 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 the authority’s choice including HostGator, GoDaddy, Mashable, Yoast who use to recommend it 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 the “General Settings” page, where the advanced options are available separately.

For your better understanding,

I will explain, point by point in the correct order.

So figuring it out will be much easier than ever!

General Settings

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

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.

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

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.

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.

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

CDN

  • CDN: Unchecked

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

I bet it will make more improvement.

Reverse Proxy

  • Enable varnish cache purging: Unchecked

If you want to purge a 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.

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.

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.

Page Cache

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.

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

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.

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 the user’s data will be retained in the browser.

Both are useful, and the settings we suggested are standard for all websites.

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.

Database Cache

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.

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.

garbage interval is for removing cached data after the specified period.

Both are dependable on website behaviors.

Though our suggested settings are standard.

Object Cache

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.

Browser Cache

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.

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”

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”

Media & Other Files

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

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

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 in this post.

Introducing Cloudflare

Cloudflare is a US-based company who provides…

  • Content delivery networks,
  • 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

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

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 the “Add website”.

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 it is accelerated by Cloudflare.
  • And the Gray cloud means that it 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

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

Update your DNS: In the final step, you will need to update your domain name servers.

They will give you two name servers that 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.

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

Log in to your site’s cPanel and look for Cloudflare.

If it is available, click on it and activate the cloud.

That’s it.

P.S:

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.

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

Now click on the gear icon and go to “CloudFlare settings” for further configuration.

Then follow the settings as below sorted by the tabs.

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 the high setting.

By keeping it low you can avoid it.

The captcha will still show up for people with high malicious activities.

CDN + Full optimizations will ensure maximum performance.

So it is recommended with all the other options we suggested.

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 the settings default.

Performance settings

  • Caching level: Aggressive
  • Minimum expire TTL: 5 days
  • Auto Minify (Web optimization): JS, CSS, HTML Checked
  • Rocket Loader: Automatic

The aggressive caching level will ensure 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 minifying unchecked on the w3 total cache.

So here you should check to 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 javascript 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.

Integrating Cloudflare with W3 total cache

  • Cloudflare: Enabled

If you installed the Cloudflare extension from the w3 total cache,

A block of settings like the following image will appear on the “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.

A few more things we considered

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 is 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 brilliant service and never gave any chance to regret it.

Here is our past six month’s report:

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.

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.

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 the 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 the WP Smush.it plugin to compress images highly before using. You may not believe it can compress images for up to 50%.
  • Image CDN: We use Jetpack Photon what will serve images from the cookie-free domain and lower the site rendering time.
  • Lazy loading: Currently we are not using Lazy Loading, but once we did. We noticed a significant 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.

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!

Written by Vishal Rana

Founder and Editor-in-Chief of 'PresentBlogging'. Grey Hat Hacker, Cyber Security Consultant, Information Security Researcher, Programmer, Developer, Social Engineer, Penetration Tester, Professional Blogger and SEO expert.

Comments

Leave a Reply

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

Loading…

0

Comments

0 comments

Which is the Best WordPress Permalink Structure for SEO

Which is the Best WordPress Permalink Structure for SEO?

How To Protect Your Website From Image Theft

How To Protect Your Website From Image Theft?