Font-awesome: how to speed up its load?

Homepage Forums Pro Support Forum BoldR Pro BoldR Pro Support Font-awesome: how to speed up its load?

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

Font-awesome: how to speed up its load?

This topic contains 2 replies, has 2 voices, and was last updated by  SantiH 5 days, 6 hours ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24398
    Font-awesome: how to speed up its load?

    SantiH
    Participant

    Hi Iceable,

    I am trying to speed up my website (www.biginfinland.com). Over the years I’ve been keeping up with a cache plugin, but lately I believe google is sending less traffic because of speed issues.

    It seems that the source of the lack of a fast first fast-rendering, according to the hummingbird plugin and google speed test is font-awesome. (see screenshot)

    I have been researching and tinkering but I can’t seem to get rid of the problem. One of the suggested solutions on Hummingbird is to add the “font-display:swap” somewhere, but I can’t seem to locate this in the code. The .woff2 file seems to be the one to blame.

    The ideal scenario would be to defer the load of font-awesome to the latest possible second, so the text loads fast. How could this be achieved?

    Thank you.
    –Santiago.

    Attachments:
    You must be logged in to view attached files.
    #24402
    Reply to: Font-awesome: how to speed up its load?

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi,

    You can certainly dequeue font-awesome to prevent it from loading during page load, and load it asynchronously instead. Or even not load it at all if you are not actually using it.

    To just dequeue it so it’s not loaded during the inital page load, you’ll need to have created a child theme (https://developer.wordpress.org/themes/advanced-topics/child-themes/), and add this to your child theme’s functions.php:

    add_action('wp_enqueue_scripts', function() {
        wp_dequeue_style( 'font-awesome' );
    }, 20);

    To load it asynchronously (just after the page is done loading), also add this:

    add_action('wp_footer', function() {
    	echo "<script type='text/javascript'>
    		(function() {
    			var css = document.createElement('link');
    			css.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css';
    			css.rel = 'stylesheet';
    			css.type = 'text/css';
    			document.getElementsByTagName('head')[0].appendChild(css);
    		})();
    	</script>";
    });

    A couple of things to note though:

    – Font-awesome is technically a font, but it is only used for icons, so it is not related to text rendering and “font-display:swap” wouldn’t make any sense (alsothis parameter is specific to google fonts, so it wouldn’t have any effect on font-awesome).

    – Site speed is definitely a ranking factor, but getting rid of a single resource from a third party CDN that takes just 50ms to load probably won’t have a huge impact on your site’s ranking (even though it will remove the “issue” reported by page speed tests). If your search engine rankings and/or organic traffic dropped, you will probably need to also investigate other possible factors.
    One of them that grew in importance recently is the use of SSL (so your site loads over https instead of http). You should definitely also look into this.

    #24408
    Reply to: Font-awesome: how to speed up its load?

    SantiH
    Participant

    Thanks a lot for the code! I’ll definitely implement it. As I believe Google takes into account the list of speed-related items in the list in “PageSpeed insights” for its rankings, this will be a great help.

    Next on my list is implementing https, too.

    Cheers and stay healthy on these Coronavirus-filled days.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe