Login/Register
Font-awesome CDN JS showing as render-blocking on Pagespeed Insights
Asked Answered
Solved javascriptcssfont-awesomepagespeedgoogle-pagespeed
B

3

17

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.

Bedrock answered 27/3, 2018 at 11:34 Comment(2)
Isn't everything inside the <head> "render-blocking"? The render will not start unless the js file has loaded. This does not means that the rest of the Font Awesome will block the render. – Eidson
@GramThanos: your point makes sense. Font-awesome tries to get it's js to load the css asynchronously but the js itself is render-blocking. To take care of the warning on Google PageSpeed Insights, I have moved the script towards the end of the <body> now – Bedrock
B
6

As mentioned in @GramThanos's comment, everything inside the <head> is render-blocking. Font-awesome CDN makes the CSS load asynchronously which does speed it up but Google would still see the JS as render-blocking.

Moving the JS near the end of the <body> helped it to not be render-blocking and also get rid of the PageSpeed Insights warning.

Bedrock answered 29/3, 2018 at 6:6 Comment(0)
O
15

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.

Obligatory answered 29/4, 2019 at 16:23 Comment(0)
B
6

As mentioned in @GramThanos's comment, everything inside the <head> is render-blocking. Font-awesome CDN makes the CSS load asynchronously which does speed it up but Google would still see the JS as render-blocking.

Moving the JS near the end of the <body> helped it to not be render-blocking and also get rid of the PageSpeed Insights warning.

Bedrock answered 29/3, 2018 at 6:6 Comment(0)
I
0

I just wanted to share how I reduced the loading page in over 50% with just one change in the way I was loading Font Awesome. Instead of including the script tag directly in the html file, I loaded the js file programmatically via javascript:

var script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/solid.js'
document.head.appendChild(script);

script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/brands.js'
document.head.appendChild(script);

script = document.createElement('script')
script.src = 'https://use.fontawesome.com/releases/v5.8.2/js/fontawesome.js'
document.head.appendChild(script);
Infinitesimal answered 5/7, 2019 at 20:50 Comment(3)
The defer attribute postpones loading the script until the document is parsed. There's no need to execute JavaScript, browsers support it natively. – Shevat
@Shevat I understand your point but have you measured? I don't know why but this way is faster for me and also has better results with pagespeed. Don't downvote answers that may work for other people. – Infinitesimal
This simply injects the external JS whenever the parser stumbles upon your code. There are no async or defer attributes and it will block until your FontAwesome JS completely loads. I doubt this would be faster than async-ed and defer-red script tag. Also, I don't know where'd you get that I downvoted your post. – Shevat

© 2022 - 2024 — McMap. All rights reserved.