how move javascript to bottom footer in drupal

for performance issue in drupal

how move javascript to bottom footer in tpl file??



In your theme's page.tpl.php, move the print $scripts; line to the footer. Some modules' JS code doesn't like this, but I've had it work with most.


I just answered a similar question on Drupal Answers:

I'm copy pasting the answer below for quick reference.

Also, I'm not sure if the question should be migrated to Drupal Answers or merged or else so if anyone has an idea please execute this or advise on how to do it. Thanks.

Found this excellent code snippet for Drupal 7:

It offers a way to have $script and $head_scripts so that you can specify which JS files need to go in the head. Example, Modernizr should go into the head scripts.

I'm copy pasting below the solution in the link to future proof the answer.



<!DOCTYPE html>
<html<?php print $html_attributes; ?>>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $head_scripts; ?>

<body<?php print $body_attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $scripts; ?>
<?php print $page_bottom; ?>


// Used in conjunction with

* Implements hook_preprocess_html().
function THEMENAME_preprocess_html(&$vars) {
// Move JS files "$scripts" to page bottom for perfs/logic.
// Add JS files that *needs* to be loaded in the head in a new "$head_scripts" scope.
// For instance the Modernizr lib.
$path = drupal_get_path('theme', 'THEMENAME');
drupal_add_js($path . '/js/modernizr.min.js', array('scope' => 'head_scripts', 'weight' => -1, 'preprocess' => FALSE));

* Implements hook_process_html().
function THEMENAME_process_html(&$vars) {
$vars['head_scripts'] = drupal_get_js('head_scripts');

The fastest way to move all Drupal's JS to the footer is by moving $scripts just before the closing body tag AND before $closure.

Within the Drupal 6 core there is no option oder interface which you can easily check. But under admin/settings/performance there are an option to compress JS Files. Recommended for production use.

To put your JS Files to the bottom go to your page.tpl.php file and look for <?php print $scripts;?> or something similar. Then look for $closure; and change it:

    <!-- other theme code above -->
    <?php print $scripts; ?>
    <?php print $closure; ?>

I think this should move over to

Where there is a duplicate discussion.


I've found that moving

print $scripts
at the bottom rarely works. Most of the time, you would need a solution that allows to keep some of the scripts in the header, whilst others can be moved in the footer.

Personally, I use drupal_add_js in template.php taking advantage of the scope option.

From Drupal docs:

scope: The location in which you want to place the script.
Possible values are 'header' or 'footer'.
If your theme implements different regions, you can also use these.
Defaults to 'header'.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.