One common question I get is how to make a WordPress site faster. I’ve actually covered this before in the article “Make WordPress Faster with Super Cache.” But there is more we can do to speed it up further.

In this article I am going to explain how to modify your WordPress site to load jQuery using the Google CDN.

For those that may not know, let’s cover some quick concepts.

What is a CDN?

CDN stands for Content Distribution Network, which is network of servers whose purpose is to make data transfer faster. If my server is in LA and someone tries to load my page in NY, it will take longer than for a person in, say, Chicago. But imagine if between LA and NY I had potentially hundreds of servers all with the same resources? That is what a CDN is, and it allows for websites to load fast, for anyone, anywhere.

What is jQuery

jQuery is a library of javascript code that powers a lot of neat features on many websites using an API. This includes animations, event handling, and Ajax actions.

 Why Load jQuery Using the Google CDN?

jQuery comes package with every WordPress installation. So if you have a fresh WordPress installation with no modifications, jQuery is in that bundle. You can see this for yourself by going to the root folder of your install and looking in /wp-includes/js, and there sits jQuery.

Now, something to keep in mind is that javascript is not always so friendly to our optimization efforts. It can be intense to load, and put a lot of drag on our page load speeds.

By deferring the loading to the Google CDN, we can take some of the effort off of our server and put it on Google. The Google CDN of course is powerful and as fast as all get out. The result is that Google does the heavy lifting, your webserver servers HTML and CSS, and your site loads faster.

Making the Switch

All the default behavior that brings WordPress to life resides the functions.php file. This includes calls to scripts like jQuery. You can think of functions.php like a plugin. It either adds or takes away functionality from your WordPress website. The function that calls the default scripts is “wp_register_script” and there are five parameters that it can pass to specify behavior.

Those parameters are (source: WordPress codex):

  1. $handle: Name of the script (required).
  2. $src: Full URL of the script, or path of the script relative to the WordPress root directory (required).
  3. $deps: An array of registered script handles the script depends on (optional).
  4. $ver: Specifies the script version number
  5. $in_footer: determines whether load the script in the header or the footer of the site (optional)

Open your functions.php file and paste in the following snippet:

//Making jQuery Google API
function modify_jquery() {
  if (!is_admin()) {
    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1');
    wp_enqueue_script('jquery');
  }
}
add_action('init', 'modify_jquery');

 

As a precaution, I will note that doing this requires you to remember to update this code to pull the most up-to-date jQuery version. If you set it and forget it, you will eventually run into issues. So buy some post it notes or something.