firefox

Making the Blog Better and Faster

Richard Green on

After moving the blog to Azure, I was really happy with the performance, but I decided this weekend I wanted more so I set off on a personal mission to improve to make the blog better and faster. This post is a quick update on the changes I’ve made to the site to get it to where it is now.

So What Have I Done?

Lots of people recommend YSlow as a Firefox plugin for assessing website performance. I use the Internet Explorer Developer Tools normally for my needs, but YSlow outputs nice reports which tells you what you need to do to get results where as unfortunately, the developer tools only tell you what you’ve got currently.

CSS Removal and Compressing

YSlow identified a number of issues with the site which I’ve worked on resolving to varying degrees. Firstly, it wasn’t happy with the number of CSS stylesheets I referenced due to the theme colour switcher. As I figured this was a gimmick added at the time and nobody would actually really use this, I’ve removed it which allowed me to drop 19 stylesheets from the HEAD section of the site.

Once I’ve removed these stylesheets, I used a plugin called Dust-Me which scans the site and finds unused CSS styles in the stylesheets. When a stylesheet is only 2KB, ever little helps. Dust-Me found about 10 styles across my CSS which I was able to remove and marginally reduce the filesize.

Compressing happened by using a great website, CSS Drive. Their CSS Compressor tool. You copy and paste your CSS into their site and it outputs a shrunken version of it with a large chunk of whitespace removed and where possible is reduces the length of colour codes and converts your CSS into shorthand. Doing that saved me about 20% on the size of my stylesheets, dropping the colour specific sheets from 856 bytes to 777 bytes and dropping the main stylesheet from 6,686 bytes to 5,636 bytes.

Whilst this may not sound like a lot, the smaller the page, the faster it appears to the user and the less load it also puts on the server delivering the page so it’s a double win.

Image Resizing

All of the images on the site which make up the page layout I have designed with high DPI users in mind. This means that users who are operating their displays at 125% or 150% aren’t penalized for doing so and get the same high resolution images and people set to 100%. I realized this weekend that my images where actually scaled to about 225% which is way bigger than high DPI users need so I’ve resized all of the images which make up the standard site page. This has had a big impact on the page weight for the site as a whole. The images which have been updated include all of the logos in the header section on the tiles and all of the images in the sidebar for the navigation.

Page Bloat Removal

I’ve never been 100% happy with my pages on the blog. I do what I can to tweak it when I have time and this weekend, I had time. I’ve made a whole load of changes to the site which will work to improve it’s usability, some of which I’ll list below.

  • Updated page TITLE attribute to include the post title.
  • Removed a JavaScript and some CSS references from the page HEAD to speed things up.
  • Removed the messy looking pagination links at the bottom of singular post pages.
  • Removed a load of bloat and fluff from my about me personal page.
  • Used a WordPress function to HTTP 301 redirect the author archives to my about me page as there isn’t any point in having author archives on a single author website.
  • Added a plugin to manage my sitemap.xml file for Google and Bing search indexing.
  • Created myself a Google+ account and setup author verification for the site so that Google can show my face against results from this blog.

New Picture Time

I figured this weekend that I’d been using the same boring head and shoulders shot of myself for my social presence for nearly eighteen months now and I wanted a change. I’ve got myself a nice new image for all of my social sites. The picture was taken on our holiday to Spain in 2011. With me always being the person taking the pictures in our family, it’s rare find a picture of me and even rarer to find one that I like. With a little bit of Adobe Lightroom magic, what was a wide angle shot including me and some flowers because a lovely little super-crop of me and the flowers with an Instragram-esque vignette and black and white filter to finish the look.

The Results

When I started the journey of updates this weekend, the page weight for the site was about 210KB which was pulled together by nearly ~75 HTTP requests. After all of the work this weekend, the page weight is now down to 140KB (50KB per page saving) and the number of HTTP requests is down to 25 (~50 per page saving). Yes, all of this has taken me quite some time to achieve over this weekend, but the results are really worthwhile and goes to show that even a well performing website has room for improvement.

My current Pingdom score is 88 and my current YSlow small website/blog score is grade B (86). If I change YSlow to the YSlow 2 test pattern then my score drops to grade C (74) but that’s still a pretty good score in my view. I think I could probably get my score up to 90 for the small website/blog category with a little bit more effort in the coming weeks.

On my radar for future changes and updates to the blog are going to be going back through my historical posts and updating them all to use the Azure BLOB Storage for the image hosting and correctly some of the ASCII character errors which where caused by using Windows Live Writer to upload my posts on a previous iteration of the site which didn’t have the UTF-8 encoding set properly.