Keith Clark on Loading CSS Without Blocking Render

An interesting post outlining a method of loading CSS asynchronously without render blocking by Keith Clark is worth taking a look at. His post, “Loading CSS without blocking render” uses asynchronous downloading of CSS stylesheets.

load-css-without-render-blocking

The post states:

This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render.

The blog post and the solution he outlines is fluid in that he’s received much feedback on a number of platforms and browsers this method doesn’t work on. He posts a warning:

Warning! I posted this with the best of intentions, but it would be irresponsible not to make readers aware of the following issues. Community feedback is coming in thick and fast (something I’m very grateful for) and it’s becoming apparent that this technique isn’t as robust as I’d hoped. Despite my testing and using it successfully in my own work, many developers are seeing issues in IE and Firefox (apparently crashing FF beta) while others are reporting success in Chrome and Safari. My advice right now is: DON’T use this in production. I am planning to digest the feedback and will update this post with any relevant information.

Regardless, it’s well worth the read and should be worth keeping tabs on. It’s good to see that he eats his own dog food, because the Google PageSpeed Insights score for Desktop and Mobile is 98/100 and 95/100 respectively, which is better than anything I’ve ever been able to reach.

We’ll keep watching this post, and encourage you to read, Loading CSS without blocking render.

Post written by Ed Reckers

Founder and lead web development consultant at Red Bridge Internet : San Francisco WordPress Developers and Consultants.

Leave a Reply