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.

Answer 3

Eliminate render-blocking CSS in above-the-fold content issue.I Solve blocking CSS Resources Optimize CSS Delivery of the following way:

<script>
        var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/style.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
        if (raf) raf(cb);
        else window.addEventListener('load', cb);
</script>

Answer 4

You can convert all your css code files into one file, then google suggest you only one file renderblocking. Otherwise if you are working with Wordpress project you can use various plugins for your site like eliminate render blocking css and js.

if you want to completely render remove render blocking, then you can put all you css code into head section, works prefect.

Answer 5

Eliminate external render-blocking

<script src="your-path.js" defer></script> <script src="your-path.css" media></script>