Using W3 Total Cache, Cloudflare & Autoptmize reduced my page load speed by 50%

Caching overhaul

Over the last few months I have been looking at ways to speed up my site and to improve the general User Experience.  Since I started my blog last year I have been using 4 optimization and caching plugins:

  • Autoptmize
  • WP fastest cache
  • WP super cache
  • Cache enabler

 

These caching plugins and subsequent optimization gave my site a performance score on GTmetrix of 57% for Page Speed and 52% for Yslow with a page load time of around 11 seconds:

Caching and optimisation

This level of performance was not good enough for my site and as we all know speed or lack thereof can lose you readers and ultimately revenue.

 

This post details what steps I took to reduce my page load time by around 50%, any comments and feedback would be awesome, what did or did not work for you with regards to caching?

 

 

Cloudflare and W3 Total Cache

So I decided to look the benefits of using W3 Total Cache, whilst also retaining Autoptmizer.  During my testing of W3 Total Cache it also allowed me to sign up to a CDN provider called CloudFlare.  Cloudflare offers a number of plans to suit most situations:

Cloudflare

 

Initially I was seeing a cache hit on Cloudflare of around 0-10%, this will hopefully increase over time as the cache is slowly filled.  After a week am getting between 10%-40% of requests served by the Cloudfare:

Cloudflare caching levels

 

My Cloudflare settings:

Caching

Cloudflare caching settings

 

Page Rules

Cloudflare page settings

 

Speed

I used Cloudflare to minify JS, CSS and HTML (see below), that said you can use W3 Total Cache to minify JS, CSS and HTML (when I tried to use W3 Total Cache to minify these settings, parts of site failed to load), again check and test which configuration works best for your site and remember to clear your cache!!

Cloudflare speed config

 

Other blog optimisation techniques

To further optimise my site I removed plugins that were either deactivated or not needed any more, as well as deleting old backup files (keeping just 2 historical backup files).  This combined with the installing W3 Total Cache in conjunction with Cloudflare has significantly improved my sites performance and load times (as measured by GTmetrix, with the best results below):

GTmetrix results after caching changes

 

I also found that subsequent tests through GTmetrix did not score as high on Page Speed, but, they did however show lower page load times as well as lower total page size.  I also found that testing my site through GTmetrix varied greatly within and between regions and even retesting within the same region, but what was fairly constant was the lower page load times, at around 50% of what they were prior to optimization.

 

There is a lot of information on how to configure your W3 Total Cache plugin, the most useful I found was from the onlinemediamasters (author Tom Dupuis), that said you still need to test your configuration changes to ensure your site works correctly as some settings may work for other sites and not yours.

 

Time for a new Theme

Old Theme:

Initially I had set my blog up using the MH Magazine lite theme (see below) as it gave me a good basic layout for my blog which included a number of customisable widgets to enhance the UX (User Experience).  It was also a great starter theme but as I wanted more for my blog it was important to find the right theme (ideally free).

old livingthetech.com

 

New Theme:

I discovered the Hueman theme (see below) after looking through the top 50 best WordPress themes.  It immediately stood out as it allowed me to configure a 3 column layout (which for me equalled more real estate space) as well as being more customisable, it even allowed for ad space in the banner.  Also the look and feel of the theme was must better than other themes I had looked at, what do you reckon?  It also looked awesome on other devices as well as having configurable mobile device, performance and SEO options (having not seen this feature in any other theme).

new livingthetech.com blog

 

The results

Before:

The follwoing results were obtained by running GTmetrix against my blog before the changing caching and CDN solutions to W3 Total Cache and Cloudflare, as well as implementing a number of optimization techniques also detailed in this post.  Both before and after tests using GTmetrix were run against my new theme.

Caching and optimisation

After (the best results)

The follwoing results were obtained by running GTmetrix against my blog after the changing caching and CDN solutions to W3 Total Cache and Cloudflare, as well as implementing a number of optimization techniques also detailed in this post.

GTmetrix results after caching changes

 

Autoptimizer settings

Below are the setting made to my Autoptimizer implementation:

Autoptimizer settings

 

Some of the features/changes made to my blog to help with optimization:

  1. Removed unused and unwanted plugins
  2. Installed W3 Total Cache plugin
  3. Started to use a CDN: Cloudflare
  4. Changed my WordPress theme
  5. Reviewed Yoast SEO settings according to Tom Dupuis
  6. Only keeping the previous 2 backups and removing the rest

 

According to GTmetrix I still need to look at ways of minimizing redirects and deferring the parsing of JS.

 

Generally tweaking and refining the configuration for W3 Total Cache, Cloudflare and Autoptmize has pretty much driven me nuts over the last few weeks, for example I have GZIP compression enabled in W3 Total Cache but GTmetrix still comes up with GZIP errors.  So I have decided to give my near obsessive behaviour to improve the performance (and my GTmetrix score) of my blog as I have now reduced the page load time.

 

So which caching solution(s) are you using for your WordPress site? Do you have insights/lessons learnt you can share on your experiences with caching products?

 

If you can leave a comment, that would be awesome, thanks