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/