字体很棒的 CDN JS 在 Pagespeed Insights 上显示为渲染阻塞

Question

我没有直接链接到 Font Awesome CSS，而是使用Font Awesome CDN 中的 js 来允许异步加载主页上的图标，但 Google 的 Pagespeed Insights 仍将其标记为阻止渲染的 js。

我正在使用 Font Awesome CDN 提供的自定义 js 链接并将其放在<head>部分（我也可以将它放在<body>的末尾，但这就是 Font Awesome CDN 要求我放置的地方）。

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

是的，我通过在 Font-Awesome-CDN 上登录我的帐户打开了异步加载。

Answer 1

如上所述， <head>中的所有内容都是渲染阻塞的。

另一种方法是在标签中包含 async 或 defer 属性：

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

或

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

@Anupam 建议（正确地）将标签移到正文的末尾，但即使是FontAwesome 也建议包括 defer 属性。

Flavio Copes对脚本 async 与 defer有很好的解释。

Answer 2

正如@GramThanos 的评论中提到的， <head>都是渲染阻塞的。 Font-awesome CDN 使 CSS 异步加载，这确实加快了速度，但 Google 仍会将 JS 视为渲染阻塞。

将 JS 移动到<body>的末尾附近有助于它不会阻塞渲染并摆脱 PageSpeed Insights 警告。

Answer 3

我只是想分享我如何通过加载 Font Awesome 的方式进行一项更改，从而将加载页面减少了 50% 以上。 我没有直接在 html 文件中包含 script 标签，而是通过 javascript 以编程方式加载了 js 文件：

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);