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 runblog build-iconsinside the root folder of the project and upload the resultingicons.jsonto my server. - At runtime scan through the whole HTML document, look for
i.iconelements and then use the paths from theicons.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 😉
Do you want to give me feedback about this article in private? Please send it to comments@zerokspot.com.
Alternatively, this website also supports Webmentions. If you write a post on a blog that supports this technique, I should get notified about your link 🙂