Use Google’s JavaScript Libraries in WordPress

Posted on July 2nd, 2011

Did you know that Google hosts quite a few JavaScript libraries that you can use? Standard WordPress installations do not make use of this while the big and popular script libraries like jQuery, jQuery UI, MooTools and Prototype are all covered. I recommend you to start using Google Libraries on your WordPress installation cause you can benefit in a few different ways..

Benefits of Google hosting your script library.

Let’s dive right in and start with pointing out the benefits of using Google’s Libraries API. If you don’t care about the benefits at all you could skip to using Google Libraries on your WordPress blog right away.

  • Saves your website bandwidth.
  • HUGE chance that the library is in your visitor’s cache already.
  • Google’s servers are set up to negotiate HTTP compression with the requesting browser
  • Google’s servers are FAST, probably faster then yours.
  • Most compressed/minified versions are available, saving even more KB’s.

Let’s take a closer look at the second benefit from the above list cause in my opinion this is the most important benefit. Google sets the cache expire date for their library scripts to 1 year! A lot of sites are already using Google Libraries to host their scripts, so think about how big this makes the chance that the script library you’re using on your website is already in the visitor’s cache.

For example, when using jQuery UI which is a fairly big library (even compressed it’s 189kb) this saves the visitors 189kb of downloading time! Whoa.. Definetly worth the trouble, right? Well, let’s start on how to start using these libraries then!

Using Google Libraries on your WordPress blog.

There are a few different ways for you to use Google Libraries API. You can pick the hard and easy way here, where the hard way gives you a tiny bit more control. Nevertheless, let’s start with the easy way..

Use Google Libraries, a WordPress plugin from Jason Penney

This plugin makes it as easy as it can be for you. It does what it says, use google libraries. Read more about it or download from the WordPress plugin repository: Use Google Libraries.

Manually register script path inside your functions.php

If you’re the type of person that rather does things manually (like me) you can also register the new location to get your JavaScript library from by adding a few lines to your functions.php. Let’s say you’re using the jQuery library and want to load it from Google Libraries instead of the jQuery that comes with WordPress.

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery',  'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', false, '1.6.1');
wp_enqueue_script('jquery');
}

What this little function inside your functions.php does is deregistering the custom jQuery script path that comes with WordPress, registering the new (google libraries) path and enqueues it for you (this line is thus optional). Note that the jQuery that’s used in the admin panel isn’t touched at all cause of the conditional is_admin(). This is to keep things working smoothly in the WordPress backend.

Optionally you could add a fifth parameter to wp_register_script(), the boolean true. This loads the script in the footer instead of the header. Whole different story but thought I’d mention it since we’re on the subject anyway.

For a full list of available script libraries that are hosted on Google, head over to Google Libraries API.