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

问题描述 投票:3回答:2

我没有直接链接到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上的帐户打开了异步加载。

javascript css font-awesome pagespeed google-pagespeed
2个回答
2
投票

正如在@ GramThanos的评论中所提到的,<head>中的所有内容都是渲染阻塞的。字体真棒CDN使CSS加载异步,这加快了速度,但谷歌仍然将JS视为渲染阻塞。

在靠近<body>的末尾移动JS有助于它不会被渲染阻塞,也可以摆脱PageSpeed Insights警告。


1
投票

如上所述,其中的所有内容都是渲染阻止。

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

<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

弗拉维奥科普斯有一个good explanation of script async vs. defer

© www.soinside.com 2019 - 2024. All rights reserved.