My Attempts at Website Optimisation and the Results

3 Feb, 2016 | Expert TipsFeaturesTipsTechVfd

Having decided to move leepenney.com to a static site (using Hugo), I thought I would try and make a few improvements to help boost page loading times and share both my methodology and the results of what I did.

Measuring Progress

I decided to use three different services to track my progress:

  1. Google's PageSpeed Insights
  2. Web Page Test
  3. GT Metrix

The site would remain on the original host, part of my package supplied by Vidahost, so DNS and server times should be consistent.

Round 1

Removing Unused CSS Styles

I started with a simple one: removing unused CSS styles from the stylesheet. You always end up with unused ones over time, more so in my case as I think I adapted it from a WordPress theme of some sort.

Method: I used the Audit tab in Chrome's Developer Tools to do this.


Change Icon Font Social Icons to SVG

Fairly straightforward. I had a bunch of links to various social networks that were using the Socialicious icon font. Better than images, yes, but it still involved an HTTP request and a lot of CSS to get them to appear.

Method: I tracked down some SVG code to display them instead and stuck it inline, removing a bunch of CSS and a resource request.

Optimise the Images

I had a massive background image and several book covers that were resizing the original image down to match the set height and width. By producing them in the correct sizes I could reduce the amount downloaded and therefore speed up the load.

Method: I used Imagemagick to create images at the correct size and resized the background image based on the most popular browser resolution. Then I used File Optimizer to improve them further.

Minify CSS

Having cleared out the unused styles I wanted to remove all the whitespace to shrink the file size even further.

Method: I used CSS Minifier to shrink it.

Minify JavaScript

I did the same for the JavaScript used (albeit most of it was an analytics script that I couldn't touch).

Method: I used JS Compress to shrink both the code in files and inline.

Round 2

Enable Gzip Compression

After the first round, which focused on the site content, I turned my eyes to the server. The site was reportedly running on Apache.

Method: I added most of the rules in this GT Metrix article to my htaccess file.

Enable Caching

None of the content had any caching rules on it, yet they were unlikely to change often (if at all).

Method: I added most of the rules in this Varvy article to my htaccess file (making them all one month).

The Stats

Original WP SiteStatic SiteAfter Round 1After Round 2
PS Rank (Mobile)55/10051/10070/10088/100
PS Rank (Desktop)64/10051/10084/10093/100
WPT First Byte2.179s0.202s0.161s0.156s
WPT Fully Loaded9.789s5.117s2.723s2.892s
WPT Bytes (KB)1,9872,4531,1101,093
GTMet YSlow73%79%80%88%
GTMet Load Time3.9s5.2s2.8s2.5s
GTMet Size (Mb)1.932.381.071.05
GTMet Requests26161515

The Results

Some things are fairly obvious. The number of requests immediately dropped when moving to the static site (I blame plugins for this), the time to first byte improved massively too and, despite less optimised images, the page load time was nearly halved. Despite that, my PageSpeed ranking dropped.

There were dramatic improvements after round one too, with most of the load stats dropping by half again. Well worth optimising your images and minifying everything.

Round two, which largely consisted of server-side stuff, had some benefit, but far less.

Conclusions

So, moving to a static site alone shows big improvements. No querying of databases or calculating of variables means instant response. The time to first byte dropped by 90%!

It's well worth optimising your content too, both images and external files (and probably the HTML files themselves, although I didn't try that). Aside from load time, it'll reduce your bandwidth bill too.

On the other hand, the server-side changes appear to have had minimal impact. They're great for tweaking that extra couple of percent, but far less essential than the various ranking algorithms would have you believe. At least that's how it appears.

One thing I mean to try is a CDN, to see what impact that would have.

There you have it, a simple series of things that can massively impact your site's performance. Don't despair if you're stuck on WordPress or some other platform, there are plenty of plugins that will do much of this for you. If you can go static it appears worth it though.

Of course, if this site was being updated daily I'd need to find a way to automate these tasks (Grunt or Gulp quite probably) so they get done automatically when I want to publish.