Question

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

我正在使用Font Awesome CDN提供的自定义js链接并将其放在<script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'sv'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js? cb=googleTranslateElementInit"></script>部分（我可以将它放在<head>的末尾，但那些Font Awesome CDN要求我把它）。

<body>

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

Answer 1

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

将JS移到<body>末尾附近帮助它不会被渲染阻塞，也摆脱了PageSpeed Insights警告。

Answer 2

如上所述，中的所有内容都是渲染块。

另一种方法是在代码中包含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。

Flavio Copes有一个good explanation of script async vs. defer。

Answer 3

我只想分享我如何将加载页面减少50％以上，而我加载Font Awesome的方式只有一次更改。我没有直接在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);

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

3 个答案: