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?

Stanhope

Here is it: itransformer.es – Stanhope

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…

Divergency

Ok. Thank you. I won't change this for the moment, but I suppose that I'm taking a very little part of jquery-ui and it is not efficient to send all the code. I'll remember this. – Stanhope

But basically, this suggestion would run against a lot other of other rules and best practices from google and others! First of all, you have to load the inline css, for EVERY page load and not only once. The other point is, you have to mess up HTML and CSS code. The third point is, its harder to maintain. Sorry google, but thats stupid – Revisionist

@leftjustified Same opinion here. But when you have a large project, it could be worth the extra work. So as always, it depends! – Divergency

Yes, the work is sometimes worth to do it. But at the end, the css is inside the html and that means, that is loaded every time and for every single request without caching. – Revisionist

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.

Coloring

Well, the answer is relative to js files. My issue comes from a css file. – Stanhope

This is not an answer to the asked question. Currently there is no standard css async attribute. – Trouble

The question is related to CSS only. – Slave

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>

Traprock

This works but with some weird costs as it will produce an ugly page refresh (~100ms) once the css is loaded. – Financial

Also, Google is unable to even recognize it. Seems google pagespeed likes the whole "<link rel="stylesheet" href="css/home.css" lazyload>" method. Using the above, it keeps telling me to do whatever. In fact, even using what I am using, they keep telling to remove rending blocking blah, blah blah. No matter what, this method, loadCSS method any method other than what we have learned to be standard, has slight non-styled pages on refresh. FireFox atleast, saw it in Chrome as well. Many suggestion Google suggest make no sense at all. Other times, yes, they are helpful. But rarely. – Sepulchral

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.

Coloring

u can convert all your css code file into one file then google suggest you only one file renderblocking. Actually, this is what I'm doing. otherwise if you are working with wordpress project you can use various plugins for your site like eliminate render blocking css and js. I'm not working with WP. if you want to completely render remove render blocking then you can put all you css code into head section , works pref. I know, but I don't find it useful, since it would be less scalable and hard to maintain. – Stanhope

Answer 5

Eliminate external render-blocking

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

Dermott