15

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.

Anupam
  • 14,950
  • 19
  • 67
  • 94
  • 2
    Isn't everything inside the "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. – GramThanos Mar 27 '18 at 12:08
  • @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 `` now – Anupam Mar 27 '18 at 15:44

3 Answers3

13

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.

Bouh
  • 1,303
  • 2
  • 10
  • 24
Deke
  • 143
  • 1
  • 4
4

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.

Anupam
  • 14,950
  • 19
  • 67
  • 94
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);
Saulo M
  • 173
  • 2
  • 7
  • The `defer` attribute postpones loading the script until the document is parsed. There's no need to execute JavaScript, browsers support it natively. – ericek111 Aug 16 '20 at 13:27
  • @ericek111 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. – Saulo M Aug 17 '20 at 13:09
  • 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. – ericek111 Aug 18 '20 at 11:37