My Attempts at Website Optimisation and the Results
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:
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 Site | Static Site | After Round 1 | After Round 2 | |
|---|---|---|---|---|
| PS Rank (Mobile) | 55/100 | 51/100 | 70/100 | 88/100 |
| PS Rank (Desktop) | 64/100 | 51/100 | 84/100 | 93/100 |
| WPT First Byte | 2.179s | 0.202s | 0.161s | 0.156s |
| WPT Fully Loaded | 9.789s | 5.117s | 2.723s | 2.892s |
| WPT Bytes (KB) | 1,987 | 2,453 | 1,110 | 1,093 |
| GTMet YSlow | 73% | 79% | 80% | 88% |
| GTMet Load Time | 3.9s | 5.2s | 2.8s | 2.5s |
| GTMet Size (Mb) | 1.93 | 2.38 | 1.07 | 1.05 |
| GTMet Requests | 26 | 16 | 15 | 15 |
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.