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=".js"></script>
And yes, I have turned on Async loading by logging into my account on Font-Awesome-CDN.
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.
Share Improve this question edited Mar 29, 2018 at 6:07 Anupam asked Mar 27, 2018 at 11:34 AnupamAnupam 15.6k20 gold badges72 silver badges102 bronze badges 2 |3 Answers
Reset to default 15As 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.
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.
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);
<body>now – Anupam Commented Mar 27, 2018 at 15:44