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 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
regular.min.js101not used
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.

Reed Sutton
13.03.2024 - 22:24

With font awesome 6, hosting locally, I am having trouble getting icons to display using pesudo elements in CSS (including the new syntax here:

Any idea why?



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.

Package.json for Bootstrap WordPress theme

Here are the basics to get started with a fully customizable Wordpress theme based on the Bootstrap framework. It uses Yarn as package manager, Esbuild and SASS for JS and SCSS compilation respectively.

WordPress 403 Forbidden after using WordPress app

Wordpress 403 Forbidden errors typically happen with corrupt .htaccess or faulty file/folder permissions. A third common cause is often overlooked: the use of the Wordpress app through XML-RPC.