问题
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?
回答1:
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.
回答2:
IMHO your believe is correct, Google's PageSpeed should be referring to the resources blocking some page rendering time b/c its executing the scripts synchronously so in theory your page is still loading, defer will execute them async and that's why it doesn't complaint after you change them to be loaded in defer mode. You can check this nice post that explains it really well here.
来源：https://stackoverflow.com/questions/42293602/pagespeed-accuses-script-of-render-blocking-when-using-external-image