How to Load jQuery from Google’s CDN

This tutorials requires you to add custom code in WordPress. “Code Snippets” is an easy, clean and simple plugin to run and manage PHP code snippets on your website. It removes the need to add custom snippets directly to your theme’s functions.php file. Please read our tutorial on how to use “Code Snippets” or download the plugin here.

jQuery is a staple feature of almost all websites on the web. If a site has Javascript, it probably has jQuery. Unfortunately, this success has brought some problems with it, as explained below. While there’s no easy solution, one step towards mitigating it is to load jQuery from a CDN.

There are lots of tutorials on how to do this. Most involve simply dequeuing the script and hardcoding the new URL. However, this has plenty of problems as we’ll see.

The Problem with jQuery

Have you ever run a pagespeed test on a service like Google? Then you’ve probably seen this:

Render Blocking jQuery

These are render blocking scripts, without which your page simply won’t work. Your visitor will be left staring at a blank screen while they load in the background. As a result, it’s of critical interest that they load as fast as possible.

jQuery is the No. 1 candidate for render blocking scripts.

Why Not Just “Defer” or “Async” It?

Believe me, we’ve all tried! I’ve tried using jQuery with “async”, “defer”, and every combination of “async” and “defer” mixed with the other Javascripts known to mankind. And there’s always a problem. I still have a few untested ideas running around in my head, and I’ll let you know if I achieve success.

The crux of the problem is that many HTML elements rely on jQuery to render properly. For example, I have a plugin on my site for responsive tables that redraw themselves dynamically when the page resizes. That requires jQuery. I have a “Table of Contents” plugin that uses jQuery as well.

If you think that’s frivolous, what about lazy loading of images? Without jQuery to lend its power, this feature doesn’t work as it should. And deferring or asyncing jQuery just doesn’t work.

Bottom line: We need to live with the unhappy idea that loading jQuery cannot be put off towards the end of the page after everything has finished loading. Even if that works for you now, a time will come when you’ll need jQuery and you won’t know why your functionality is not working. It’ll be a nightmare to debug.

Loading jQuery from Google’s CDN

Once we’ve accepted our fate that we need to load jQuery before our content, our goal is to do so as quickly as possible. For this, we need a solution with the following characteristics:

  1. High probability of the user already having the resource on their system
  2. Speedy connection times (DNS lookup, server response etc)
  3. Fast download speeds

Loading jQuery from our own site only satisfies a portion of (2) on our list. The only thing our site has going for it is the fact that it doesn’t need a DNS lookup. Otherwise, the browser still has to wait for it to connect. And there almost zero chance of the visitor already having the file on their system (unless they’ve been there before).

Given all this, Google’s CDN is an excellent candidate. There’s a good chance that the user already has the jQuery file on their browser, and you can’t ask for faster connections and download speeds.

Adding Code to your WordPress

To do this, add the following code to WordPress:

add_action('init', 'use_jquery_from_google');

function use_jquery_from_google () {
	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);
}

If you’re not sure how to do this, check out our guide on adding code snippets to WordPress.

What makes this code special, is that it doesn’t request any hardcoded version of jQuery. Instead, it uses the version that is already registered by WordPress. This is awesome, because it means you won’t have to remember to update your function when WordPress ships a new jQuery version.

Now sit back and enjoy your blazing fast jQuery downloads!

About Bas Martens

Bas MartensLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet rhoncus arcu non aliquet. Sed tempor mauris a purus porttitor, ac convallis arcu venenatis. Donec lorem erat, ornare in augue at, pharetra cursus mauris.

Leave a Comment

Thank you for leaving a comment. All comments are moderated according to our comment policy. Keep comments in english please. We will never publish your email address.