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

Steven     28.10.2020

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.

requeststransferred [kB]resources [kB]finish [ms]DOMContentLoaded [ms]Load [ms]
impact of header script+3+18kB+72kB+44ms+34ms+43ms
Impact of the fontawesome script on the loading performance of our front page

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:

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!

FilenameOriginal size [kB]Stripped size [kB]
all.min.js1167not used
brands.min.js4387
fontawesome.min.js3838
regular.min.js101not used
solid.min.js6055
We were able to get a 1 031kB saving by removing unused icon definitions

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.

Comment

Related

How to host font files locally and preload them

Custom fonts are a great way to improve your online visual appearance. In order to make sure that custom fonts don't slow down your website, make sure you (i) host the font files locally and (ii) preload them. This article describes the process of obtaining and serving font files from your own server, as well as preloading the right font file for faster website loading.

Enforce strong passwords in WordPress, optimize password strength estimator

A very easy way to enforce strong passwords in Wordpress, is to disable the 'confirm weak password' checkbox. On top of this, we optimize the loading of the password strength estimator, zxcvbn.

The right way to serve responsive images (srcset and sizes attribute) with WordPress and Bootstrap 5

The most confusing thing when you inspect responsive images is the fact that the browser takes into account the DPR (Device Pixel Ratio) in order to download the most appropriate image size. Find out here how to serve your visitors responsive images.