Fontawesome performance 2 tips: better host locally and include only icons you actually use

Ok, some words about using Fontawesome icons on your website.

When you first get started with the icons, their website suggests you to create a kit and import this kit in the header of your website.

Easy peasy, but it comes with 2 performance disadvantages:

1. loading an external script introduces an additional download source that your visitors need to wait for. If, for some reason fontawesome.com is down, your icons stop working for the time being
2. the kit loads all available icons, adding overhead to your total website download size (disclaimer: Fontawesome offers a only-download-what-you-use with their Pro subscription)

This article demonstrates the performance impact, shows you how to host Fontawesome icons locally, and load only the ones you really use.

Performance impact of the Fontawesome kit import

The default Fontawesome script is 10kB in size, and takes (when using gzip compression) about 3.8kB to transfer. It also triggers the load of free.min.css. This is the actual stylesheet, containing all icon references (current V5 version here). It is 59kB in size and takes about 12.7kB to transfer.

We measured impact on front page loading, by loading both versions multiple times and averaging out the results.

Well, that’s not huge, right. Noting something strange? The request impact is +3? Well, when testing we noted that the free.min.css file get’s requested twice (and loaded once). We did not go in further details into why this is happening.

As for us, the impact on the loading time is minimal, we are mainly interested in hosting locally because we want to minimize the number of requests and external dependencies.

Host Fontawesome icons locally

So, here we go. The base docs are excellent to get you started. Download the kit here:

Font Awesome

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

We don’t need all these files, latest and greatest way to use them is with SVG and Javascript. These files are included in the js/ folder. Easy is including all.js, but this will again load all icons and is not what we are after in the end. We’ll load fontawesome.min.js and then selectively the (modified) icon files we need.

Copy the js/ folder to your wordpress theme. Here is how you can load them through your functions.php file;

function assistancy_load_fa() {
  wp_enqueue_script('assistancy-fa', get_template_directory_uri() . '/js/fontawesome.min.js', array(), '', true );
  wp_enqueue_script('assistancy-fa-brands', get_template_directory_uri() . '/js/brands.min.js', array(), '', true );
  wp_enqueue_script('assistancy-fa-solid', get_template_directory_uri() . '/js/solid.min.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'assistancy_load_fa' );

Note that we’re only loading the brands and solid versions of the icons. In case you need the regular versions as well, add to the above function. Be sure to load the .min versions!

  wp_enqueue_script('assistancy-fontawesome-regular', get_template_directory_uri() . '/js/regular.min.js', array(), '', true );

Include only the icons you need

When you take a look at the .js files, you’ll note they come in big sizes.

Open up one of the icon files. Scroll down to the definition of the icon var. This is the point where we will remove all icons we’re not using on our website.

Go ahead, make a list of all icons used on your website, and delete all others directly in the .js file. We were able to downsize the total file size by 1 031kB!

Only downside of this approach? When you want to use a previously-not-used icon on your website, you need to add the additional icon in the corresponding .js file.

Wrapping up

Hosting icons locally is straighforward. In terms of website loading time, very little gain is to be expected (but as we all know, many little things…). More important is reducing the total number of requests, and making sure your website is as independent from external sources as possible.