CODEWITHSUNDEEP
javascriptperformancedrupalfooter
Atef Badran
Atef Badran

Reputation: 111

how move javascript to bottom footer in drupal

for performance issue in drupal

how move javascript to bottom footer in tpl file??

Upvotes: 4

Views: 8962

Answers (5)

PatrickS
PatrickS

Reputation: 9572

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

Upvotes: 0

Mike Gifford
Mike Gifford

Reputation: 661

I think this should move over to https://drupal.stackexchange.com/questions/3171/add-javascript-at-the-bottom-of-a-page/101025#101025

Where there is a duplicate discussion.

Upvotes: 0

Mario Awad
Mario Awad

Reputation: 1439

I just answered a similar question on Drupal Answers: https://drupal.stackexchange.com/questions/46202/move-aggregated-js-file-to-the-footer/89590#89590

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: https://gist.github.com/pascalduez/1418121

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.

Cheers.

html.tpl.php

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

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

template.php 

// Used in conjunction with https://gist.github.com/1417914

/**
* 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');
}

Upvotes: 4

gearsdigital
gearsdigital

Reputation: 14205

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; ?>
    </body> 
</html>

Upvotes: 0

ceejayoz
ceejayoz

Reputation: 180023

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.

http://groups.drupal.org/node/8399

Upvotes: 4

Related Questions