The conventional wisdom involving using jQuery with your public-facing posts and pages in WordPress, is to substitute a version of jQuery from a Content Delivery Network (CDN) for the built-in version that comes with WordPress. Before going any further, I need to point out that not every theme makes use of jQuery, so if your theme doesn’t use jQuery for the public-facing pages, you are free to move along.
Having just switched several WordPress sites from “conventional” hosting plans with a variety of hosts, to WP Engine, I noticed that even the built-in version of jQuery loads much faster now, not only because WP Engine tunes its system for maximum performance with WordPress, but also because WP Engine automatically serves jQuery from its own CDN without your having to do anything.
This got me wondering if using one of the other available CDNs for jQuery made sense with sites hosted on WP Engine, as well as what the jQuery load times were before when my sites were on “conventional” hosting plans, where you can run WordPress, but there is no optimization of the server by the hosting company. So, I fired up Apache Bench (“ab” on the command line), and got testing.
There are probably others, but I stuck with the four I know off the top of my head: jQuery (yes, it thoughtfully runs its own CDN in conjunction with MaxCDN), Google Hosted Libraries, Microsoft Ajax Content Delivery Network, and Cloudflare. I also checked a non-CDN (built-in) version of jQuery on WP Engine, and a non-CDN version of jQuery on a conventionally-hosted WordPress site.
Here are the URLs of the CDNs I tested:
You’ll note that Google offers an SSL (https) version of jQuery, which may be everything you need to know when choosing an external CDN, but I did not test it because SSL connections are slower by nature.
Here is a sample of the Terminal.app command I ran to invoke Apache Bench:
ab -c 10 -n 10 http://code.jquery.com/jquery-1.11.1.min.js
Obviously, I changed the URL based on the test, but I used a concurrency of 10 and left the number of runs at 10 for each test.
Before running these tests, I’d been using the jQuery CDN, not only because it was clearly faster than hosting it myself and I was getting the code from the source, but also because it has the easiest (for me) URL to remember when adding it to new project sites. However, I fully expected the Google CDN to be faster, not only because of the size and scope of Google, but also because everybody recommends using Google as your jQuery CDN.
Thus, the results from Apache Bench came as a surprise:
|Source||Total time||Total xfer||Requests per second||Time per request||Xfer rate|
From what I can see, jQuery is the clear winner in these tests.
So, how do you switch from the jQuery that’s already built into WordPress to a CDN version?
Step one, of course, is to check to see if your theme even loads jQuery.
If so, create a child theme for the theme you are using (unless it’s your own hand-rolled theme to begin with), and include a functions.php file. Within your child theme’s function.php, include the following code:
/* disable WordPress' built-in jQuery */
/* use CDN version, and load it in the footer */
wp_register_script('jquery', 'http://code.jquery.com/jquery-1.11.1.min.js', false, '1.11.1', true);
/* re-enable jQuery */
Obviously, you can also use this code in the parent theme’s function.php file, but you’ll have to restore it with each and every theme update, because any update is likely to overwrite changes you’ve made to the parent theme.
I don’t know if this makes any difference, but I always add this code after all the styles are enqueued, but before any of the other scripts, as you would when adding
script tags to an HTML document.
You will note that this adds jQuery to the bottom of the page, unlike the built-in jQuery. If you want to continue to load it at the top, change the
One thing to keep in mind: When using the built-in jQuery, if your server is up, you get your jQuery. With a CDN, even though they are supposed always to be running, they sometimes aren’t. In this instance, your server can be running fine, but you won’t have jQuery. Just another reminder that nothing man-made is perfect.
Here are some other numbers, just in case you haven’t had enough already.
MSFT is Microsoft, WPE is the non-CDN version of jQuery served by WP Engine, CF is Cloudflare, GOOG is Google, and Std. is jQuery server from a standard hosting account without CDN.
Update May 23, 2016: I just noticed that if you host on WP Engine and use the built-in jQuery, WP Engine automatically swaps out the “as shipped” version of WordPress with an up-to-date version. For example, at the time of this update, WordPress seems to ship with jQuery version 1.9.1. The latest version of jQuery (released a day or two ago) is 1.12.4. WP Engine is currently replacing jQuery version 1.9.1 with jQuery version 1.12.3.