字体很棒的 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的末尾，但这就是 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 属性。

Answer 2

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

将 JS 移动到靠近末尾的位置<body>有助于它不被渲染阻塞，并且还可以消除 PageSpeed Insights 警告。