Dave Hall Consulting logo

Kicking Javascript to the Footer in Drupal 8?

As a platform, Drupal has excellent javascript support. Drupal 7 will ship with jQuery 1.4.2 and jQuery UI 1.8, which will make it even easier to build rich user interactions with Drupal.

Drupal supports aggregating javascript files to reduce the number of network connections a browser must open to load a page. It is common practice for Drupal themes to put the <script> tag in the <head> section of the page. Unfortunately this has a performance impact, as all browsers will stop processing the page and start loading and processing the referenced javascript file. For this reason, both Yahoo! and Microsoft recommend placing all javascript just before the closing </body> tag in a page so it is loaded and processed after the content.

Making this change in Drupal is a pretty straight forward process. It is already possible to do this in Drupal 6 or 7. My site places the $scripts variable at the end of the page. Unfortunately some modules rely on javascript being in the <head>er, and some even place <script>s in the body to allow inline function calls.

It is too late to implement this change in Drupal 7, but the transition can occur now. Documentation can be updated to inform theme developers that they can place the $script variable at the end of the page, just above where the $closure variable is placed. The module development guide can be updated to strongly recommend against relying on the value 'header' for the 'scope' element of the $options array for drupal_add_js() meaning that the javascript will end up in the header and to not place any inline javascript code in themes or modules. In Drupal 8 the scope element for the $options array can be dropped.

If theme and module developers adopt this best practice approach for their Drupal 7 releases there should be minimal transition work for this change in the version 8 release cycle.

I am hoping to discuss this at the Core Developers Summit at DrupalCon Copenhagen later this month.

I don't like moving all

Pelle Wessman wrote:

I don't like moving all scripts to the footer - just changing the default placing of scripts from header to footer would be enough and adding Drupal.js and jQuery in the footer if no head scripts has been added.

It would also be nice if Drupal.js and jQuery was skipped completely if no scripts are depending on them.

Added Sun, 2010-08-08 23:52

It would be wrong to eliminate header javascript

merlinofchaos wrote:

Making it impossible to have javascript in the header as it is now would be simply wrong. Moving most javascript to the header makes some sense, but we must be cautious in doing so.

Added Mon, 2010-08-09 01:43

jquery

whatdoesitwant wrote:

That approach would work if it would be extended to illegalizing the inline placement of embedded objects like flash, silverlight, images and html5's video.

Below, when I say content I mean text.

The prefered load order is: css - dom - content - js - embedded junk. This is only possible if you control how the embedded junk is handled. Otherwise, the real life load order could become: css - dom - content - embedded junk - js. Your users will slam their sliverlight, flash, video's and other junk right into the middle of the page instead of adding these at the end of the markup or through scripts, if that is not handled really well by the theme layer and wysiwyg, leaving you with a crippled page while waiting for the js to load. In cases where embedded junk can be loaded in front of js in a live site I think some exceptions must be made. Therefore, I think that the practical load order is: css - dom controlling js - dom - content - js - embedded junk, allowing for the possibility of: css - dom controlling js - dom - content - embedded junk - js.

That said, a way to make your approach work while handling the risk of other embedded objects being brought in first , is to add jquery from a seperate subdomain path. But not everyone knows how to set this up and you'd have to make sure that that subdomain path is never used for other embedded stuff.

Added Mon, 2010-08-09 02:15

Drupal.org issue

Scott Reynen wrote:

There's an open issue about this on Drupal.org, still under D7, discussing some of the same complexity suggested in the comments here.

Added Mon, 2010-08-09 03:13

Drupal.org issue

Scott Reynen wrote:

There's an open issue on Drupal.org about this, discussing some of the complexity mentioned in the comments here.

Added Mon, 2010-08-09 03:15

It's not that simple

Corbacho wrote:

I say yes to "footer" as the default scope.

But why to remove the option? There is times that you need to load the javascript in the . Have a look to these comments:

http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html

And there are even alternative higher performance techniques to load the javascript files wihtout interrupting the html rendering: http://www.artzstudio.com/2008/07/beating-blocking-javascript-asynchrono...

Added Mon, 2010-08-09 03:41

I am new to this and I am

Armando wrote:

I am new to this and I am still figuring it out now. Reading this article and comments can be a big help to me.

Added Thu, 2011-06-16 22:58