How to Load WordPress jQuery Script From CDN (Google Hosted Libraries)
This tutorial will show you how to replace your local jQuery script which comes with WordPress with one from Google Library for better performance and reliability. This usually is done to optimize website performance and improve website load speed for relatively slow shared hosts. The use of CDN (Google Library in this case) is a great way to reduce load on your server in unexpected traffic spikes as fewer files will be loaded from your server and load would be distributed over Google server infrastructure.
If you are using your own VPS, I wouldn’t recommend loading jQuery from other resources. Still, I would minify, combine and gzip it locally, which does require some JavaScript skills to combat JavaScript and jQuery conflicts but it is worth it.
What are the benefits of using Google Library CDN for jQuery and other JavaScript libraries?
1. Better performance as Google surely has a better server than you have.
2. jQuery file from Google Library might be already cached in your visitors browser, making it load even faster.
3. jQuery is loaded from the closest Google server.
4. Less load on your server
As you can all benefits are related to website performance and most likely, you read this because you are looking to improve your website performance, am I right?
How to load jQuery from Google Library (CDN)
First of all default WordPress scripts are registered via functions.php file and there are five parameters for this function.
wp_register_script
- Name (jQuery on our case)
- URL of script (if it is loaded from theme folder or other place outside WordPress code)
- Array of any scripts which depend on this script (in most case scripts will depend on jQuery but there are many uses of this)
- Script version number (Only optional to keep track of scripts you have installed)
- In the footer. (by default, it is set to load all scripts in header, if this parameter is set “true”, scripts will be loaded in footer instead )
//Making jQuery to load from Google Library
function replace_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
wp_enqueue_script('jquery');
}
}
add_action('init', 'replace_jquery');
When and why should avoid using Google Library for jQuery?
- If you are building a theme (free or premium) that you will have no control over where and how it will be used. In case you forget or have no control to update this jQuery code. It will get outdated and you might run into many problems. WordPress core has current (not the latest but the best-suited version for masses) jQuery, so let’s keep it that way.
- When developing WordPress-based website for your clients that you won’t maintain. Again the script will get outdated.
- If you are on your own VPS, you won’t get any speed benefits. If you knew how to set up your own VPS, you will likely know how to implement caching, gzip and script minification.
What are your thoughts about loading jQuery from Google Library or other CDN resources dedicated to JavaScript libraries? CDN as a whole for images, scripts and other large files is a whole other story but what about this?
Update Spazlport has provided helpful code snippet in the comment section below for those looking for an even more advanced solution.
Related Posts
Hi there thx for this snippet it works great how ever if you are worried about others that the Jquery wont work, i say just release a update each time and email it to people or build in a automatic updater in your theme, most website owners use shared hosting and this method really helps to improve their loading times, me personally i included even bootstrap JS and CC with Max CDN with local fall back as well so my framework loads super fast, if your interested in my super clean _underscores theme with built in CDN and already added thumbnails as well excerpts, just ready to make new CSS for it let me know friend. 🙂
Thank you for your feedback and code example!
Since I am developing themes that are distributed via WordPress.org I am not allowed to load any libraries from other resources. All libraries that I use for theme should be bundled with theme or linked to WordPress core libraries (there are plenty of scripts included by default).
But you are right about performance gains if you are using a regular shared hosting because they are all very slow and usually are overselling. it is not possible to run thousands of websites on a single server and hope that it will perform as well as VPS. Therefore, it might be a good idea to load jQuery and other libraries from Google Library or some other services such as cdnjs. But like I already said, you should keep your scripts updated and many webmasters create their website to forget about it few months later. Automatic WordPress updates might be a lifesaver for them.
Everyone has a different opinion and there is no right and wrong solution but only one that you prefer 🙂
and here is a script that will load from your themes files so it there is no incompatibility for Jquery
if( !is_admin()){ $url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'; $test_url = @fopen($url,'r'); if($test_url !== false) { function load_external_jQuery() { wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'); wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'load_external_jQuery'); } else { function load_local_jQuery() { wp_deregister_script('jquery'); wp_register_script('jquery', get_bloginfo('template_url').'/js/jquery-1.11.1.min.js', __FILE__, false, '1.11.1', true); wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'load_local_jQuery'); } }Hi spazlport,
Thank you for this. Looked for this everywhere.
Your one worked perfectly.
Thanks.
It is not good way to load js from google because if speed of internet is slow, it will take much time to load or might not load. Yes , its increase performance of server but other javascript code is dependent on core js so that might broke. Better not to go with this.
Yes, there might be cases when loading jQuery from Google library might not be a good idea but there are cases where it would definitely help. Especially on cheap shared web hostings that are usually ridiculously slow and tweak like this could provide some advantage.
You save my life! All other code snippets I tried from other sides returned a blank page and broken the entire website. Finally some decent solution.
Alex,
Thank you for your feedback! I’m glad I could help 🙂
Hi! I need something that make my wordpress load faster, so i’ve find your post. It seems to work very well, but i have some questions that i hope you can help me.
1. I’m using contact form 7 in my site, and i’ve read that this plugin “Google Libraries” is not compatible with it, so I don’t want to take the risk and end with the blank page of death. You have any idea about this?
2. I’ve read the comment on top of Bhumi. Can you explain me more about what she says? I really don’t want to take any risk and break the whole work i’ve done till the moment.
Thanks a lot!!
Natasha,
1. It’s the first time I hear that Contact Form 7 is not compatible with Google Libraries. I have used above code snippet with dozens of websites that are running Contact Form 7 and haven’t had any problems. Even if Contact Form 7 is not compatible with external jQuery library such as one loaded from Google it won’t cause blank screen of death. In the worst case scenario some of the Contact Form 7 functionality might stop working but it won’t case fatal error. Blank screen of death is caused by errors in your code such as misspelled function names, missing semicolons and other errors.
Never use a code snippet via WordPress code editor if you don’t have an access to FTP to restore files. If your website is getting some traffic then never do any code changes whatsoever without testing them locally of other hosting environment other than your main website. Deploy code changes when you know that everything will work perfectly fine.
2. It was an attempt to drop a link on comment thread with little to no researched comment. I did remove link but leave comment in place. You can feel free to ignore it.
If you want to get the most of CDN style functionality it is always better to load all images, CSS and JavaScript files from CDN and not just separate files. For example we are using MaxCDN to load every file that we have from CDN and not just jQuery. That way you will gain much, much more.
You shouldn’t be using init to enqueue scripts on the frontend. That’s what wp_enqueue_scripts is for 🙂 Then you also can drop the is_admin() conditional check.
function replace_jquery() { wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3'); wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'replace_jquery');However, there’s still a much better way to do this. We can check wordpress’s jquery version to make sure we’re using the same one and also allow for script debugging since many plugins rely on the wordpress jquery. Then we add a local fallback which we can filter if we desire to include a version in our theme.
function my_register_jquery() { $jquery_version = wp_scripts()->registered['jquery']->ver; $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; wp_deregister_script('jquery'); wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/' . $jquery_version . '/jquery' . $suffix . '.js', array(), null, true ); add_filter('script_loader_src', 'my_jquery_local_fallback', 10, 2); } add_action('wp_enqueue_scripts', 'my_register_jquery', 100); function my_jquery_local_fallback($src, $handle = null) { static $add_jquery_fallback = false; if ($add_jquery_fallback) { echo 'window.jQuery || document.write('')' . "n"; $add_jquery_fallback = false; } if ($handle === 'jquery') { $add_jquery_fallback = apply_filters('script_loader_src', includes_url('/js/jquery/jquery.js'), 'jquery-fallback'); } return $src; } add_action('wp_head', 'my_jquery_local_fallback');@Bryan Willis, the problem here is that currently Google’s latest jQuery 1.x release is at v1.12.2 while WP 4.5 is v1.12.3, so following your nice implementation could leave a site broken because v1.12.3 does not exist on Google’s CDN yet.
It’s not clear what the ‘my_jquery_local_fallback’ function is doing here, or how & when it would/could be used.
Please clarify this.
Thanks.
Nice post i am going to apply this in my blog
Thanks for sharing. Would you have any tips to improve performance and optimize CSS Google Fonts?
Montar,
You have already combined all Google fonts on your website in a single file and that is the main performance tweak that you can do for Google Fonts.
Another thing is that you can remove subsets that you are not using. For example, you are using Opens Sans and have cyrillic, cyrillic-ext, latin-ext, latin, greek-ext, greek, vietnamese and other subsets. However, it appears that you aren’t using most of these languages on your website therefore they can be removed. The same goes with other Google Fonts that you have. I think that you can achieve 60-80% reduction in size for Google Fonts with this.
Hey how can this thing with google fonts be done?
also i have some woff and retina icons and those woff files take long to load… what can be done regarding that issue?
Hi Aigars,
I implement the code and it improved my server performance but some JavaScript code looks broken now. I don’t know what could be the reason. Have I not implemented it correctly or there could be some other reason.
Regards
Tauseef
Hi,
I started to have problems with jQuery after migration to HTTPS with Cloudflare and it is (I think) because of wDiscuz plugin. Because it is only the error messages for the comment section that do not appear.
And I’m from a country which Google Api are blocked there. (don’t know why exactly!) Would you help me to figure out how can I solve the problem?
Thanks 🙂
Shahab,
There is no reason for you to offload resources to Google CDN if you are already using Cloudflare CDN. All you do is distribute resources on multiple domains but it won’t provide any performance benefit or reduce the load on your server since all resources are loaded from the Cloudflare anyway.
This saved a few hundred milliseconds off the response time 🙂 Loading from Google was even faster than WP Engine’s own CDN.
It should all come down to your location from where you tested. WP Engine uses MaxCDN/StackPath for CDN which is reasonably fast. However, the location is still important. The closer server is to your location the better performance you will get.