Yesterday I had a bit of fun trying to make my website here pass the rules for the 512KB club. For those of you who don’t know that, it’s basically a challenge to get the size of your website below 512 KB. I’ve known for a very long time that my use of FontAwesome was a big issue here, coming in at around 1.5MB.
I then took a quick look at what icons I actually needed. I still love that icon set and therefore wanted to keep using it. Turns out that FontAwesome icons always consist of a single path that you can just extract and the build your own little SVG generator around it.
So my solution now consists of two steps:
- Generate an
icon.jsfile based on those icons that I want to have (source). Whenever I want to use a new icon, I just run
blog build-iconsinside the root folder of the project and upload the resulting
icons.jsonto my server.
- At runtime scan through the whole HTML document, look for
i.iconelements and then use the paths from the
icons.jsfile to generate SVGs inside the document (source)
Due to me using FontAwesome Pro here I cannot check in the
icons.js file, though, but that’s only a minor issue as I had to have the whole FontAwesome folder on my server before, too.
Thanks to that, my front-page now comes it at around 160KB! Mission accomplished 😉