PageSpeed 指责脚本在使用外部图像时“阻止渲染”答案

【问题标题】：PageSpeed accuses script of "render-blocking" when using external imagePageSpeed 指责脚本在使用外部图像时“阻止渲染”
【发布时间】：2017-02-19 01:36:04
【问题描述】：

我在页面正文的结束标记之前放置了来自 CDN 的脚本（</body> 上方）。 Google 的 PageSpeed Insights 说：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS
您的页面有 1 个阻止脚本资源。这会导致您的页面呈现延迟。

我认为脚本在我的</body> 结束之前不要延迟渲染？

经过反复试验，我发现这是因为我的页面使用了外部图像。通过下面的示例，您可以使 PageSpeed 检测“渲染阻止”脚本：

<body>
    <img src="http://i.stack.imgur.com/oURrw.png" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>

这真的会导致我的页面呈现延迟吗？

【问题讨论】：

您能否将minimal reproducible example 放在一起展示“您的页面有3 个阻塞脚本资源...” 错误并将标记放在问题中？

标签： html pagespeed google-pagespeed html-rendering

【解决方案1】：

我认为</body> 结束之前的脚本不会延迟渲染？

正确，他们没有。

例如，对我来说，这（带有图像）会触发https://code.jquery.com/jquery-3.1.1.min.js 的渲染阻止警告：

...

如果我删除 img，render-blocking-JavaScript 警告就会消失。

我会将其报告为错误。我没有看到任何关于该脚本的渲染阻塞。我什至尝试将img 包装成固定大小overflow: nonediv，但仍然出现错误。不明白为什么该脚本会阻塞渲染；如果您将其报告为错误，并且事实证明这是有原因的，那么，这是一个很好的结果。但更有可能是一个错误。

【讨论】：

你知道我可以在哪里报告这个错误吗？
@RuudLenders：不是随便，不是，但谷歌非常擅长保持开放。（当然，偶尔也会有绊脚石。）

【解决方案2】：

恕我直言，您认为是正确的，Google 的 PageSpeed 应该指的是阻塞某些页面渲染时间 b/c 同步执行脚本的资源，因此理论上您的页面仍在加载，defer 将异步执行它们，这就是它不执行的原因将它们更改为以延迟模式加载后不会抱怨。你可以查看这篇很好的帖子，它很好地解释了它here。

【讨论】：

好的。但是，似乎添加 defer 只会满足 PageSpeed Insights，与在 </body> 之前添加脚本相比，实际上并没有做任何有益的事情。