Search code examples
htmlpagespeedgoogle-pagespeedhtml-rendering

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


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="https://i.sstatic.net/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?


Solution

  • 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.