Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-awesome CDN JS showing as render-blocking on Pagespeed Insights

Instead of directly linking to the Font Awesome CSS, I am using the js from Font Awesome CDN to allow async loading of the icons on the homepage but Google's Pagespeed Insights still marks it as a render-blocking js.

I am using the custom js link provided by Font Awesome CDN and putting it in the <head> section (I could put it towards the end of the <body> also but thats where Font Awesome CDN asks me to put it).

<script src="https://use.fontawesome.com/mycustomcode.js"></script>

And yes, I have turned on Async loading by logging into my account on Font-Awesome-CDN.

like image 285
Anupam Avatar asked Mar 27 '18 11:03

Anupam


1 Answers

As noted above, everything in the <head> is render-blocking.

Another approach is to include the async or defer attributes in the tag:

<script async src="https://use.fontawesome.com/mycustomcode.js"></script>

or

<script defer src="https://use.fontawesome.com/mycustomcode.js"></script>

@Anupam suggested (rightly) moving the tag to the end of the body, but even FontAwesome suggests including the defer attribute too.

Flavio Copes has a good explanation of script async vs. defer.

like image 186
Deke Avatar answered Sep 16 '22 12:09

Deke