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 Highlighter, Google Custom Search & Modernizr 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 LABjs & HeadJS 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."