PageSpeed 在使用外部图像时调用 "render-blocking" 的脚本

Question

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

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources. This causes a delay in rendering your page.

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

经过反复试验，我发现这是因为我的页面使用了外部图像。使用下面的示例，您可以使 PageSpeed 检测到 "render-blocking" 脚本：

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

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

Answer 1

恕我直言，您的看法是正确的，Google 的 PageSpeed 应该指的是资源阻塞了一些页面呈现时间 b/c 它同步执行脚本，所以理论上您的页面仍在加载，延迟将异步执行它们，这就是为什么在您将它们更改为以延迟模式加载后它不会抱怨的原因。你可以看看这个很好的post，它解释得很好here。

Answer 2

I thought scripts before the end of my </body> don't delay the rendering?

正确，他们没有。

For instance, for me, this (with the image) triggers the render-blocking warning for https://code.jquery.com/jquery-3.1.1.min.js:

...

If I remove the img, the render-blocking-JavaScript warning disappears.

我会将其报告为错误。我没有看到任何关于该脚本的内容 render-blocking。我什至尝试将 img 包装在 fixed-size、overflow: none div 中，但仍然出现错误。不明白为什么该脚本会是 render-blocking；如果您将其报告为错误，并且事实证明这是有原因的，那么，这是一个很好的结果。但更有可能是一个错误。

PageSpeed 在使用外部图像时调用 "render-blocking" 的脚本

PageSpeed accuses script of "render-blocking" when using external image

html

pagespeed

html-rendering

google-pagespeed