Remove WordPress jQuery, Add Google CDN jQuery

How can you remove WordPress jQuery and use Google Hosted jQuery instead? Many WordPress themes require jQuery to add cool flyouts, dropdowns, and other jazzy animations. But jQuery is a big script (91KB when minimized), also a very popular JavaScript library, and many themes call on the heavy script jQuery to be loaded at the top of your page, which can slow down your page loading process.

Remove WordPress JQuery

jqueryIt is well known that javascript should be loaded at the end of the page, such that it loads in the end and does not slow page loading. Only asynchronous scripts may be loaded in the HEAD of the page as it continues to load alongside the page loading process.

WordPress themes with lots of cool stuff like sliding social icons, flyouts, drop-down menus, etc harness the power of jQuery. They load it on top of the page and can seriously slow page loading. It also puts a significant load on your server as it delivers with every pageview.

What to do? So it’s better to remove jQuery from the HEAD, move it to the end of the page, as well as switch it with a jQuery script hosted on a Google CDN, so it takes the load away from the server and is available faster across the globe.

Google Hosted jQuery

Google Hosted Libraries is a very useful resource that is actually a CDN or content distribution network for the most popular, open-source JavaScript libraries like jQuery, Prototype, Web font loader, etc.

Since millions of sites use jQuery, and most try to use the bandwidth of Google Hosted jQuery to reduce their own server load, as well as get the speed of any other jQuery CDN, with the added advantage that it is already cached across millions of browsers – helps to load jQuery in the fastest way possible.

How to Switch jQuery

We use the Twenty Thirteen WordPress theme child theme, and it loads jQuery in the HEAD. It’s always a good idea to use a child theme so that official theme upgrades do not spoil your custom edits.

1. So first we need to remove jQuery by de-register script
wp_deregister_script('jquery');

2. Then we need to register the Google CDN jQuery script again
wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), array(), null, true);

Note that the wp_register_script has several components. While the rest seem self-explanatory, 2 values are important which we modify here. The ‘null’  value removes the version number which attaches with a ? after the URL for better caching, while ‘true’ sends the jQuery to the bottom of the page!

3. Again set to load jQuery by enqueueing
wp_enqueue_script('jquery');

So here is the final script you need to add to the functions.php of your WordPress child theme. Note that any code error in functions.php will give errors, so always back up the file and if need be, you will need to restore it via server FTP.

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), array(), null, true);
wp_enqueue_script('jquery');
}

Hope this helps make your site faster.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.