As a moderator on the WordPress Stack Exchange, I end up spending a lot of time on the site. I see lots of great questions, lots of not-so-great questions, and several you’ve-got-to-be-kidding-me questions. But the question I see the most often frustrates me:
How do I remove WordPress’ jQuery and use Google’s CDN version instead?
I have no trouble saying that, if you’re asking this question, you have no business building a website in the first place.
Why Use Google’s CDN?
The three most commonly cited reasons to dequeue WordPress’ bundled version of jQuery in favor of Googles are:
- Decreased Latency
- Increased Parallelism
- Better Caching
If you didn’t know any better, each of these arguments makes a lot of sense.
Decreased latency – the idea that jQuery will download faster from a properly-located CDN than your arbitrarily-located server – is a fallacy in today’s high-bandwidth world. jQuery by itself is 91KB when it’s minified (not counting any server-side data compression). Over a high-bandwidth connection, this downloads in less than half a second from just about anywhere (my server is located in a different country, yet jQuery still downloads in ~200ms for me). Consider the size of the rest of your site – ~300k of scripts, ~100k of content, ~1-2m of images – and the footprint left by jQuery is inconsequential.
Increased parallelism – the fact that a browser can only download so many resources at a time – is a valid concern. But consider that nearly all of your calls to jQuery are wrapped in some kind of document-ready event and there’s an easy work-around: load jQuery in the footer rather than the header. Your content will load first and the user experience is not impacted by waiting a fraction of a second before your fancy animations fire.
Better caching – the idea that Google’s servers will be configured more efficiently than yours – is bogus. If you’re counting on Google’s well-configured CDN to save your site from a poorly set-up server environment, then you have absolutely no business building or hosting websites. Your server should be fully capable of setting the appropriate cache control headers on script files and, if not, you should contract with someone who know what they’re doing to set it up.
Why NOT Use Google’s CDN?
WordPress takes great care to make sure its bundled libraries are fully compatible with other bundled scripts. jQuery is loaded in “no conflict” mode to prevent any potential script collisions over the [cci]$[/cci] variable in the global namespace. As of version 3.6, WordPress will be shipping with version 1.9 of jQuery – which removes several deprecated APIs like [cci].live()[/cci]. To prevent things from breaking, WordPress automatically loads jQuery Migrate, a plugin that adds these removed APIs back to the system, but alerts you in the browser console of their deprecation.
If you load jQuery 1.9 yourself from Google’s CDN, you’ll miss out on the jQuery Migrate plugin and end up breaking several themes and plugins that depend on these deprecated APIs. I still find [cci].live()[/cci] even in new code, so the chances of it littering your site and breaking things when you start swapping out libraries are extremely high.
Also, WordPress is taking steps to prevent you from dequeueing jQuery on the back end at all. You’ll still be able to override it for the front-end if you absolutely need to, but if you ever find such a need, stop and ask yourself why before heading down that path. Chances are good that your “need” is really just a patch over a deeper problem you don’t fully understand.
Why is this the Wrong Question?
I recently build a project for a client that worked flawlessly with jQuery 1.9, but broke with any lesser version. My first (wrong) instinct was to remove the bundled jQuery and bump the loaded version to 1.9 instead. It would have worked, but it wouldn’t really have fixed the issue.
Instead, I doubled down and walked back through the code instead. I was using a lot of non-jQuery code in my system, and it turned out I had a typo. With older versions of jQuery, my typo resulted in plain, non-functional code. With the newer version of jQuery, my typo accidentally invoked a jQuery method where I was attempting to invoke a native JavaScript method.
The fix was to correct the typo, making my code work 100% independent of jQuery.
I spent a few hours looking for the best way to override the bundled version of jQuery, but that was the wrong approach. The right approach was to ask an entirely different question: what will a different version of jQuery give me that I don’t have right now? The answer to that question: nothing.
Moving On
The only reason you should ever enqueue Google’s version of jQuery is if you are building a project for Google and they ask you to. A properly configured server will cache just as effectively, completely eliminating any concerns regarding cache duration or script latency. Moving your scripts to the right part of the page – the bottom – will further allay concerns about load time and user experience.
Nine times out of ten, “how do I replace the bundled version of jQuery” is the wrong question. It’s a question most frequently asked by newer web developers and it betrays your inexperience. Instead, take some extra time to learn to do things the right way and your site will be just as fast. Go for a fully-thought-out solution, not just a quick fix.