消除渲染阻塞 JavaScript答案

【问题标题】：eliminate render-blocking JavaScript消除渲染阻塞 JavaScript
【发布时间】：2016-01-26 04:01:05
【问题描述】：

我对谷歌页面速度洞察有一个奇怪的问题。即使我已将所有脚本移至页脚，并且关键 css 已内联在页眉中，我仍收到此错误。移动端效果非常好，桌面端收到此错误。有人对如何解决这个问题有一些想法吗？这是测试的网址：google page speed insights

【问题讨论】：

标签： performance pagespeed

【解决方案1】：

我查看了您提供的 URL 的来源，似乎 HEAD 中有一个脚本标签。

<script>
    sessionStorage.setItem('BASEURL', 'http://test.bigcat.rs/mirokredit/wp-content/themes/mirobuild');
    sessionStorage.setItem('LANG', 'de');
</script>

您还应该将其移至结束 BODY 标记之前，将 "async" attribute 添加到标记中。它会在脚本可用时立即通知浏览器异步运行脚本并移除阻塞。

希望有帮助！

【讨论】：

你好迪阿诺。没有帮助你的方法。此脚本不是渲染阻塞，因为它是内联的。即使我把它移到了底部，在 BODY 结束之前，pagespeed 洞察力对桌面也说同样的话：删除阻塞...
@bigcat 很高兴你把它整理好了。任何脚本都是渲染阻塞的，即使它们是内联的，您仍然应该始终添加 async 属性！

【解决方案2】：

我找到了问题和解决方案！在我的原始 css 中，我有一个用于桌面上顶级内容的 BG 图像。在关键的 css 中，我只包含了 bg-color，我想稍后再提供这个 bg-image。一旦我将 bg-image 包含在关键的 css 中（在标题中），桌面结果就会得到改善，并且渲染阻止脚本错误消息消失了。 Google pagespeed insight检查了最终结果图片与仅使用关键css生成的图片，发现图片不够相似，这就是为什么它说我有阻止内容。

【讨论】：