How To Boost Site Speed By Changing Icons

How To Boost Site Speed By Changing Icons

Recently, I asked around about the reasons for using chosen icons (subset) and not stocks (every icon from one stock). Personally, I think the best reason for that is the speed of our page. A lower weight of an asset which we need to download can play a big role for a user. If the website has a lot of heavy assets, the user can get frustrated, especially, when using poor mobile internet connection. If the internet speed is not sufficient he will see some invisible icons or squares in the place where we should see the icon.

Let’s look at the quick comparison of the whole set of font awesome (regular weight) vs. subset of 40 chosen icons.

TypeFont Awesome (regular-400)Chosen subset
quantity37340
size (svg)492 KB50 KB

The difference between them is obvious, so the puenta arises itself. Spending more time on adding to our subset icon, each and every time when these icons are needed, is not wasteful. It gives us benefits for the future and there will be less work with increasing and refactoring of all this.

Ok, so how to include only the necessary icons? Help comes from an application called Icomoon. It gives us a good (and free) option to choose only the necessary icons, group them and extract with the most useful extensions (.svg, .otf, .woff2 etc.). While using this tool, we can also modify each icon, change its name, scale, margin and even the color - premium account has even more options to use.

The downloaded pack consists of our chosen fonts and also additional files like demo HTML (with our fonts), ready-to-use js and css files. So everything that a developer needs to have. Icomoon also gives the user an opportunity to use the icon by the sprite.

Another similar application is Fontello. It is a great service free-to-use service that allows you to create icon fonts from vector images. Differences between these two will be covered in another article :)

A quick summary :)

Some of you may say that this topic is so obvious it shouldn’t even be considered as an article topic but believe me, I know some people who don't necessarily think about using subsets.

Although time-consuming, adding single icons instead of using stocks is more beneficial in the long run. I’m aware that nobody really has the time to upload a new subset each time they’re adding new icons, but you should rather think about it more globally, you’ll probably never have time to refactor this or you simply won’t even want to do so. This is why you should do this now, your future self, your website, your client and all visitors will be grateful :) Don’t waste this opportunity to do something good, now :)

Related articles