I love FontAwesome (FA). Bunch of great icons and really easy to implement. Load the CSS file and your set. FontAwesome free gives you almost 1000 icons. Yes, one thousand icons you can use on your website. That’s where it goes wrong. Website owners don’t need 1000 icons on their website, they only need a few of them.
Working on our way to a faster website at the Yoast Campus during the start of 2018, I dug into our icons. When checking the sitespeed of Yoast.com, I noticed that the 4.9.4 version of FontAwesome we use is just above 80kb in size. That’s 15% of the total weight of our homepage Yoast.com. With the knowledge that we are only using around 40 icons, I started looking for an alternative.
My first idea was to replace all icons that we use with the SVG variant. This should increase the HTML, but will reduce the total CSS and completely removes the .WOFF file that we load. This did work, but it took a lot of time. Find all icons, look up the SVG, refactor the SVG to make it accessible and set CSS styles to make it fit. It was boring, took a long time and really made me annoyed working on the project. I had to find another solution.
My college advised me to look into subsetting FontAwesome. This means that I try to only load what I use. Looking at the documentation from FA, this was not possible. There are multiple ways to load FA, but none of them offered me a way to load just the icons I need. This was a bummer. FA is a great product that we would like to support, but not at the cost of this much load on the website.
The other option was to create a variant of FA that did suit our needs. That variant ended up being a custom version where I manually stripped everything I did not need.
I downloaded the FA files we used online. In GlyphsApp, a font editing app, I opened the WOFF2 file and removed all icons that we did not want. After exporting the new small set of icons, I ended with a file of 9kb, that’s around 85% smaller than before.
I broke down the CSS file that makes sure you can use FA on your website when applying the right classes. I replaced the CSS in our CSS assets directory as an SCSS file. The document got refactored in a way that I commented out every single icon that I do not use. A commented line in a SCSS file get’s ignored while compiling to the final CSS file. In the end, we ended up with a 0.8kb file instead of 6.8kb. Great progress!
In the initial setup, I thought that we just insert the SCSS file we just made into our default setup and compile it to one massive CSS file. Less connections but bigger files.
After talking to Jono Alderson about optimizing the speed to the next level, we ended up creating a separate CSS file for font awesome. HTTP2 enables us to load multiple files at once. This made it quicker to load a separate file instead of a single huge one. Jono made it also Preload, this way it’s not render blocking. It’s just a small victory, but all bits matter!
The result is great. 70kb less to include, and everything works just like before. No changes needed anywhere. Next to the refactoring of our (S)CSS, this is our greatest win in Yoast it’s mission for a really fast site.
Sadly, if we need a new icon, I have to remove the comment from the stylesheet and create a new WOFF file that includes the new icon. It’s a bit time consuming, but still done within a couple minutes.
The web needs a great library for icons, but it also needs fast websites. FontAwesome can provide the great library and if they can create a service that makes it easier to create a custom font and CSS with only the icons we need, it would be even better.