Render blocking and parallel downloading of scripts

Browsers can download a limited amount of Javascript and CSS files in at the same time. There are also some common issues which prevent your files from downloading in parallel. Render blocking occurs when a browser is unable to continue rendering a page either because it's parallel download limit has been reached, or scripts have been blocked from downloading in parallel. 

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

Combine your external Javascript and CSS files. This will reduce the amount of files that need to be downloaded. In Drupal this can be achieved by enabling the standard Javascript and CSS aggregation and compression performance settings.

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).

Other considerations

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.
  • Move javascript files to bottom of page. 
    If your JS is in the footer rather than in the <head>, it will ensure that your content renders before blocking can happen.  See this post about moving your javascript files to the footer.
Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +9 years.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.