How to Reduce FontAwesome Load Time & boost Website Speed

Delay font Awesome icons in website

In this article, I will show you how you can Reduce FontAwesome Load Time by delaying the loading of stylesheets.

Font Awesome is a popular icon library that provides a wide range of scalable vector icons that can be easily customized and used in web development projects. When a website uses font awesome stylesheets for icons, it generally slows down the speed significantly as the browser needs to download the font from a third-party server. In that process, it blocks the critical Assets from being loaded first and reduces the page speed insight scores.

You may have seen errors like Reduce unused CSS, Reduce Render blocking resources, or Avoid chaining critical requests due to font awesome code.

So, the solution is either you switch the font-awesome icons with SVG icons or delay the loading of it. It is not always possible to completely swap icons with SVG icons but we can easily delay the loading of font awesome stylesheet and boost the website loading speed.

How to Delay Font-awesome Icons in Blogger?

To delay the font awesome icons you need to first identify the version used on your website.

You can simply search (CTRL + F ) for font-awesome in the theme code and remove that from your theme.

Now use the below script and replace it with the source code of font-awesome with the right version.

<script>
setTimeout(function() {
  // Add the Font Awesome stylesheet dynamically
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css';
  document.head.appendChild(link);
}, 3000); // Delay of 3 seconds
</script>

If you have multiple font-awesome codes it uses both import and stylesheets then you need to use the below script with both source link.

<script>
setTimeout(function() {
  // Add the Font Awesome stylesheet dynamically
  var link1 = document.createElement('link');
  link1.rel = 'stylesheet';
  link1.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css';
  document.head.appendChild(link1);

  var link2 = document.createElement('link');
  link2.rel = 'stylesheet';
  link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css';
  document.head.appendChild(link2);
}, 3000); // Delay of 3000 milliseconds (3 seconds)
</script>

Now, use one of these scripts just above the closing body tag and save the code. Now the font-awesome icons are being lazyloaded or you can say delayed by 3 seconds. You can adjust this value in the script above.

Load Font Awesome library asynchronously using JavaScript

And if you don’t want to delay the font-awesome icons then you can Load the Font Awesome library asynchronously using JavaScript. This way, the icons will be fetched and rendered after the critical content of the page has loaded. This will not that effective as the delay method but definitely improve from the default one.

<!-- Place this script tag in the head section of your HTML -->
<script>
  // Asynchronous loading of Font Awesome
  (function() {
    var link = document.createElement('link');
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL
    link.rel = 'stylesheet';
    link.type = 'text/css';
    var script = document.getElementsByTagName('script')[0];
    script.parentNode.insertBefore(link, script);
  })();
</script>

In this example, the Font Awesome CSS file is loaded asynchronously using JavaScript. Adjust the URL inside the link.href attribute to point to the Font Awesome CSS file you want to use.

By implementing this approach, the critical content of your webpage will load first, without waiting for Font Awesome icons. Then, the icons will be loaded asynchronously, reducing the initial load time and improving the overall website speed.

Advanced Method

Certainly! Another method to delay the loading of Font Awesome icons is by using the Intersection Observer API. This approach allows you to load the icons only when they become visible in the viewport, reducing the initial page load time. Here’s how you can implement it:

Remove the default Font Awesome stylesheet as mentioned in the previous method.

Add a placeholder element for each Font Awesome icon. This can be a simple <span> or <div> element.

Use the Intersection Observer API to detect when the placeholder elements are visible in the viewport. When an element becomes visible, load the Font Awesome CSS and replace the placeholder with the actual icon.

Here’s an example implementation using JavaScript:

<!-- Place this script tag in the head section of your HTML -->
<script>
  // Intersection Observer callback function
  function loadFontAwesome(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        // Load Font Awesome CSS
        var link = document.createElement('link');
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; // Replace with your Font Awesome CSS URL
        link.rel = 'stylesheet';
        link.type = 'text/css';
        document.head.appendChild(link);

        // Replace placeholder with Font Awesome icon
        var placeholder = entry.target;
        var iconClass = placeholder.getAttribute('data-icon');
        var iconElement = document.createElement('i');
        iconElement.className = iconClass;
        placeholder.parentNode.replaceChild(iconElement, placeholder);

        // Stop observing this element
        observer.unobserve(entry.target);
      }
    });
  }

  // Set up Intersection Observer
  var options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  var observer = new IntersectionObserver(loadFontAwesome, options);

  // Start observing the placeholder elements
  var placeholders = document.querySelectorAll('.font-awesome-placeholder');
  placeholders.forEach(function(placeholder) {
    observer.observe(placeholder);
  });
</script>

<!-- Place the placeholder elements wherever needed -->
<p>Some content...</p>
<span class="font-awesome-placeholder" data-icon="fas fa-heart"></span>
<p>Some more content...</p>

In this example, we use the Intersection Observer API to detect when the placeholder elements with the class font-awesome-placeholder become visible in the viewport. When an element is visible, we load the Font Awesome CSS dynamically, replace the placeholder with the actual icon element, and stop observing that element.

Adjust the URL inside the link.href attribute to point to the Font Awesome CSS file you want to use. Also, modify the data-icon attribute of each placeholder element to specify the desired Font Awesome icon class.

By using the ‘Intersection Observer‘ API, the Font Awesome icons will be loaded only when they are about to become visible, reducing the initial load time of the page and improving website speed.

I hope this article will help you Reduce FontAwesome Load Time and boost the website loading speed. In this way, you can make your website core web vitals friendly.

Similar Posts

2 Comments

  1. evaggelos says:

    Yes, it works fine.

    Thanks

    1. Thank you bro, it works good

Leave a Reply

Your email address will not be published. Required fields are marked *