Move render-blocking Javascript to bottom of page

By default Drupal loads javascript at the top of a page - in the site <head>. The problem is browsers can only download a limited amount of javascript files in parallel, and this can block the loading of the page content. Performance analysis tools like YSlow and Google PageSpeed Insights often flag 'javascript render-blocking' as a serious issue.

A simple solution is to just move the rendering of your javascripts from the page head to the foot. Be aware that this can cause problems so should be tested before being deployed to a live site. Generally problems arise if you have modules that add elements to the content not via the Javascript API - something Syntax HighlighterGoogle Custom SearchModernizr modules apparently do. Also moving your JQuery library to the footer can also cause problems if there is inline jQuery code in your content.

The below solution details moving the scripts to the bottom of your page template.
If you don't want to move your script files to the footer see this post on other ways to avoiding render-blocking.

Moving Javascripts in Drupal 7

Move <?php $scripts ?> to the bottom of your html.tpl.php file, just before <?php print $page_bottom; ?> and the closing </body> tag.

    <?php print $scripts; ?>
    <?php print $page_bottom; ?>
    </body>
</html>

Moving Javascripts in Drupal 6

Move <?php $scripts ?> to the bottom of your page.tpl.php file, just before <?php print $closure ?> and the closing </body> tag.

    <?php print $scripts; ?>
    <?php print $closure; ?>
    </body>
</html>

Modules to move Javascript to footer

The Advanced CSS/JS Aggregation modules 'Modifier submodule' can be used to move JS to the footer, add defer tags to all JS, inline JS for given paths and remove unused Javascript tags. In addition to this it claims a host of other performance improvements related to your sites JS & CSS. I've not actually used the module (yet), but as of writing it seems to be actively maintained and in use by 4000+ sites.

Modules for Javascript parallel loading

Something else worth checking out to improve loading Javascripts in parallel are the LABjsHeadJS modules. LABjs is probably the better module to use as it's under active development and is used by sites like Twitter and Vimeo.

To quote the LABjs project page:
"Once installed, this module looks for all your JavaScript and LABjsify them automatically. All JavaScript files are loaded in parallel as maximum as browser supports. The other advantage is that script loading does not block page render."

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

Submitted by subhojit777 on

Thanks for sharing :)

Submitted by Aniket Mohite on

This worked like a charm. Exactly what I was looking for.

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.