The Need For Speed

The voice of Google, Matt Cutts, has stated that web site speed is a search engine ranking factor.

Rightly so in my opinion.  Who wants to wait around for a site to load?  Not me.

Turns out my site, http://www.davewooding.com, is was not so hot in the site speed arena.  The red colored results reported by webpagetest.org paint a less than stellar performance.

Drilling down on the results, it looks like a lot of the issue is the result of images and embedded Youtube videos.

The first view time 6.651 seconds and the repeat view time is 1.585 seconds.

Can I get my site to load faster, please!

web page performance davewooding.com

So what can we do (and when I say “we” I mean “me”) to speed this puppy up?

WordPress, WP-Supercache, Amazon Cloudfront

I’ll admit, this inspiration didn’t come to me out of the blue.  I found it in the FastWebFormula forum here (you have to be a member).

fwfspeed

The suggestion to speed up your site was to install WP-Supercache and use Amazon Cloudfront as a CDN (Content Delivery Network).

Install WP Super Cache

Fairly straightforward.  Install the plugin through the admin area of your WordPress blog.

wp super cache

There were a few WP Super Cache error messages that came up when I tried to activate the WP Super Cache plugin.

wp super cache error message

I had to make the wp-content directory writable by changing the permissions to 777 (chmod 777).

Once I did that, I tried to activate the plugin.

This time, the error message said to modify the wp-config.php file and add the following:

define(‘WP_CACHE’, true);

Did that and … magic, the plugin activated.

Finally, I changed the permission on the wp-content directory back to 755.

Setup Amazon CloudFront

Next up is create or login to an Amazon Cloudfront account.

Login to the management console and create a distribution.

Suggestion: follow the excellent instructions here.

Below I am showing the screenshots for setting up an Amazon CoudFront distribution – the images at the cutemachine site are slightly out of date.

Create An Origin – you provide the Origin Domain Name, ex – example.com, and that’s it.

Create Cache Behavior – just click Continue.

Create Distribution – click Continue.

Create Distribution – Click “Create Distribution”

Assuming everything goes as expected, you will see a window that looks like the following.  You will want to copy the domain name for use with WP Super Cache (make sure you add a http: to the beginning … ex – http://d3bbn7dwrz5e.cloudfront.net/

cloudfront distributions

Configure WP Super Cache

Under the Easy tab I chose Caching On (Recommended) and U pdate Status.

wp super cache settings easy

Under the Advanced tab, I set PHP to server cache files, Compress pages so they are served more quickly to visitors, 304 Not Modified browser caching, Don’t cache pages with Get parameters, Cache rebuild, and Mobile device support.

wp super cache settings advanced

Under the CDN tab,ticked the Enable CDN support and pasted in the Amazon Cloudfront url into the Off-site URL box.

wp super cache settings cdn

And because my site has the WPTouch plugin activated, I needed to Enable the WPTouch settings under the Plugin tab and Update.

Finally, under the Preload tab I clicked on Preload Cache Now to get the benefits of caching right now.

Other Plugins

Under the Easy tab of the WP Super Cache plugin, there are a list of recommended plusings.  I chose to add the WPSCMin and the CDN Sync Tool plugins.

The WPSCMin plugin “minifies” cached pages.  What this means is that is removes extra whitespaces and extra characters.  I know, I know – seems like overkill.  If I made it this far, I might as well go all the way.  EDIT:  Tried to use this plugin – didn’t upload properly – “missing header” message.  I did not use this plugin.

The CDN Sync Tool allows you to upload files to Amazon S3 / CloudFront (I am using CloudFront for this).   Probably the best feature about the CDN Sync Tool is that is runs images through the Smush.it service that compresses images, i.e. – smaller file sizes.

For the CDN Sync Tool plugin there really isn’t anything to do – install, then choose Sync To CDN and Sync … the file types you choose are then sent over to your CloudFront deployment.

cdn sync tool

Did This Help

Did all of these changes help improve the web site’s speed?

Back to the webpagetest site for a check.

The results for first view and repeat view are 5.875 seconds and 0.941 seconds, respectively.

For comparison to the initial results …

web page test

View Initial After Improvement %
first view 6.651 5.875 11.7%
repeat view 1.585 0.941 40.6%

So, yes, my site’s page load speed has improved.

Was It Worth It

That’s a good question.

If I was paying for traffic to this site AND most of my visitors were on mobile devices, then I would say “yes” it is worth the effort to speed up the site.

However, that’s not the case here :)

{ 1 comment… read it below or add one }

Zed Shah

A fantastic and comprehensive post Dave, I am launching a new blog next month and a big factor in me choosing what theme to use, etc was the loading speed

I’m going to be using your advise here and let you know how I get on …thanks once again for the info dude

Peace

Zed

Leave a Comment

Previous post:

Next post: