Get that hundo 💯 (Part 1) - Handling unused font-awesome css styles

As I have mentioned in my last blog, I have promised to share my experiences in building my portfolio site as a side project.

Today we will be taking a look at how we can improve our lighthouse score by taking care of unused CSS issue that was caused by font-awesome, according to how it worked for me at least. So the story of how I decided to go through this topic goes like this, I just threw some stuff like font-awesome and some styles to the landing page without considering performance at first and see how that can affect my lighthouse score. Note that I have only written a few lines of Javascript to handle some smooth scrolling at this time, but lo and behold the performance score is in the gutters.

Now there were some reasons as to why this was happening, I will try to investigate and solve the main reason on this blog :

Unused CSS styles

Now, why would unused CSS styles affect a site's speed? The logic is pretty simple, unused CSS will increase the size of your page thus taking a longer time to finish a request. When the unused styles are few in number it might not have a drastic effect on the page size. But when the unused styles come from libraries like font awesome or bootstrap, which have somewhat larger minified file sizes (58KB & 149KB respectively) lighthouse will be complaining about a lot of unused styles. Besides, you will also have a lot of redundant code.

By also taking a look at the developer console coverage tab, we can see from above that 99% of the code is redundant and unused.

So what can we do to resolve unused CSS issues when using icon fonts like font-awesome. One solution can be using tools like fontello. Fontello allows you to create your own font icon pack by letting you pick the icons that your site will be using, It has got icon packs from font-awesome 4.7, Typicons and more. you will also be able to add your own SVG icons.

Another solution can be using inline SVGs. When using inline SVGs you will be inserting the SVG code right in the HTML. This will bring all your icons with just one HTTP request unlike font icons which will require another request. Not only that SVGs hold the upper hand when it comes to accessibility. Tags like <title> make it accessible for screen readers. With that in mind I decided to use inline SVG. Let's take a look at one way you can achieve that step by step.

1. Download the icons in SVG format. Fontawesome already lets you do that easily from the gallery page.

2. Build your SVG icon system with tools like IcoMoon or Fontastic. IcoMoon will give you an SVG sprite and some css code that you can insert in to your project. Here's an example of the code I got from IcoMoon.
   

   <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <defs>
           <symbol id="icon-blog-solid" viewBox="0 0 32 32">
               <title>blog-icon</title>
               <path d="M10.762 14.175c-0.912-0.181-1.762 0.556-1.762 1.488v3.15c0 0.637 0.444 1.15 1.044 1.375 1.137 0.425 1.956 1.525 1.956 2.813 0 1.656-1.344 3-3 3s-3-1.344-3-3v-15.5c0-0.831-0.669-1.5-1.5-1.5h-3c-0.831 0-1.5 0.669-1.5 1.5v15.5c0 5.594 5.131 10.013 10.938 8.794 3.4-0.712 6.144-3.462 6.856-6.856 1.087-5.181-2.313-9.825-7.031-10.762zM13.063 0c-0.575-0.031-1.063 0.425-1.063 1v1.975c0 0.531 0.412 0.969 0.938 0.994 8.087 0.438 14.587 7 15.056 15.094 0.031 0.525 0.469 0.938 0.994 0.938h2.006c0.575 0 1.031-0.488 1-1.063-0.531-10.2-8.731-18.4-18.931-18.938zM13.081 6c-0.581-0.044-1.081 0.419-1.081 1.006v2.006c0 0.525 0.406 0.956 0.925 0.994 4.8 0.394 8.625 4.263 9.056 9.075 0.050 0.519 0.475 0.919 0.994 0.919h2.012c0.581 0 1.050-0.5 1.006-1.081-0.525-6.881-6.031-12.387-12.912-12.919z"></path>
           </symbol>
   
           <symbol id="icon-twitter-brands" viewBox="0 0 32 32">
               <title>twitter-icon</title>
               <path d="M28.711 9.482c0.020 0.284 0.020 0.569 0.020 0.853 0 8.67-6.599 18.66-18.66 18.66-3.716 0-7.168-1.076-10.071-2.944 0.528 0.061 1.036 0.081 1.584 0.081 3.066 0 5.888-1.035 8.142-2.802-2.883-0.061-5.3-1.949-6.132-4.548 0.406 0.061 0.812 0.102 1.239 0.102 0.589 0 1.178-0.081 1.726-0.223-3.005-0.609-5.259-3.249-5.259-6.437v-0.081c0.873 0.487 1.888 0.792 2.964 0.832-1.766-1.178-2.924-3.188-2.924-5.462 0-1.218 0.325-2.335 0.893-3.31 3.228 3.98 8.081 6.579 13.523 6.863-0.101-0.487-0.162-0.995-0.162-1.502 0-3.614 2.924-6.558 6.558-6.558 1.888 0 3.594 0.792 4.792 2.071 1.482-0.284 2.904-0.832 4.162-1.584-0.487 1.523-1.523 2.802-2.883 3.614 1.32-0.142 2.599-0.508 3.777-1.015-0.893 1.299-2.010 2.457-3.289 3.391z"></path>
           </symbol>
   
           <symbol id="icon-arrow-down-solid" viewBox="0 0 28 32">
               <title>arrow-down-icon</title>
               <path d="M25.819 13.906l1.387 1.387c0.587 0.588 0.587 1.538 0 2.119l-12.144 12.15c-0.588 0.587-1.537 0.587-2.119 0l-12.15-12.15c-0.588-0.587-0.588-1.537 0-2.119l1.388-1.387c0.594-0.594 1.563-0.581 2.144 0.025l7.175 7.531v-17.962c0-0.831 0.669-1.5 1.5-1.5h2c0.831 0 1.5 0.669 1.5 1.5v17.962l7.175-7.531c0.581-0.613 1.55-0.625 2.144-0.025z"></path>
           </symbol>
       </defs>
   </svg>
   

   The CSS code looks like this
   

   .icon {
     display: inline-block;
     width: 1em;
     height: 1em;
     font-size: 1.2rem;
     stroke-width: 0;
     stroke: currentColor;
     fill: currentColor;
   }
   
   .icon-github-brands {
     width: 0.96875em;
   }
   
   .icon-instagram-brands {
     width: 0.875em;
   }
   
   .icon-linkedin-brands {
     width: 0.875em;
   }
   
   .icon-arrow-down-solid {
     width: 0.875em;
   }
   

3. Add the SVG sprite to your HTML file body. Don't worry it's hidden so it will only appear when you call and use them. And add the CSS styles to your CSS file.

4. Call your icons where you normally would use font icons. For example, I was able to wrap my inline SVG by my <a> tags this way.
   

   <a class="full-screen-hero__contents__socials__item" href="https://www.twitter.com/aotwits" target="_blank">
   <svg class="icon icon-twitter-brands"><use xlink:href="#icon-twitter-brands"></use></svg>
   </a>
   

   xlink:href value references the ID of your SVG icon from the sprite.

By handling unused CSS problems this way I was able to improve my performance and accessibility score by 20 points.

But that's not enough largest contentful paint still needs some work and like what the title says we will not stop until we get that hundo !! I will be back with some more solutions on Part 2. You can view the source code of this project on github and view my site on netlify.