load jQuery in functions or footer

**curtismchale** · 02-25-2010, 11:11 PM

I was working on my base theme recently and realized that I was breaking a major rule in site opitmization, I was loading my jQuery in the header which is bad. I've actually been using the method described by Chris and Jeff here: http://digwp.com/2009/06/use-google-...the-right-way/

I was headed to change it and was wondering what the benefits/detriments are to loading the JS out of the functions file or just put the call to Google libraries in the footer? Anyone have knowledge/thoughts?

**Ryan** · 02-25-2010, 11:51 PM

You should always load your scripts via the enqueue method (ie: as Chris Coyier suggested) because it allows other plugins to modify the hook content when they need to and allows them to know if jQuery etc. are loaded already or not.

You can load scripts in the footer via wp_enqueue too as of WordPress 2.8 ... http://lesterchan.net/wordpress/2009...-wordpress-28/

There are good reasons to load the JavaScript in the header some times though, particularly for mission critical things which need to load early on during the page load process.

**Ryan** · 02-25-2010, 11:53 PM

This sort of thing is not uncommon to see in the footer of a page to trigger the Suckerfish script to allow hover menus to work in IE6:

Code:

<script type="text/javascript" src="http://domain.com/suckerfish_ie.js"></script>

That tends to be infuriating as it means that the menu is totally useless until the entire page and it's content, scripts etc. have loaded. So fundamentally important scripts like that need to go at the top between your <head> tags (and in this particular case, inside IE7 conditional comments too).

**Rarst** · 02-26-2010, 12:16 AM

I was just setting up scripts in new theme on development stack. Highly useful tutorial on topic by scribu.

Current version:

PHP Code:

 add_action('init', 'restatement_jquery_register');

add_action('wp_footer', 'restatement_footer_scripts');

 
function restatement_jquery_register() {

    if (!is_admin()){

        wp_deregister_script('jquery');

        wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2',true);

    }

}

 
function restatement_footer_scripts() {

    if (!is_admin()){

        $js='/js/restatement.js';

        wp_register_script('restatement', get_stylesheet_directory_uri().$js,array('jquery'),filemtime(STYLESHEETPATH.$js),true);

        wp_print_scripts('restatement');

    }

}

In init hook I change jquery definition from WP-bundled to Google CDN. Also last parameter tells it to load jquery in the footer, unless other script demands it earlier.

In footer I enqueue my theme's script (or more), version it with file modification time and set dependency on jquery. Since I output it explicitly I can also override this somewhere in the page if needed (regular way enqueues scripts much earlier).

Result in footer:

Code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/restatement/js/restatement.js?ver=1266935793'></script>

Only thing I hadn't figured out is how to prevent WP from putting version tag on jquery from Google - it is harmful in that case.

PS might also need to tweak priority on hooking jquery register so it is fired early enough

**Otto** · 02-26-2010, 10:09 AM

My personal feelings on the topic:

- Loading library scripts in the footer is overrated. Put your script in the header and trust in the power of the cache.

- Don't add special code to screw with scripts like this. Just do simple, normal enqueues and be done with it.

- If you want to use Google hosted libraries, use the plugin that does it for you in the right way. Unlike the ways mentioned above, this:
a) works over the whole site (admin too)
b) it works correctly (without the version tagging),
c) it handles issues like the noConflict mode properly, and
d) it doesn't make your plugin all complicated to where it will interfere with other plugins.

Rolling your own code to do this in a half-assed way is A Bad Idea (tm). Separate the workload off into specialized pieces designed specifically to handle the task properly. You get maximum benefit this way.

**curtismchale** · 02-26-2010, 12:23 PM

@Otto

I really think that the JS library is theme dependant and I shouldn't be relying on a plugin. What if the user doesn't install it?

As for loading scripts in the footer vs header I think that there is lots of research out there that shows the footer is the way to go. Each script file loaded in the header blocks all other downloads so you're not using the mutli-threaded downloading that browsers are capable of. Sure most small sites will see very little benefit in footer vs header but the right way is the right way.

@Ryan

Yeah I knew that enqueue should be used I was wondering if anyone had info on whether loading it out of the functions file or in the footter with enqueue was a faster way to do it. Guess I'll run my own speed tests on it at some point.

I'm on board with loading JS conditionally for IE if needed for sure. I've not encountered any other time that JS could in any fashion be considered 'mission critical.' JS should just be the extra functionality on the site. It should still function without JS at all so I don't see how it could be mission criticial (outside IE as mentioned).

@Rarst

Thanks for the code I'll take a dig through it later today. Why is the version tag harmful in the JS? Are we just worried about hackers knowing which version or will plugins be looking for a specific version?

**Otto** · 02-26-2010, 12:54 PM