Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress
Download & Installation
The documentation and download are available on the Use Google Libraries page in the WordPress plugin directory.
The Basics
A number of the javascript libraries distributed with WordPress are also
hosted on Google’s AJAX Libraries API.
This plugin allows your WordPress site to use the content distribution
network side of Google’s AJAX Library API, rather than serving these files from your WordPress install directly.
This provides numerous potential performance benefits:
- increases the chance that a user already has these files cached
- takes load off your server
- uses compressed versions of the libraries (where available)
- Google’s servers are set up to negotiate HTTP compression with the requesting browser
For a more detailed look see Dave Ward’s 3 reasons why you should let Google host jQuery for you
Supported Libraries and Components
Try it out, and please rate it.. If you have any problems or suggestions leave a comment. I’ll do my best to respond. Feel free to leave a tip if you find it helpful.
68 Responses to “Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress”
Leave a Reply
Additional comments powered by BackType
Entries,![[RSS: Posts]](http://jasonpenney.net/wp-includes/images/rss.png)
![[E-Mail: Postsl]](http://jasonpenney.net/wp-content/images/email-icon-16x16.png){kind=icon}
The Dead Zone
On Writing
The Complete Peanuts 1950-1952 (Vol. 1)
Contagious
Paddington Goes to Town (Paddington Bear Adventures)
![[twitter]](http://jasonpenney.net/wp-content/images/icons/twitter-favicon.png "[twitter]"){kind=icon}
Letter from insurance: oops! We accidentally paid for your kids inhaler. Sorry! We won't do it again. We promise!![[bookmarks]](http://jasonpenney.net/wp-content/images/icons/bookmarks-favicon.png "[bookmarks]"){kind=icon}
Modernizr![[comments]](http://jasonpenney.net/wp-content/images/icons/comments-favicon.png "[comments]"){kind=icon}
Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress (All the Billion Other Moments)
November 27th, 2008 at 10:44 am
Hi Jason,
Nice work on this plugin. I never got round to updating my plugin to handle the various sub-libraries, and now you’ve done the hard work for me :) I’ll point everyone to your plugin in the future.
Regards,
John.
November 28th, 2008 at 11:00 am
@John Blackbourn – Thanks for the kind words (and for releasing your plugin under the GPL)!
January 4th, 2009 at 10:59 pm
Jason,
I was thinking to myself the other day if this would be possible, luckily before I tried writing it myself I did a search and saw it’d already been done.
Unfortunately I can’t seem to get it to work and I’m not sure why. I cleared out my cache and refreshed the page just to make sure, but every time it’s pulling from the WordPress directory and not Google. I even switched off the K2 “theme” just to make sure that wasn’t causing a conflict.
I’m using WP 2.7.
Any ideas?
Thanks.
January 7th, 2009 at 10:33 am
@malcalevak – Sorry for the delay in reply. I can’t think of any reason why it wouldn’t be working for you. Are you using wp-cache or wp-super-cache? You didn’t leave a link so I can’t check which of the supported libraries are being loaded on your site, but I’d be glad to help you figure it out.
January 8th, 2009 at 9:11 am
@Jason Penney – Jason, Thanks for getting back to me. I thought I’d left a link, but it seems I was mistaken. I’ve attached one now.
I’ve attempted to use wp-cache and wp-super-cache, but wasn’t actually able to get them to work right, so I turned them off, and they were not on when I actually reported the problem.
Would it be possible that the K2 theme (which uses jQuery) is somehow overriding what’s being done by the plugin? (This seems doubtful, but worth mentioning).
January 9th, 2009 at 7:10 am
@malcalevak – I took a quick look through K2’s source, and I think you might be on to something. If I’m reading it correctly K2 will call wp_register_script on jQuery some time after wp_default_scripts fires.
This is the expected behavior of my plugin, because I wanted to be sure that if a theme or other plugin was re-registering one of the default scripts for a good reason (like they came with a customized version, etc) my plugin would gracefully step out of the way.
You could try going into [k2-theme-dir]/app/classes/k2.php and comment out the following lines in register_scripts() (starting on line 198 in K2 1.0rc7):
January 12th, 2009 at 8:21 am
@Jason Penney – Jason, I tried as you suggested, but sadly no luck. Any other ideas would be welcome. Thanks.
January 23rd, 2009 at 12:55 am
Hello,
Thanks for the plugin, could I make a couple of suggestions:
1) Revert to using the micro version, say jquery 1.2.6, as the google servers will instruct browsers to cache for 12 months, using 1.2 the cache is set to 1 hour.
2) check if the wordpress site is being loaded over SSL and load the library over SSL if reqd, a simple way to do this could be to change
if ($lib != '') {// build new URL
$script->src = "http://ajax.googleapis.com/ajax/libs/$lib/$ver/$js.js";
} else {
to
if ((isset($_SERVER['HTTPS'])) AND ($_SERVER['HTTPS'] != '') AND ($_SERVER['HTTPS'] != 'off')) {
//use ssl
$gP = 'https://';
} else {
//dont use ssl
$gP = 'http://';
}
if ($lib != '') {
// build new URL
$script->src = $gP . "ajax.googleapis.com/ajax/libs/$lib/$ver/$js.js";
} else {
January 25th, 2009 at 10:31 am
@malcalevak – I’m out of ideas at the moment. My plugin is doing what I expect (letting K2 override jQuery to it’s own version), although I’m not sure it needs to be.
@Peter Wilson – Thank you very much for the suggestions. I’ll try and get those worked into the next update. I’ll probably make the micro version an option, and add an explanation of why you would want to include it.
January 29th, 2009 at 1:11 am
I’ve been working on an upcoming blog project and in testing your plugin I’ve failed to see any result of having it installed. I’m currently using a number of plugins which make .js calls in the header, such as Lightbox 2. When I run a test using YSlow, I see that all of the original, local .js versions are still being reference in the code…rather than linking to those hosted by Google. I’ve re-read the Installation instructions, FAQ and Other Notes and can’t imagine that I’ve done anything wrong…it’s installed and activated. Am I missing something here?
Thanks in advance,
CR
January 29th, 2009 at 6:53 am
@CR – My initial guess is that these other plugins are not using the Wordpress API to include their scripts, but are injecting them into the header directly. Without more to go on it’s a bit tricky, but if you leave links to the plugins you’re using I’ll take a peek.
February 2nd, 2009 at 10:25 am
Jason, I just wanted to point out that K2 doesn’t override the WordPress jQuery at all. As can be seen on the site I provided, which is running the nightly revision 743 of K2, it is using the WP provided copies of jQuery, and only running it’s own copies of scripts not included with WP. It has register calls for all the scripts, but WP apparently ignores them if they’re already registered. I don’t know if that will help diagnose the issue or not.
February 5th, 2009 at 8:18 pm
Hey, Jason great to have found you.
I am wondering how I can use this plugin in conjunction with the various plugins I’ve recently made. They all use mootools, and I have had trouble getting the register and enqueue script functions to work. So for now I’m loading into head. I guess my question is , will this plugin pull the mootools from mootools.org, or google? Well, I’ll see if I can get the enqueue working for me, then do some testing. Thanx for the plugin and great idea.
February 7th, 2009 at 4:10 pm
@twincascos – What issues are you having with enqueue? All you should need to do is
wp_enqueue_script('mootools')February 7th, 2009 at 5:37 pm
Sounds easy doesn’t it? But actually, First I have to register the script in my init function.
wp_register_script('moocore',
path_join( WP_PLUGIN_DIR, basename( dirname( __FILE__ ) ) . '/js/mootools-1.2.1-core.js' ),NULL, '1.2.1');
wp_register_script(
'moomore',
path_join( WP_PLUGIN_DIR, basename( dirname( __FILE__ ) ) . '/js/mootools-1.2-more.js' ), array( 'moocore' ), '1.2');
Then I register the action which would load the script:
add_action('wp_print_scripts', array(&$this,'add_javascript'),3);And now I can enqueue the script:
wp_enqueue_script('moocore');wp_enqueue_script('moomore');
Wow, this finally works for me. now to test it out with more than one plugin.
And to see if your google library plugin works with mootools base then the more libs.
March 13th, 2009 at 9:13 am
It is showing some errors while installation. As the download completes there shows a box, it was written over there that “downloading process is under construction currently. The plugin doesn’t support the version.”, I just don’t understand what kindda msg it was. Need assistance.
March 17th, 2009 at 10:56 am
can I ask for an honest answer? does it really matter if I use this plugin or the other one which seems to offer similar functionality? http://blog.clearskys.net/2008/05/28/google-ajax-libraries-api-plugin/
March 18th, 2009 at 9:52 pm
@gammon team – I’m not sure what you’re talking about, but if you provide more details about what it is you’re doing, I’ll try and help.
@ovidiu – The two plugins are pretty similar. At the end of the day use what works best for you.
I can’t say any of those would be a good reason to switch if you’re using the other one and it works for you. Good luck!
March 19th, 2009 at 5:57 am
Hi, how can I select which version of jQuery is loaded with this plugin?… No mather what I do, it always load version 1.2 …
March 19th, 2009 at 7:02 am
@Joao Amado – Currently if you ask for any 1.2.x it will load the latest 1.2 (which is 1.2.6). If you ask for 1.3.x it will load 1.3.2, etc. I’ll be changing it to load the exact version requested, as Google has the exact versions set up to cache longer.
March 19th, 2009 at 7:05 am
@Jason Penney – Ok! But how can I ask to load 1.3.x? I’ve tried to do so on enqueing or registering jQuery, but to no success… most probably it’s something I’m doing wrong.
March 19th, 2009 at 7:50 am
@Joao Amado – Ah, I see. In this case my plugin doesn’t really enter into it, because you want to replace one of the default script registrations. This should do it:
wp_deregister_script('jquery');wp_register_script('jquery',
'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
'1.3.2');
March 19th, 2009 at 7:56 am
@Jason Penney – Thank you very much for the help! :)
March 25th, 2009 at 4:46 am
Hi Jason
Great plugin – got it installed.
However, my knowledge of JS and so on is nil – how can I tell if this plugin is working. I’ve run some elementary speed tests and I believe I saw a marginal improvement in the speed of serving JS but I would like a little more definitive proof – this is just a learning curve thing for me.
Many thanks and keep up the excellent work!
Bill
March 30th, 2009 at 5:43 am
@Jason Penney -
It’s been a while since I last contacted you, but am back to try and figure out why A) my site is calling 17 external .js files that should be covered by your plugin and B) which other plugins I’m currently using that are not utilizing the proper code to take advantage of your plugin.
I’ve isolated “Flexi Quote Rotator” as one possible culprit. It uses the following:
echo "<script src=\"" . get_settings('siteurl') . "/wp-includes/js/scriptaculous/prototype.js\" type=\"text/javascript\"></script>\n";echo "<script src=\"" . get_settings('siteurl') . "/wp-includes/js/scriptaculous/scriptaculous.js\" type=\"text/javascript\"></script>\n";
echo "<script src=\"" . get_settings('siteurl') . "/wp-includes/js/scriptaculous/effects.js\" type=\"text/javascript\"><>/script>\n";<
I’m assuming this isn’t the proper Wordpress API syntax(?) that you mentioned. As it were, how would I modify this above code to take advantage of the WP API and your plugin?
These seem to be the 17 repeat culprits on every page…even pages that don’t have any content yet, seriously. I will say that they match almost precisely the calls within /wp-incudes/script-loader.php:
wp-content/themes/manumedicsiii/js/jquery-1.3.1.min.js
wp-includes/js/prototype.js?...
wp-includes/js/scriptaculous/wp-scriptaculous.js?...
wp-includes/js/scriptaculous/effects.js?...
wp-includes/js/scriptaculous/prototype.js
wp-includes/js/scriptaculous/scriptaculous.js
wp-includes/js/scriptaculous/wp-builder.js
wp-includes/js/scriptaculous/wp-effects.js
wp-includes/js/scriptaculous/wp-dragdrop.js
wp-includes/js/scriptaculous/wp-controls.js
wp-includes/js/scriptaculous/wp-slider.js
wp-includes/js/scriptaculous/wp-sound.js
wp-includes/js/scriptaculous/builder.js
wp-includes/js/scriptaculous/effects.js
wp-includes/js/scriptaculous/dragdrop.js
wp-includes/js/scriptaculous/controls.js
wp-includes/js/scriptaculous/slider.js
wp-includes/js/scriptaculous/sound.js
wp-includes/js/scriptaculous/effects.js
And here are a list of the plugins I’m using…pretty lean:
1) cforms
2) Exclude Pages from Navigation
3) Flexi Quote Rotator
4) Lightbox 2
5) Roll Manager
6) Shockingly Big IE6 Warning
7) Use Google Libraries
Of these, I know that:
1) cforms calls a few .js files, mostly specific to the plugin. can employ jquery, but I’ve turned it off.
2) Exclude Pages makes no .js calls
3) Flexi Quote calls the three listed above
4) Lightbox 2 calls only lightbox.js, so no worries there
5) Roll Manager makes no .js calls
6) Shockingly Big links to its own included jquery.js file
7) n/a
Alright, hope this helps give you an idea of what I’m up against and which way to go from here. Thank you in advance for any help you can offer…hope my lingo is decent enough to follow.
I think I corrected your code section above –Jay
March 30th, 2009 at 6:37 am
@BillyB – You can always view source on your page, and see what url the js files are being loaded from.
@CR – You’re right. That code is hard inserting the js into the header, rather than using the API. There’s no chance to intercept it (and if another plugin WAS using the API, you’d be including those files twice). Because of the way it works it’s not a simple change, but I’ll take a crack at it and let you know.
March 30th, 2009 at 7:04 am
@CR – Ok, here’s a quick and dirty version:
in flexi-quote-rotator.php find:
add_shortcode('quoteRotator', 'quoteRotator_func');insert a new line under it:
add_action('init',array(&$quoteRotator,'enqueueScripts'));in quote-rotator-class.php comment out the three echo lines mentioned above. Then just before:
function addHeaderContent()insert
function enqueueScripts(){
wp_enqueue_script('scriptaculous-effects');
}
Not sure if they’ll see it, but I filed an enhancement request with a patch.
March 31st, 2009 at 7:15 pm
@Jason Penney –
Wow, thanks for your time and help on this. I’ve not yet replaced the code, but will be doing so tonight and will update accordingly. Just wanted to mention, also, that the issue tracker for WP was unknown to me and it’s so cool that you’re able to communicate with other developers on that level. I wonder if the same can be done with regard to cforms, though the guy isn’t listed in WP’s repository and I remember reading why at one point…just can’t remember. It’s a great plugin, but damn does it bring the clutter. :-) Anyway, thanks again and I’ll update you soon!
April 1st, 2009 at 3:18 am
@CR –
I thought I’d replied with a second follow-up, guess I didn’t hit ’submit’. You’re definitely my hero of the month…this totally fixed the issues with ‘Flexi’ and has greatly improved my site’s load time (and Yslow rating). Many thanks to you for your time and knowledge. I thought before that Lighbox 2 (stimuli.ca) was only calling lightbox.js, but it’s calling Scriptaculous and Prototype also. I wrote the author, who replied with a “thanks for the heads up”, but said he’d not been actively programming for quite some time and didn’t mention that he might include it in a future release. So, in that regard I also want to thank you for the attention you’ve paid my concerns. If everyone just had a billion other moments like you…lol. I’m going to try and learn from what info you provided me re:Flexi to try and fix Lightbox 2 and Shockingly Big IE6 Warning…should be interesting! :-)
April 23rd, 2009 at 1:49 am
I’m using this plugin with the new P2 theme from Automattic. But it doesn’t seems to work.
In p2/functions.php there is this line:
wp_enqueue_script( 'p2js', get_bloginfo('template_directory' ).'/inc/p2.js', array( 'jquery' ), '200903301' );And in the generated source I see this
<script type='text/javascript' src='http://www.myblog.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>Is there something wrong with P2 or with this plugin?
/Kia
April 28th, 2009 at 3:17 am
@Kia – I’ve tried using Clearskys Google Ajax Libraries Api Plugin. That solve the problem.
I’d prefer using your plugin. Would it be possible to fix this issue? Your plugin seems more stable, and can handle versions better that Clearskys.
April 28th, 2009 at 7:28 am
@Kia – Sorry for the delay in response. I’ll look into it and see what I can find. What version of Wordpress and P2 were you using?
April 28th, 2009 at 7:32 am
Latest versions:
WP 2.7.1
P2 1.0.3
Thanks!
April 28th, 2009 at 7:46 am
@Kia – OK, I just tried a test site with WordPress 2.8-bleeding-edge, P2 1.0.3, and Use Google Libraries 1.0.5 and here’s what I’m seeing:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.0/scriptaculous.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://XXXXXXX/wp-content/plugins/use-google-libraries/js/jQnc.js?ver=2.8-bleeding-edge'></script>
<script type='text/javascript' src='http://XXXXXXX/wp-includes/js/comment-reply.js?ver=20090102'></script>
...
Do you have any other plugins activated?
April 28th, 2009 at 7:58 am
Yes. I’ve now located the problem:
http://wordpress.org/extend/plugins/author-avatars/
I’m not sure why. But when activated, your plugin doesn’t work. Strange…
April 28th, 2009 at 8:21 am
It appears that Author Avatars is re-registering jquery-ui-resizable on lib/AuthorAvatars.class.php line 67. My plugin, as designed, steps out of the way at this point. Still, I’m not sure Author Avatars needs to do this. You can try commenting that line out, and see if things work.
If that works you may wish to contact the plugin author and ask if they could check if jquery-ui-resizeable is already registered first (using $wp_scripts->query('jquery-ui-resizeable')).
Good luck!
April 28th, 2009 at 2:46 pm
Hey, nice plugin… great idea! :)
I added “jquery-ui-resizable” for wordpress 2.6 which didn’t have it included in the core (if I remember correctly). As someone in an earlier comment already mentioned: re-registering scripts does not have an effect if the script already exists. (The actual checking for already existing scripts is done in WP_Dependencies::add(); see http://lab.yukei.net/wp-code/nav.html?wp-includes/class.wp-dependencies.php.source.html#l108). So if your plugin only changes the “defaults” (but keeps them all in the list) then me re-registering something then that shouldn’t really have an effect, right?
I am not sure what’s happening here exactly but I’m open for suggestions and willing to change the Author Avatars List plugin if necessary…
May 13th, 2009 at 7:44 pm
I think that the IntenseDebate plugin conflicts. With both the IntenseDebate and Use Google Libraries plugins enabled I see the wp-includes JS files, but if I disable IntenseDebate the files switch to the Google APIs files.
May 25th, 2009 at 6:01 am
i’m very much understand js.
but yslow said we should move js to bottom.
is it possible googleapis libs moved to bottom?
tia
May 27th, 2009 at 11:27 am
我喜欢”Use Google Libraries”这个插件。(I like to “Use Google Libraries” of the plugins.)
June 11th, 2009 at 11:53 pm
please improve your plugin for wp2.8
June 12th, 2009 at 7:21 am
@yoyo – The plugin is working in 2.8 fine, but it doesn’t have support for the extra data (like the flag that says to load in the footer) in the released version.
I’ve added it, but I have to set up a 2.7 install to test that it still works there. Feel free to grab this version and see if it does what you want until then.
June 13th, 2009 at 3:14 pm
Seems to be a conflict /w 1.05 & the About Me 1.03 plugin in WordPress 2.8-final. Cannot retain changes to posts/pages. (i.e. make a change on a blog post, click “Update post”, and page refreshes but changes are not applied.)
June 17th, 2009 at 11:53 am
Does it work with WP 2.8 ?
June 24th, 2009 at 10:23 am
please don’t add the jquery library in header,it will cause some wrong!
June 24th, 2009 at 2:04 pm
@bolo – That’s not something my plugin touches one way or the other. It’s determined by WordPress core.
November 27th, 2008 at 9:10 am
[...] Use Google Libraries [...]
November 27th, 2008 at 4:24 pm
[...] Use Google Libraries [...]
November 27th, 2008 at 7:18 pm
[...] Use Google Libraries [...]
November 27th, 2008 at 9:02 pm
[...] Use Google Libraries [...]
November 28th, 2008 at 12:59 am
[...] Use Google Libraries [...]
November 28th, 2008 at 5:02 am
[...] Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress | All the Billion … Supported Libraries and Components [...]
November 29th, 2008 at 12:45 am
[...] Use Google Libraries [...]
November 30th, 2008 at 5:27 am
[...] Use Google Libraries [...]
January 14th, 2009 at 9:55 pm
[...] AJAX Libraries替代Wordpress自带JavaScript框架的插件给大家：Use Google LibrariesGoogle AJAX [...]
March 1st, 2009 at 1:04 am
[...] Google AJAX Libraries相信很多人都知到。那是Google存放流行的JavaScript框架开放给Web开发者使用。来减轻自身服务器的负担。加快自身网页速度（Google的高速恐怕不须多讲了吧）。作为新时代的博客。各种Ajax效果大量运用。不免用到JavaScript框架。今天，让我来介绍一款用Google AJAX Libraries替代Wordpress自带JavaScript框架的插件给大家：Use Google Libraries [...]
March 20th, 2009 at 1:02 pm
[...] updated my Use Google Libraries plugin. This version implements a pair of suggestions from Peter [...]
March 23rd, 2009 at 10:07 am
[...] 插件主页：http://jasonpenney.net/wordpress-plugins/use-google-libraries/ [...]
May 19th, 2009 at 11:13 pm
[...] 插件主页：http://jasonpenney.net/wordpress-plugins/use-google-libraries/ [...]
June 5th, 2009 at 1:18 am
[...] 插件主页：http://jasonpenney.net/wordpress-plugins/use-google-libraries/ [...]
June 9th, 2009 at 7:43 am
[...] 7.Use Google Libraries，如果你的博客使用了JavaScript、AJAX，即直接从Google AJAX Libraries中加载，提高速度，较少主机负载，您的主机能跟Google的服务器比么？ 后台类：面对管理员与搜索引擎友好的选择，帮助管理员得到更多有用的信息。 [...]
June 10th, 2009 at 4:12 am
[...] Use Google Libraries（加速博客 无需设置） [...]
June 12th, 2009 at 2:51 pm
[...] 7.Use Google Libraries, the blog if you use the JavaScript, AJAX, that is, directly from the Google AJAX Libraries in load, speed, and less host load, you could host more than what Google’s servers? [...]
June 13th, 2009 at 2:51 am
[...] Use Google Libraries跟WordPress [...]
June 13th, 2009 at 6:38 pm
[...] updated my Use Google Libraries plugin to support WordPress [...]
June 14th, 2009 at 10:24 am
[...] 插件主页：http://jasonpenney.net/wordpress-plugins/use-google-libraries/ [...]
June 14th, 2009 at 12:14 pm
[...] Use Google Libraries 1.0.5 使用google库 [...]
June 28th, 2009 at 5:10 pm
[...] Use Google Libraries – What this does is instead of loading JS such as jquery etc from your blog; it grabs it from googles CDN. So less resource usage on your end and most likely faster (as well as optimized).[Though be vary; some countries block google and therefore your site may be unusable if this situation occurs] [...]