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

Question

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!

You can at least reduce the amount of render-blocking by combining the files into one. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 7, 2015 at 22:00
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
– drmrbrewer, Commented Jul 7, 2015 at 22:09
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
– Niet the Dark Absol, Commented Jul 7, 2015 at 22:35

Jens Schreiber · Accepted Answer · 2015-07-10 10:26:32Z

1

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>

answered Jul 10, 2015 at 10:26

Jens Schreiber

1294 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Labanino Over a year ago

I have the same issue, the thing is that all my .js and .css are cdn's. I manage to get rid of the .js warnings by using the async attribute to the .js call but still have the .css warnings and I haven't found a work around yet.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related