Speeding up my website

👋

My website is just a bunch of static files, so speed isn't a huge concern.

That being said, there is always some room for improvement. I've been working on that the last couple of days.

Here is the things I did and the results 🚀

(data is based on this page as I feel it is a good example)

First off, the before:

• 1.17 MB transferred

(I'm using size instead of speed because speed can vary based on a wide range of factors)

And the after:

• 452.63 KB transferred

That is about a 62% reduction 🤯

I also took a look at the homepage, and that saw a 75% reduction!

So how did I do it? Several steps:

1. Remove unused CSS styles
   1. I used purgeCSS to analyse the build output and remove all unused styles
   2. Since I'm using a CSS framework (Bulma) there are a bunch of styles I don't use, so those get removed from the output CSS file
   3. This reduced the CSS file from 263 KB to 55 KB (a 79% reduction!)
2. Minify the CSS file
   1. Now that all the unused styles are removed, I minified the file - removing whitespace, comments, etc
   2. I used css-minify for this
   3. This reduced it even further from 55 KB to 46 KB
3. Minify the HTML files
   1. I took a similar approach to all the HTML files in the build output using html-minifier
   2. Minifying doesn't make a huge difference (like above) - it took the HTML from 9.4 KB to 8.0 KB
4. Reduce image sizes
   1. I took a look at some of the images I was using and made sure they had a reasonable size
   2. I found that the image used in the page footer and the site favicon were quite large - so I used GIMP to reduce their dimensions and resulting file size
5. GZIP compression
   1. GZIP is a common compression algorithm for serving online content, it's widely supported and reduces the amount of data that gets sent across the internet
   2. Before doing this, none of my website's content was compressed at all
   3. Fortunately Gitlab Pages does make it quite easy: to serve a GZIP compressed version of a file all I need to store the compressed version in the same folder with the same name (plus the .gz suffix)
      1. For example: index.html and index.html.gz
      2. More information here
   4. So I added an extra step to the build to create compressed versions of each file
      1. find public/ -type f -exec gzip -9 -n -v -f -k '{}' ;
   5. This doesn't reduce the actual size of the page, but reduces the amount of data transferred and helps increase load times

This isn't meant as a guide to follow, more as an inspiration to try some similar steps if you are worried about page load speed.

In the end my website loads faster without any noticeable impact to users. I only removed things that weren't bringing any value.

Give it a try!

See you tomorrow 👋