我没有直接链接到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上的帐户打开了异步加载。
正如在@ GramThanos的评论中所提到的,<head>
中的所有内容都是渲染阻塞的。字体真棒CDN使CSS加载异步,这加快了速度,但谷歌仍然将JS视为渲染阻塞。
在靠近<body>
的末尾移动JS有助于它不会被渲染阻塞,也可以摆脱PageSpeed Insights警告。
如上所述,其中的所有内容都是渲染阻止。
另一种方法是在标记中包含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。