Options to solve JavaScript and CSS in above-the-fold content

Question

I validate a site using Google's Page Speed and I get the following error:

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

Your page has 1 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.

JAVASCRIPT

I have two javascript files on bottom of my page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/scripts/main?v=5jyyqQNx45M0Mbw-ZD6J9SVac8LfWyZZLh_wq6HtfQI1" type="text/javascript" async></script>

I am getting JQuery from Google CDN and Main.js from local server.

I applied async to Main.js but this does not solve it ...

... The only thing that solves this is adding async also to JQuery from Google's CDN.

But then the code in Main.js using JQuery stops working ... No idea why.

CSS

I am not sure what to do to solve it. Any suggestion?

Could someone, please, help me out?

Thank You, Miguel

Answer 1

But then the code in Main.js using JQuery stops working ... No idea why.

That code breaks, because jQuery is loaded after Main.js is executed and as Main.js depends on it .. well, it's going to fail.

You won't come around loading your CSS and JS, therefore there isn't really anything you could do - Except using pure HTML.

The linked google help page says:

• If your CSS/JS file is quite small, then load it using inline tags
• You can try to put important CSS/JS in one file and not-so-important one in another file which is loaded async