Comparing jQuery CDNs

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:

CDN URL
jQuery http://code.jquery.com/jquery-1.11.1.min.js
Google http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js (not tested)
Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js
Cloudflare http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js

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
jQuery 0.118 961760 84.78 117.948 7962.99
Microsoft 0.161 963160 62.11 160.998 5842.22
Built-in (WPE) 0.169 961450 59.23 168.828 5561.38
Cloudflare 0.209 961360 47.92 208.666 4499.19
Google 0.236 962220 42.32 236.300 3976.59
Built-in (std) 0.298 934680 33.52 298.370 3059.20

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 */
wp_deregister_script('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 */
wp_enqueue_script('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 true to false.

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.

Percentage of the requests served within a certain time (ms)
% jQuery MSFT WPE CF Goog Std.
50 103 150 155 163 211 261
66 107 153 157 171 211 268
75 111 156 162 172 215 273
80 111 161 167 172 221 286
90 118 161 168 208 236 298
95 118 161 168 208 236 298
98 118 161 168 208 236 298
99 118 161 168 208 236 298
100 118 161 168 208 236 298

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.

Median connection times (ms)
Source Connect Processing Waiting Total
jQuery 13 90 19 103
Microsoft 14 136 24 150
WPE 23 133 29 155
Cloudflare 10 154 32 163
Google 40 172 44 211
Std. 22 239 50 261
Connection times (ms)
Source min mean [+/-sd] median max
Cloudflare 10 11 1.2 10 13
jQuery 13 14 1.2 13 16
Microsoft 14 14 0.6 14 16
Std. 22 23 1.3 22 25
WPE 22 23 0.1 23 23
Google 37 39 1.2 40 40
Processing times (ms)
Source min mean [+/-sd] median max
jQuery 63 86 13.1 90 105
WPE 116 132 9.8 133 146
Microsoft 126 135 7.4 136 147
Cloudflare 133 152 19.1 154 196
Google 145 168 15.3 172 196
Std. 207 238 20.9 239 274
Waiting times (ms)
Source min mean [+/-sd] median max
jQuery 12 19 6.5 19 35
Microsoft 15 22 4.1 24 27
WPE 21 29 4.4 29 34
Cloudflare 13 29 10.2 32 43
Google 39 44 3.9 44 50
Std. 47 50 2.6 50 53
Total times (ms)
Source min mean [+/-sd] median max
jQuery 78 100 13.5 103 118
Microsoft 140 150 7.6 150 161
WPE 139 154 9.8 155 168
Cloudflare 143 163 19.7 163 208
Google 182 208 15.8 211 236
Std. 229 261 21.6 261 298

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.

Advertisements