Once the browser starts receiving the response of a HTTP request it starts processing its content. As it encounters links to resources it will begin downloading them. However when it encounters CSS stylesheets it’s going to wait to download the file and finish processing it before rendering anything. That means that if the CSS file is large and takes time to download and process, the user will be waiting with nothing to see on the page.

The are various techniques to improve this like using media queries for CSS files since the browser will first check the media query and see if the file applies to the screen size or specific media like screen or print before deciding if it should stop rendering. It will still download the file but it won’t block rendering.

My favorite combination for getting around this is having what’s called critical CSS inserted directly into the head of the file and the link the CSS file with a media attribute value of print so that it does download but does not block rendering. On top of that the CSS link should have an onload handler that swaps the media attribute’s value to “all” so that when the file has finished downloading it will be applied to the page.

The role of critical CSS is to prevent the user from seeing an unstyled page. Therefore this CSS should be the minimal lines that apply only to the content the user first sees when opening a page.

And of course, as a general rule keeping your CSS files shorter and the actual CSS rules simpler goes a long way. The more CSS you have the more it takes to download and process it. And the more complex the rules are the more time it takes to apply them.

Next: Javascript blocks parsing by default but there’s way to fix it.