How to “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

1
votes

I have a web page which receives a very poor "Mobile" score of 42%. The only item flagged in red is that I should "Eliminate render-blocking JavaScript and CSS in above-the-fold content". But all of the page is rendered above the fold, because it's all on the same page, without scrolling. And all of the JS and CSS is required for rendering the page.

So am I just stuck with a big FAIL from Google, or is there something I've missed?

The main libraries I'm loading are:

jquery.min.js
jquery-ui.min.js
jquery-ui-slider-pips.min.js

... and my own scripts for doing the gruntwork for the page.

What may be causing an issue is that I have an img div with a URL that points to a node server that generates a png on the fly, and it usually takes ~2 secs for that image to be served. But that div is hidden until its ready to display, so I can't see why that would be the real issue.

Thanks for any insights that might help improve the google pagespeed score!

1
javascripthtmlcsspagespeed
You can at least reduce the amount of render-blocking by combining the files into one. - Niet the Dark Absol
OK, so combining the files into one presumably only works for those that I have stored locally (which is only mine. Of course, I can always store local copies of the jquery etc libraries (and combine into one), but from other research I had understood that it's actually better to refer to remote libraries rather than local libraries, because common libraries like jquery will likely be cached on intermediate servers and therefore available quickly, even on first load. Whereas a local js file will always need to be downloaded to the client, at least for the first load. What is better? - drmrbrewer
Personally I don't use jQuery at all, so my opinion may be biased, but it all depends on what you're after. Personally, I get users who visit a LOT of pages - that's just how the site works. So having stuff downloaded that is relevant only to the current page is good, as well as a lot of caching so it's only downloaded once. It may take a fraction of a second longer the first time you load it, but you're also loading smaller pieces on each page, so... it depends on your setup, really. - Niet the Dark Absol

1 Answers

1
votes

combine and minified the js files and set into last tags on element

<html>
<head></head>
<body>
<!-- html content -->
<script src="minified-script.min.js" type="text/javascript">
</body>
</html>