You probably already know that it’s better to load static files from a Content Distribution Network (CDN). JavaScript, CSS, and image files fall into this category. However, there’s another step beyond a CDN – hosted libraries. These hosted libraries are high speed, geographically distributed servers that serve as content distribution networks for popular, open source Javascript libraries. You can call on these well-known JavaScript libraries and add them to your site with a small bit of code.
There are many well known hosted libraries – the two most famous being Google and CDNJS. It might seem like a good idea to serve all your JavaScript files from these libraries, but that might not be a generally good idea. In this article, I’ll show you that the most important use-case for using them is jQuery. And that too ONLY from Google’s network.
Buy Hostgator Plans with an In-Built CDN
Both hosted libraries and CDNs share the same goals. They serve your content from servers located geographically close to users at very high speeds. But not all web hosting plans include a dedicated CDN. For example, Hostgator’s optimized WordPress packages use the SiteLock CDN network, but not the shared hosting plans, which rely on Cloudflare. Here’s the Hostgator coupon list to help you find the best deal!
However, there are a few differences between hosted public libraries and traditional CDNs.
DNS Resolution
Some CDNs like Cloudflare use a “reverse proxy” setup. What this means is that your static files will be served over your site’s URL like this: https://www.yoursite.com/jquery.js, instead of this: https://yoursite.somecdnnetwork.com/jquery.js
This has an important side effect. It means that for the first URL, the browser won’t have to perform an additional DNS lookup to retrieve the file jquery.js. The second URL however, is hosted on a different domain name compared to your own site, so there is an added lag while the browser gets the IP address for the new domain.
Ideally, we want to reduce the number of DNS lookups as much as possible. Internal testing has convinced me that in most cases, the additional DNS lookup isn’t worth it. Therefore, I prefer CDNs that function on a reverse proxy model like Cloudflare instead of traditional networks that change the static file URLs.
However, public libraries are by definition hosted on an external URL. Google’s URLs start with “ajax.googleapis.com” and CDNJS URLs are “cdnjs.cloudflare.com”. This means that unless the browser has already cached the response from another site, there will always be an additional DNS lookup. This makes public libraries very tricky to use, compared to reverse proxy CDNs, or just hosting the files on your own server.
Globally Distributed Networks Comparison
Not all CDNs are built the same. While most try and do a fairly decent job of spreading out their servers across the globe, there are some locations that are chronically underserved. Africa is one glaring example. None of the well-known retail CDNs that I’ve tested, serve the African subcontinent well enough. They usually have just one location in Johannesburg and that’s it.
However, publicly hosted libraries like Google and CDNJS have a much stronger network than most CDNs. CDNJSÂ now uses Cloudflare’s network, which means it has a very strong presence across the globe with multiple server locations for any given area.
Bottom line: Large public JavaScript libraries are faster than ordinary CDN networks.
Not All JavaScript is Equally Important – jQuery is Unique
jQuery holds a distinguished position amongst JavaScript libraries. Currently, almost 75% of all websites use it as shown here:
It’s also quite large compared to the other external JavaScript files on your site. So if you had to choose one JavaScript library to speed up, it would undoubtedly by jQuery.
jQuery is Usually Render-Blocking
I’d written earlier on the Hostgator blog about how to optimize your site for speed. There we see that you should “defer” or “async” all your JavaScript so that it doesn’t block your site from rendering. Unfortunately, jQuery is referenced often by both external and inline scripts. This means that generally speaking, you should keep jQuery loaded in the header, and this slows down your page rendering.
If you ignore my advice and load jQuery via “defer” or “async”, your site will break one day, and you won’t know why. Just trust me on this. I would love to defer the loading of jQuery, but it’s just too unstable to do so.
For this reason, I want to use every means possible to speed up the delivery of jQuery. And for that, publicly hosted libraries are the best.
This is true for two reasons.
Public Libraries Are Ideal for Browser Caching
Perhaps the biggest difference between a traditional CDN network and a public library, is that the former is accessed by only your website, and the latter is accessed by thousands – even millions – of people.
Browsers typically cache the JavaScript they receive for differing periods of time – even up to a year! The idea is that if it sees the same URL again, it doesn’t need to download it again. It can simply use its cached copy and bypass the process entirely. This is the absolute best-case scenario for us. Ideally, the visitor’s browser will already have jQuery cached in its memory and thus solve our render-blocking problems in one go.
But for this, we need to use well-known public libraries that everyone else is using. A private CDN will not bring the same caching and performance benefits. This is one huge advantage in favor of public hosted libraries.
The Same Goes for DNS Lookups
Browsers cache not just files, but also DNS lookups. So if millions of people are using a certain public library, the chances are that an average user will already have the DNS entry in their browser, and thus avoid the lookup altogether.
This sidesteps the penalty of DNS lookups. But again – it will only work with a public hosted library where everyone uses the same URL. Not a traditional CDN.
Which Public Library is the Best?
To test this, I downloaded a simple program that probes the cached files in a variety of browsers. I searched for the two most well-known CDNs in today’s market – Google and CDNJS.
Here are the results for Google’s library:
And here are the results for CDNJS:
As you can see, both Google and CDNJS files are cached in my browser from one site or the other. So from a DNS resolution point of view, both Google and CDNJS are on par. Both public libraries are likely to have been used, and they’re both spared the penalty of a DNS lookup.
But Google Wins for jQuery
But look at the results more closely. Out of the two, you can see that CDNJS has only one version of jQuery cached – 2.2.4. Whereas Google’s library has 11 of them! So unless your website uses JavaScript version 2.2.4, the Google library will be far better for you than CDNJS.
This is because for one reason or another, more people use Google’s libraries to download jQuery than any other file. I don’t know why this is the case, but that’s just the way it is.
WordPress Doesn’t Use the Latest jQuery Version
At the time of this writing, WordPress still uses jQuery version 1.12.4. This is for compatibility, since a lot of plugins rely on the older versions and they don’t want to break them. Looking at the screenshots above, you can see that only Google’s library has served jQuery version 1.12.4. If I were to use CDNJS as my source, most browsers wouldn’t have it in their cache and would need to download it.
So it’s not enough for a hosted library to serve jQuery. They need to be popular with a lot of different versions of jQuery, to maximize the chances that any particular version will be in a random browser’s cache.
Using Google’s Library to Server jQuery on WordPress
The procedure will be different for each software framework. But if you want to use Google’s library for jQuery with WordPress, paste the following code into your theme’s functions.php file.
function load_google_jquery () {
if (is_admin()) {
return;
}
global $wp_scripts;
if (isset($wp_scripts->registered[‘jquery’]->ver)) {
$ver = $wp_scripts->registered[‘jquery’]->ver;
$ver = str_replace(“-wp”, “”, $ver);
} else {
$ver = ‘1.12.4’;
}
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js”, false, $ver);
}
add_action(‘init’, ‘load_google_jquery’);
This code checks the version of jQuery that WordPress is using, and then constructs the URL for use with Google’s library.
Moral of the Story: Google is Best for jQuery
I have nothing against CDNJS. In fact, I prefer them from a philosophical point of view since they’re FOSS, and partner with Cloudflare – another company I like. But numbers are numbers, and technology doesn’t allow for sentimentality. In the contest for which library is better to serve jQuery, Google comes out head and shoulders above the competition. And as we’ve seen above, jQuery is the one JavaScript library that shouldn’t be deferred or asynced. And so using Google libraries is a no-brainer.
For the remaining JavaScript files, it doesn’t matter that much since they don’t block your page. But pay special attention to jQuery – it can make or break your page speed times!
Bhagwad is a freelance writer and owner of the website WP-Tweaks. He’s an expert on WordPress and web hosting and has been writing about them since 2009. He also likes to play the piano, and waste time with video games!