Font Awesome Slowing Down Load Time - Possible to Preload?

Can see from previous forum support tickets, this is a known issue about Font Awesome and it affecting load times as highlighted by PageSpeed Insights.

Was trying the option of adding code to my php.header to preload but it is not sticking. Can you advise if this code is even worth continuing to tweak? Read other articles you’ve posted and it does not seem like this problem is truly addressed.

Hi Kimberly,

Thanks for reaching out.
If you are using any custom font, you can add the Font Display option to set the font loading priorities. Please find the screenshot describing the setting and the URL describes the option values for it.

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

If you still want to add it through the code, please add the following code into your child theme’s funstions.php.

add_action('wp_head', 'preload_font', 5);
function preload_font()
{
?>
    <link rel="preload" href="appropriate url of font here" as="font">
<?php
};

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

Thanks for showing that additional section under Theme settings for Font Display. Unfortunately, played with various settings in there and it did not achieve the site speed affect I was hoping for.

Looks like I’m onto the child theme option.

Hey Kimberly,

Sorry for the confusion. The Font Display option isn’t for speed. What it does is alleviate the “Flash Of Unstyled Text” issue in web development, not just our theme.

Regarding the Font Awesome speed, it will only be as fast as your web host as it’s self-hosted. We understand that the PageSpeed Insights report it as a blocking resource since it’s loaded in the header like any other font but loading the font in the header is the standard way in web development. It sure is slow but that is for stability since the method to load fonts in the footer (which will pass PageSpeed Insights) is experimental and it’s beyond the scope of our support to give you that.

There are performance plugins that can transfer all the fonts to be loaded in the footer. Please check some plugins like LiteSpeed. Just still note that we cannot provide further info on this as this is beyond the functionality of our theme.

Hope that helps and thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.