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

Question

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

我正在使用 Font Awesome CDN 提供的自定义 js link 并将其放在 <head> 部分（我也可以将它放在 <body> 的末尾，但就是这样Font Awesome CDN 让我把它放在哪里）。

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

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

Answer 1

如@GramThanos 的评论所述，<head> 中的所有内容都是 render-blocking。 Font-awesome CDN 使 CSS 异步加载，这确实加快了它的速度，但 Google 仍然会将 JS 视为 render-blocking。

将 JS 移动到接近 <body> 末尾有助于它不再是 render-blocking 并且还消除了 PageSpeed Insights 警告。

Answer 2

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

另一种方法是在标记中包含异步或延迟属性：

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

或

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

@Anupam 建议（正确地）将标签移动到主体的末尾，但即使 FontAwesome suggests including the defer attribute too.

Flavio Copes good explanation of script async vs. defer.

Answer 3

我只是想分享一下我是如何通过改变加载 Font Awesome 的方式将加载页面减少 50% 以上的。我没有将脚本标签直接包含在 html 文件中，而是通过 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);

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

Font-awesome CDN JS showing as render-blocking on Pagespeed Insights

javascript

css

pagespeed

google-pagespeed

font-awesome