Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress
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
Download
Latest version: Download Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress v1.0.9.2 [zip]
Support Development
If you find this plugin useful feel free to leave a tip.
Installation
Upload the use-google-libraries folder to the /wp-content/plugins/ folder.
Activate Use Google Libraries through the ‘Plugins’ menu in WordPress.
Er… That’s it really.
FAQ
Q. What happens when Google updates their library versions?
A. Google has stated that they intend to keep every file they’ve hosted
available indefinitely, so you shouldn’t need to worry about them
disappearing.
Q. Why isn’t in doing anything?
A. Firstly, if you are using a caching plugin, flush the cache or
temporarily disable it to be sure it’s not doing anything. That said,
I’ve done my best to make Use Google Libraries gracefully step out
of the way when things are not as expected. While not, perhaps,
giving you the greatest benefit it helps ensure you site doesn’t just
flat out stop working.
In general, anything that calls wp_eneque_script before ‘init’ will
stop Use Google Libraries from loading. Please see the section on
Incompatible Plugins and Incompatible Themes for specific
information.
Changelog
1.0.9.2
- Hopefully fix issue with plugin loading for some users
1.0.9.1
- Added Incompatible Plugins and Incompatible Themes sections
to the README
1.0.9
- more https detection
- inline jQuery.noConflict()
1.0.7.1
- fix previous fix (whoops!)
1.0.7
- Quick and dirty workaround for scriptaculous loading (thanks to
Gregory Lam for bringing it to my
attention
1.0.6.1
- moved location of the Changelog section in the README
1.0.6
- Disables script concatenation in WordPress 2.8, since it seems to have
issues when some of the dependencies are outside of the concatenation. - Persists flag to load scripts in the footer in WordPress 2.8
1.0.5
- It should detect when a page is loaded over https and load the libraries over https accordingly
- It no longer drops the micro version number from the url. The reasons for this are twofold:
- It ensures the version requested is the version received.
- Google’s servers set the expires header for 12 months for these
urls, as opposed to 1 hour. This allows clients to cache the file
for up to a year without needing to retrieve it again from Google’s
servers. If the version requested by your WordPress install
changes, so will the URL so there’s no worry that you’ll keep
loading an old version.
Popularity: 100%
136 Comments
Leave a Reply
Entries,%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D63089199.-%3B)
![[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}
E. C. Segar’s Popeye Vol. 3: Let’s You and Him Fight!
The Art of Happiness in a Troubled World
Paddington Takes the Test
Odd and the Frost Giants
The Lies of Locke Lamora
![[twitter]](http://jasonpenney.net/wp-content/images/icons/twitter-favicon.png "[twitter]"){kind=icon}
Today did not go to plan, but considering 4/5 of the household are sick it went better than I expected.
[...] Use Google Libraries [...]
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.
[...] Use Google Libraries [...]
[...] Use Google Libraries [...]
[...] Use Google Libraries [...]
[...] Use Google Libraries [...]
[...] Use Google Libraries: A Plugin to Improve Script Loading Performance in WordPress | All the Billion … Supported Libraries and Components [...]
@John Blackbourn – Thanks for the kind words (and for releasing your plugin under the GPL)!
[...] Use Google Libraries [...]
[...] Use Google Libraries [...]
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.
@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.
@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).
@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):
@Jason Penney – Jason, I tried as you suggested, but sadly no luck. Any other ideas would be welcome. Thanks.
[...] AJAX Libraries替代Wordpress自带JavaScript框架的插件给大家：Use Google LibrariesGoogle AJAX [...]
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 {
@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.
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
@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.
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.
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.
@twincascos – What issues are you having with enqueue? All you should need to do is
wp_enqueue_script('mootools')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.
[...] Google AJAX Libraries相信很多人都知到。那是Google存放流行的JavaScript框架开放给Web开发者使用。来减轻自身服务器的负担。加快自身网页速度（Google的高速恐怕不须多讲了吧）。作为新时代的博客。各种Ajax效果大量运用。不免用到JavaScript框架。今天，让我来介绍一款用Google AJAX Libraries替代Wordpress自带JavaScript框架的插件给大家：Use Google Libraries [...]
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.
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/
@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!
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 …
@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.
@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.
@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');
@Jason Penney – Thank you very much for the help! :)
[...] updated my Use Google Libraries plugin. This version implements a pair of suggestions from Peter [...]
[...] 插件主页：http://jasonpenney.net/wordpress-plugins/use-google-libraries/ [...]
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
@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
@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.
@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.
@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!
@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! :-)
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
@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.
@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?
Latest versions:
WP 2.7.1
P2 1.0.3
Thanks!
@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?
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…
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!
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…
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.