Optimize Your Site by Including Google's JQuery Library

I just finished a small overhaul of the twentyten theme, using my child theme.  Just a few things I wanted changed to start with.  So the next articles I write will cover all of that.  How to do some real basic customizing.  We’ll change the header size, add a background to widgets, widen the theme, etc.  But the first thing I did, which is something I always do with my themes is to boot WordPress’ JQuery library in favour of Google’s.  Here’s the how and why.

There’s a couple of good reasons to use Google’s jquery library rather than the one that ships with WordPress.  The first is that it will be the most up to date.  Jquery may update between WordPress releases, and you’d have to wait until a WordPress update comes out to get the next version.  Another good reason is optimization.  A browser can only load so many things from one server at a time.  They download in batches, and you already have your css, javascript, images, etc coming from your own server.  Files from other servers can be downloaded at the same time though.  So it’s a great idea to download from another source when possible.  And Google has big giant pipes for you to take advantage of!

One important thing to consider, WordPress is tested with the version of jquery it ships with. So running the most up to date Google version may potentially affect your site. It’s never affected me, but something you need to consider. If it were to affect your site you could simply delete/comment out the code here.

So let’s take a look, the method is real simple.  All we need to do is unregister WordPress’ Jquery, and register Google’s.  How you do this depends on your theme really.  I am using my own twentyten child theme.  I had a choice to make, and you may too.  Do you want to put this directly in the header, or in functions.php?  I had already copied twentyten’s header.php to my child theme to use.  Reason being, I was making heavy mods to the header which are beyond the scope of functions and hooks in twentyten.  So if you plan to heavily tweak the header, you may be best copying it to your child theme.  If not, don’t bother.  Leave header.php in the twentyten parent theme and just drop some code in functions.php.  We’ll cover both now.

First off, the basic code.  This would go into your header.php.  I put it directly above the


<?php wp_head(); ?>

call.  If you don’t have that in your theme, you have bigger issues, as it is vital.  Check out the info on that.  The code looks like this:


<?php
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script('jquery');
?>

That’s it really.  That’ll deregister WordPress’ jquery and start using Google’s.  But what if you don’t want to use header.php in your own theme.  That’s ok.  You may remember this article from a while back, about adding in your own favicon through a hook.  Well, use the same hook.  If you already have it in place for your favicon, just add the above code to it, if not here’s how it would look.


//ADDS FAVICON TO HEADER
function voodoo_childtheme_headcode() {
     wp_deregister_script('jquery');
     wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
     wp_enqueue_script('jquery'); ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico" type="image/x-icon" />
<?php }
add_action('wp_head', 'voodoo_childtheme_headcode', 5);

You’ll notice on this add_action, we added a priority number to it of 5. Default priority is 10. I had to add this in there to make the code work properly from functions.php. At default priority, WordPress’ jquery was still loading.

Pretty simple right?  And that’s your first step on the road to optimizing WordPress.

5 Replies to “Optimize Your Site by Including Google's JQuery Library”

    1. Sure, just remember that every now and then doing this can cause a conflict. If you notice strange symptoms of a conflict (like your admin screen or post edit screen not behaving properly) something is screwy

    1. Thanks for posting that! I had meant to revisit this a while ago, and completely forgot! While working on a theme, I had stumbled across a similar technique to ensure we always get jQuery loaded, even if you are working on a localhost version with no connection or whatever. It’s definitely good to have a fallback!

  1. Using ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ results in your code always pulling the latest jQuery version, it would be better to advise users to specify the version of jQuery they intend on using by altering the /1/ to /1.x.x/ or at least to a major revision number like /1.9/

Leave a Reply