PageSpeed accuses script of “render-blocking” when using external image

Question

I have placed a script from a CDN just before the closing tag of my page's body (above </body>). Google's PageSpeed Insights says:

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.

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

After some trial and error I found out that this is caused because my page uses an external image. With the example below you can cause PageSpeed to detect a "render-blocking" script:

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

Does this really cause a delay in rendering my page?

Can you put together a minimal reproducible example demonstrating the "Your page has 3 blocking script resources..." error and put the markup in the question? — T.J. Crowder

T.J. Crowder T.J. Crowder · Accepted Answer · 2017-02-18T17:26:03

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

Correct, they don't.

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.

I'd report that as a bug. I don't see anything render-blocking about that script. I even tried wrapping the img in a fixed-size, overflow: none div, and still got the error. Can't see why that script would be render-blocking; if you report it as a bug, and it turns out there's a reason, well, that's a good result. But more likely it's a bug.

PageSpeed accuses script of “render-blocking” when using external image

2 Answers