So you just finished to build your brand new website and are now in the process of optimizing your JS, CSS and some other assets so that you rank a perfect 100 in the PageSpeed performance rating. You ran the test and just got the score back: 85. There are some optimizations possible (probably 90% is useless in there) for your bootstrap-icons.css, fontawesome.css or any other CSS that provide some icons you are using in your website. Also, you look at the performance trace and see that your Largest Contentful Paint (LCP) seems to be impacted by the loading of some .woff2 file (ie. a font file).
You tried multiple things: adding some <link rel="preconnect"/> to connect to the CDN as soon as possible, loading the stylesheet with some <link rel="preload"/>, probably tried to import the CSS only for the components that needs it, etc. but nothing made it better. What to do now?
Most of the time you are using some well known icon library that provides multiple hundreds or thousands of icons and yet you are only using a few of them. Let’s take the bootstrap-icons icon library as an example. I like it, you like it, everybody likes it.
As of its 1.10.5 version, it requires you to:
The thing is, you probably don’t need every icons, only some of them. You could edit the .css file and remove all the reference to the icons you are not using, but you would still need to deal with the size and loading of the font.
To overcome this, the solution is simply to make your own custom “bundle”, ie. your own .css and font files and serve it yourself (or use your CDN). During my (long) searchs, I came across this Fontello tool, that is actually free and open source. This tool lets you pick icons from a set of already available icon library (fontawesome, etc.) but also to import your own custom icons. You can customize their names, codes, size and the CSS prefix to be used for all of them.
You basically need to select your icons, choose a name and then use the Download webfont to get a .zip file that contains a css and font folders that you can include in your website. If, like me, you are using bootstrap-icons, well you would need to generate a SVG font from the .woff file so that you can import all icons and then make your selection (see below).
If you tried to upload a .woff or .woff2 file in Fontello, the tool will tell you those filetypes are not handled and that you should use FontForge to transform the file into a .svg file that Fontello will accept. The usage is straightforward: download the tool and start it (I used the .AppImage). Then, select the .woff or .woff2 file you want to transform into a .svg file and choose File > Generate fonts. In the next screen, make sure to select SVG font under the name of the file. You can also untick the Validate Before Saving if you don’t want to be bothered while generating the final .svg file. Then choose Generate and you will have your SVG font file you can use with Fontello.
In my case, I was using bootstrap-icons and used a little less than 30 icons from the library (less than 2%). I used Fontello to build my own bundle and generated a < 10kB font file with a < 5kB CSS file. A huge win. I also noticed this switch reduced my LCP value, ie. leading to a better performance score.
