There’s no doubt speed optimization is important. But With Speed optimization, you can do something as simple as installing a plugin, or you can go the extra mile by digging into your website’s files.
When you use website speed testing tools there one more technical optimization that frequently comes up, which is Reducing unused CSS.
One CSS file thats most likely will be listed, is Font Awesome.
Font Awesome is the most popular icon library, hence why its most likely listed. You’ll see font awesome’s icons everywhere on websites, like in the footer and header.
However one problem with font awesome is that the CSS for all the icons, still loads on every page of your website regardless if you’re using those icons or not.
This is a tutorial on how to clean up that CSS file to get over 150% savings in file size for a faster website loading speed by reducing your unused CSS. From my testing, you can even expect a 1-3% bump in google page speed insights by doing this.
To start lets confirm you actually font awesome on your website. This can quickly be done quickly by:
- Going to website
- Open the inspect element tool by clicking F12 or by Right-Click > Inspect
- Do CTRL + F (command + F on Mac) to search for “awesome”.
If you see any results for font-awesome, then your website is using and loading in the styles that we can then optimize.
Assuming you’re on WordPress, To begin you’ll either need a file manager plugin or FTP access. If you have FTP access, you know what you’re doing so I don’t need to explain. If you need a file manager plugin go to plugins in the side menu and click add new. Then search for “file manager” and then install Filester. Filester is much better than this one.
Now you need to find where your font awesome file is located. This can be done 2 ways. The first way is through inspect element. Right-click and click inspect element to bring up the inspect window, and then use the selector tool to click one of the icons found in your website, in my case I found one in the footer. Then click on the <i> icon element. Then you can see the font awesome CSS being applied to it.
Right-click the file name and click “open in new tab” so you can see the location. The other way to get the location is to run your website through Google page speed insights, it should pick up on the file not being optimized, so right-click the font awesome file being listed so you can open it in a new tab to see the location.
I recommend going to the URL of this code file and directly downloading it so you have copy or backup of it incase something goes wrong.
Once you have the location – navigate to it with your file manager plugin or your FTP client to open and edit it.
Once you have the file opened select all the code with CTRL A and copy the code with CTRL C
Now you want to unminify the CSS, so go find a CSS formatter and paste in your CSS. After it’s formatted it should look like this (below), now copy the code and paste it back into the file replacing the minified code.
This is where the fun begins. If you’re using FTP, open a new blank file with your text editor. If you were using the file manager plugin open a text editor like notepad or something similar.
This new blank file is where we’re going to create our new optimized version. To start, go back to your unminified font awesome file and copy the first section that looks the image below and paste it into your new blank file.
Below the code we just copied in the font awesome file are extra classes to add styling or animations to the icons (as shown in image below), which 99% of cases you wouldn’t need so were not going to add this to our new file.
This next part is kind of annoying, and may require a pen and paper. Go to your website and look for all the icons your website’s pages uses and note each of the class names down. You can see here I found the mail icon, so with inspect element I can see the class name is envelop-alt. In this case I would note down envelope-alt. Continue to do this with all the icons you can find on your website.
I suggest looking in the header, the footer, and on single blog post pages to find the bulk of the icons you would be using. You may be using other icons on other pages, so you’ll want to do the best you can to look through your entire website. Be sure to include the social media icons you’re using as well.
After that you should have a list of the icons you use, in my case I had 12. Heres an example of my list:
fa-checkfa-angle-downfa-copyrightfa-pinterest-pfa-userfa-calendar-altfa-long-arrow-upfa-angle-upfa-envelope-open
Now for each one of the icon class names you have listed, search for them in the unminfied font awesome file (CTRL + F) so you can copy and paste them into your new file. They should only appear as 2 lines of code for each icon.
Would I recommend is you also copy and paste all the different arrows, which have the class names of angle and long-arrow. They are common icons, so you might end up using them at some point.
After you have all your icons compiled into your new file, take that code and re-compress it by putting it into a css minifier tool.
Finally, take the compressed code and paste it into your unminifed font awesome file replacing all the code – overriding the file.
Be sure to check your website if all the icons are working. If some of them aren’t working, they may disappear completely or they will look like this – where it replaces your icon with this weird ass box (shown below). If it does this, go back to your CSS file and make sure you included the little snippet at the top of the file. If your problems still persists, sometimes your theme developer might have added some extra styling at the bottom of the font awesome file like some font loading, so be sure to copy that as well from the backup you should have made.
When I optimized my font awesome file, I had a 187% savings in size and it improves my Google page insights results by 2. The improvement for you will vary, but it will be a speed improvement nonetheless.
