Google Page Speed still giving render blocking issue even after loading resources async

Question

Google Page Speed Insights

"Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML."

The above issue is prompting me for my 2 stylesheets. So I load my stylesheets with the below code to defer the loading of the stylesheets.

window.onload = loadResource;

function loadResource(){
    css_array=[resource1,resource2];
    css_init(css_array);
}

function css_init(hrefPath){
    for(a = 0; a < hrefPath.length; a++){
        link=document.createElement('link');
        link.href=hrefPath[a];
        link.rel='stylesheet';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
}

with the above code all the css stylesheets are loaded after the DOMContentLoaded Event and Load Event has been fired (Network tab of chrome dev tools)

But even with the above the render blocking issue is still unfixed. Any idea why it didn't work and how to properly defer css stylesheets? thanks for the help!

Answer 1

This is a slightly complex issue. Take a look at these (read the comments, too):

• http://mattgadient.com/2012/12/24/css-blocking-wordpress-and-w3tc-how-to-get-parallel-downloads/
• http://blog.yoav.ws/2011/10/Unblocking-blocking-stylesheets
• http://www.guypo.com/technical/eliminating-the-css-bottleneck/

Also, you could give head.js a try: http://headjs.com/

Do you have a good reason to load the CSS like this?

• http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

Answer 2

I think you might be headed the wrong direction, loading your CSS after the DOM is ready is usually not a recommend practice. Here is a link to the HTML spec for inserting CSS http://www.w3.org/TR/html5-author/the-link-element.html#the-link-element , most browser are going to optimized for CSS being placed in the head of the document.

If you are trying to optimize for speed you might consider moving your styles into one minified style sheet instead of make two asynchronous request via JavaScript. If you need the two style sheets to be keep septate and are worried about the performance implications you could consider move some of the CSS inline.

Here is a link to a must read article written by Yahoo Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html#css_top So I guess in short the answer to your question ( general rule of thumb except for edge cases) would be optimize your page by loading one CSS at the top of your page. Even if you could manage to get your CSS to download faster using JavaScript to load it. I think you would find out that you would be spending more time in paint and style calculations (page rendering). Not to mention what happens if some one has JavaScript turned off

If your are still looking for more performance you could look at CDN or create your own CDN from cookie-less sub domain.