Eliminate external render-blocking

Question

PageSpeed Insights suggests me to:

"Eliminate external render-blocking Javascript and CSS in above-the-fold content. Your page has 1 blocking CSS resources. This causes a delay in rendering your page. Optimize CSS delivery for the following resources: http://itransformer.es/css/c0f9425.css"

The css file c0f9425.css is the combined file with jquery-ui.css file and custom one.

I don't really understand this point. How should I follow this suggestion?

Answer 1

Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.

Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Idea is to load what the user sees first as fast as possible.

Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…

Answer 2

I have successfully solved this problem with javascript files only.

Try adding the async attribute in script tag or defer attribute.

For example:

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script> 

or

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

I suggest you to use async, it loads the file only when needed. Defer attribute load the file at the end of the page, some time it will not perform its functionality required.