Sometimes, loading the jQuery library from Google’s CDN instead of a local copy is advantageous. Sometimes not. Let’s hash-out when and why.
Sometimes, loading the jQuery library from Google’s CDN instead of a local copy is advantageous. Sometimes not. Let’s hash-out when and why.
As most WordPress users know, most plugins and themes developed today depend on jQuery. And as most WordPress users that have attempted to optimize their websites for performance know, it is extremely difficult – and often impossible – to eliminate jQuery as a render blocking resource.
Why Can’t I Eliminate jQuery As a Render Blocking Resource?!?!?!?11!!11 Grrrr…….
jQuery figures so prominently into all things WordPress that it is included in WordPress’s core. As such, attempting to defer, asynchronously load or concatenate (combine with your site’s other scripts) jQuery often results in your website ‘breaking’or otherwise going wonky.
This is nearly always due to inline scripts (JavaScript that is inserted in your HTML not as a link/HTTP request, but as the whole bit of code) being dependent on jQuery being loaded in the <head> of the page.
What You Can Do to Eliminate jQuery as Render Blocking
Firstly – and in spite of getting dinged by PageSpeed Insights for jQuery being render blocking – it may ultimately make no real-world performance difference whatsoever that it is.Firstly – and in spite of getting dinged by PageSpeed Insights for jQuery being render blocking – it may ultimately make no real-world performance difference whatsoever that it is. It simply depends on what all your website has going on; and, primarily, whether or not you have other render blocking resources in addition to jQuery, some CSS files or other JavaScript files for example.
You see, if you have – and must have – one render blocking resource, it, from a real-world performance perspective, generally doesn’t matter if you have several more as they will be loaded in parallel by the browser. Said differently, be it 1 or 9 render blocking resources often doesn’t matter unless one of those render blocking resources takes significantly longer to load than the others.
That said…
As a general rule/best practice, you do want to try and eliminate render blocking resources. And many people do with success, until they run headlong into jQuery, leaving it as the last issue to fully optimizing above the fold content. So, let’s discuss some ways to get rid of jQuery as render blocking:
1.) Remove or do not use jQuery dependent functionality
If, for example, you are using a lazy loading plugin that breaks when deferring, asynchronously loading or concatenating (i.e. combining) jQuery with your website’s other scripts, remove that plugin and/or find a non-jQuery dependent alternative. In keeping with our lazy loading plugin example, the Rocket Lazy Load plugin is not dependent on jQuery to work. Once you have successfully removed jQuery dependent functionality, you should then have no trouble deferring, asynchronously loading and/or concatenating jQuery with your site’s other scripts.
2.) Concatenate all JavaScript including inline scripts
This can be done with the Autoptimize plugin. Doing this doesn’t always work, but you should give it a shot (and should be using Autoptimize for minification anyway).
3.) Load jQuery from Google instead of locally (i.e. from your server)
So you have to leave jQuery in the <head> as render blocking… what can you do?
While loading jQuery from Google is – technically – still render blocking, it in effect is not and will not be. Why? Because millions upon millions of websites use Google’s jQuery. What this means is that it is all but certain that a visitor to your website will already have jQuery cached in their browser, which means that they won’t have to download jQuery at all. Bing bang boom, jQuery no longer blocks rendering whereas it would being served locally (i.e. from your server)!
How to Load Google’s Copy of jQuery
Step 1: Figure out what version of jQuery you are using:
- Right Click and view your page’s source code
- Find jQuery: it will look something like http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.3
- The three numbers at the end, 1.11.3 in this example, is the jQuery version.
- If you do not see the version number at the end of your jQuery file, click the file;
- At the top of the file, in the beginning of the code, you will see something like jQuery v1.11.3
- Again, in this example, 1.11.3 is the jQuery version
Step 2: Dequeue the local copy of jQuery and enqueue Google’s
In your theme’s functions.php file or using a plugin like Code Snippets, copy and paste the following code:
function modify_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/x.xx.x/jquery.min.js', false, 'x.xx.x');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');
IMPORTANT:
Step 3: Do Your Happy Dance
When You Should NOT Use Google’s Copy of jQuery
- When you are able to concatenate jQuery with all of your other scripts;
- If you have a lot of Chinese users, as Google and Google assets are censored there.
And that’s it, folks!
Have a question or a comment Let us know below!
RECENT POSTS
How to Defer or Asynchronously Load JavaScript in WordPress Without a Plugin
Everything You Know About Website Speed Is Wrong: Myth #1: “Load Time is the Most Important Performance Metric”
Comments 8
Hello,
First I could not find my version of the jQuery in my page’s source code. I tried the inserting the version 2.1.4 in the above code in my function.php file and while it didn’t cause any errors it must have conflicted with my Revolution Slider plugin because the sliders disappeared immediately. Any ideas? Thanks
Author
Hello,
1.) If you do not see the version number at the end of your jQuery link, click the link
2.) At the top of the file, in the beginning of the code, you will see something like jQuery v1.11.3
3.) This is the jQuery version
I promise, it is there. If you are using a minification plugin -like Autoptimize- and aggregating jQuery you will need to unoptimise JavaScript for a moment to get the version #.
Have the very best day!
Marcus T.
Project Management Lead
WpFASTER
I have no question. Your article is great
This is great, and easy to implement. Thanks.
I was thinking though, that wouldn’t it be better to use one of the small plug-ins that achieves this feat? So that the JQuery version number automatically updates, when required?
I am particularly thinking for sites of clients, etc. Otherwise someone has to remember to update the functions.php file whenever WP JQuery version changes.
Or, perhaps there’s some simple code we can add to the function you’ve provided, that will test for the version of JQ in use?
Thank you this was helpful
Hi. Great article and very easy to follow. However, I tried this and while it didn’t break my site it did lower my score for mobile and desktop. Previously I was on 78% mobile and 89% desktop on page insights. Then it dropped to 74% and 84%. I have removed the code from my themes functions file. Any thoughts or is it just best to leave it.
Author
Hey Bernard,
There are a multitude of things you can do to make your website faster that will nonetheless lower your PageSpeed Insights grades — this is one of them.
PageSpeed Insights is not a “speed” testing tool per se, but a very basic best practices tool. If it sees that your serving ‘x’ number of resources from 3rd parties — jQuery in this instance — it will ding your grades even though your website will be faster in real life.
So, you have to decide, at least in this instance, if you want a faster website for your website’s real, human users; or, if you want better grades on this or some other best practices tool. The former is what Google actually uses in real life to determine performance, user experience and SERPs. For real world testing we do hope you’re making use of Google’s real world performance testing platform, WebPageTest.org.
Be well,
AJ McKay
Managing Partner
WpFASTER
Thanks for this. I’m learning new things every day 🙂