I'm not going to go into too much detail about the how and why this happens. Below is a quick check list to ensure your sites don't experience render blocking problems. See the links at the bottom if you're interested in detailed explanations.
Fewer requests the better
Correct order of external CSS & JS scripts
Put CSS files before the JS files. Browsers delay rendering of content that appears after a script tag until that script has been downloaded and executed.
Don't include CSS with @import
CSS files included with @import won't render in parallel, rather use the <link> tag.
Wrong way using @import
<style> @import url("stylesheet1.css"); @import url("stylesheet2.css"); </style>
Right way using <link>
<link rel="stylesheet" href="stylesheet1.css"> <link rel="stylesheet" href="stylesheet2.css">
Parallel script loaders & Drupal modules
There are various script loaders out there which will try to load and execute all scripts in parallel, as fast as your browser allows. Popular script loaders include LABjs, YepNope, HeadJS. There are Drupal modules available for these.
Other Drupal modules worth looking into are the Advanced CSS/JS Aggregation (AdvAgg) and CDN module. It's worth noting that the CDN module replaces the obsolete Parallel CSS - AdvAgg Plugin which claims to offer parallel CSS downloads (not tried it yet myself).
These points also relate to loading scripts:
- Make sure your sites use cache headers.
This will make sure that files are cached client side by the browser, and avoid common files from being loaded on each page request.