1. Wordpress Jquery Plugin
2. Wordpress Jquery Update
3. Enqueue Jquery Wordpress
4. Wordpress Jquery Slider
5. Wordpress Jquery

After running my site through Google PageSpeed insights, I noticed that all of my JavaScript was being deferred except for the jQuery that comes with WordPress.

This was dinging by PageSpeed insights score, as it was telling me to eliminate the render-blocking resource (jQuery 1.12.4). My caching plugin wasn’t able to defer it along with the rest of my site’s JavaScript code, as it’s a core element in WordPress.

To resolve this, I had to deregister jQuery, and replace it with a new version from jQuery.com:

I’m pretty sure all of the latest versions of WordPress load 1.12.4, but check the source of your WordPress website to ensure that yours is the same.

Wordpress Jquery Plugin

This helped save nearly 1 full second from my page load time, and my score went up 6 points. Not a drastic difference, but still a welcomed improvement.

Oddly enough, when I tried using the Google Hosted Library with the above code, it wasn’t able to defer it either:

Wordpress adds this jQuery call via a template tag named, which appears in most themes, and is necessary for some plugins to work. It could be annoying, not only because of loading, but because it might kill previously loaded jQuery, and might even get in the way of some plugins who try to load jQuery as well. WordPress comes bundled with jQuery and some essential jQuery libraries. WordPress theme and plugin developers can easily call jQuery in their own plugins and themes to add their own jQuery scripts. To call jQuery in WordPress theme or plugin, users need to add their own jQuery scripts and enqueue them in WordPress. By default if you enqueue jquery then it gets added in header but if any plugin is changing the default behavior of it and adding it in footer instead of header then you can use the following code to alter it and force it to add in header again.

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

So, I stuck with the jQuery.com hosted version linked above instead.

I’m using WP Rocket for caching, but this should also use with other caching plugins, or plugins that help to defer javascript.

Please let me know if this helped you in the comments below!

UPDATE:

There’s a second method that does the job as well; installing the plugin “Async Javascript”.
After installing, in the settings, there’s an area under “Quick Settings” that says “Apply Async”.

It’s important to check your console for JavaScript errors and make sure that it doesn’t break jQuery. jQuery can sometimes break when loaded with async or defer, but on my particular instance, it worked perfectly.

UPDATE June 2020:

Most of these methods are outdated. Here is a much more current and efficient version:

JQuery is probably the most commonly used JavaScript library in WordPress. It underpins many of the advanced features from sliding galleries, to certain ajax implementations. In addition, lots of plug-ins require jQuery to provide their fancy effects. It’s hardly an exaggeration to say that there is no major blog that doesn’t use jQuery in some form or the other. However, it is a continuingly changing library. New functions appear and old ones get deprecated as per the prevailing best practices of the time. As a result, the versions keep changing. What if you want to use a particular plug-in that requires a specific version of jQuery? How do we force WordPress to changed the jQuery version in place of the default one? Luckily, this can easily be accomplished using filters and a CDN source for the JavaScript libraries.

If you load a page on your WordPress blog and check the source by pressing Ctrl+U in most major browsers, you can find the current version of jQuery by searching the HTML. For example, my test site uses version 1.11.0 as shown in the screenshot below.

To change it, we need to follow three steps:

1. Determine which version we want;
2. Get the appropriate URL from the Google Libraries;
3. Use a filter hook to replace the old one.

Determine which Version we Want

Most of the time you will be alerted to the need for a different version of jQuery by a plug-in that doesn’t work and by the errors in the JavaScript console. By contacting the plug-in author, you might be able to figure out which version is required. For purposes of this example, let’s assume we want to use version 2.0.2 instead.

Get the Version URL from Google

There are many companies that maintain copies of open source libraries like jQuery. In addition to providing the code freely, they also host it on powerful servers across the world that act as Content Distribution Networks or CDNs. They deliver the files to users around the world far more quickly and efficiently than your site ever could. This makes yet another reason for you to use the CDNs since your blog pages will load faster on a visitor’s browser.

Google is one such CDN and the host all the popular versions of jQuery with each having a separate URL. The structure of the URL looks like this:

Wordpress Jquery Update

Just replace [vesion_number] with the one we are looking for. The Google CDN hosts versions as old as 1.2.3 and as recent as 2.1.0 (as of this date). So for our example, the URL we are looking for will be:

Enqueue Jquery Wordpress

Using Filters to Change the jQuery Version

If your theme has been coded properly, it has used the wp_enqueue_script command for including the jQuery library. Most good themes do this nowadays so it shouldn’t be a problem. Open up your functions.php file and append the following code to the bottom:

I have detailed in an earlier tutorial how to properly include JavaScript into WordPress. Accordingly, I have first deregistered the existing version of the “jquery” hook and introduced the new one with the new URL instead. As for the parameters, I have specified that there are no dependencies and also that this is version 2.0.2 which will be appended as a query string.

Wordpress Jquery Slider

Save functions.php, reload a page from your WordPress blog and check the source once more. As you can see in the screenshot below, the jQuery version has been replaced with the one we want from the Google CDN.

Wordpress Jquery

This is a safe and scalable way to modify any JavaScript library in WordPress and not just jQuery. We’re lucky that it’s open source and that there are so many CDNs available from which we can choose.