google jquery hosted library

When and How to Load jQuery From Google’s CDN

WpFASTER Blog, Code 3 Comments

WpFASTER-Logo

Submits the Following:

Sometimes, loading the jQuery library from Google’s CDN instead of a local copy is advantageous. Sometimes not. Let’s hash-out when and why.

Sometimes, loading the jQuery library from Google’s CDN instead of a local copy is advantageous. Sometimes not. Let’s hash-out when and why.


As most WordPress users know, most plugins and themes developed today depend on jQuery. And as most WordPress users that have attempted to optimize their websites for performance know, it is extremely difficult – and often impossible – to eliminate jQuery as a render blocking resource.


Why Can’t I Eliminate jQuery As a Render Blocking Resource?!?!?!?11!!11 Grrrr…….separator.png


jQuery figures so prominently into all things WordPress that it is included in WordPress’s core. As such, attempting to defer, asynchronously load or concatenate (combine with your site’s other scripts) jQuery often results in your website ‘breaking’or otherwise going wonky.

This is nearly always due to inline scripts (JavaScript that is inserted in your HTML not as a link/HTTP request, but as the whole bit of code) being dependent on jQuery being loaded in the <head> of the page.


What You Can Do to Eliminate jQuery as Render Blockingseparator.png



Firstly – and in spite of getting dinged by PageSpeed Insights for jQuery being render blocking – it may ultimately make no real-world performance difference whatsoever that it is.
Firstly – and in spite of getting dinged by PageSpeed Insights for jQuery being render blocking – it may ultimately make no real-world performance difference whatsoever that it is. It simply depends on what all your website has going on; and, primarily, whether or not you have other render blocking resources in addition to jQuery, some CSS files or other JavaScript files for example.

You see, if you have – and must have – one render blocking resource, it, from a real-world performance perspective, generally doesn’t matter if you have several more as they will be loaded in parallel by the browser. Said differently, be it 1 or 9 render blocking resources often doesn’t matter unless one of those render blocking resources takes significantly longer to load than the others.

That said…

As a general rule/best practice, you do want to try and eliminate render blocking resources. And many people do with success, until they run headlong into jQuery, leaving it as the last issue to fully optimizing above the fold content. So, let’s discuss some ways to get rid of jQuery as render blocking:

1.) Remove or do not use jQuery dependent functionality

If, for example, you are using a lazy loading plugin that breaks when deferring, asynchronously loading or concatenating (i.e. combining) jQuery with your website’s other scripts, remove that plugin and/or find a non-jQuery dependent alternative. In keeping with our lazy loading plugin example, the Rocket Lazy Load plugin is not dependent on jQuery to work. Once you have successfully removed jQuery dependent functionality, you should then have no trouble deferring, asynchronously loading and/or concatenating jQuery with your site’s other scripts.

2.) Concatenate all JavaScript including inline scripts

This can be done with the Autoptimize plugin. Doing this doesn’t always work, but you should give it a shot (and should be using Autoptimize for minification anyway).

3.) Load jQuery from Google instead of locally (i.e. from your server)

So you have to leave jQuery in the <head> as render blocking… what can you do?

While loading jQuery from Google is – technically – still render blocking, it in effect is not and will not be. Why? Because millions upon millions of websites use Google’s jQuery. What this means is that it is all but certain that a visitor to your website will already have jQuery cached in their browser, which means that they won’t have to download jQuery at all. Bing bang boom, jQuery no longer blocks rendering whereas it would being served locally (i.e. from your server)!


How to Load Google’s Copy of jQueryseparator.png

loading atom Step 1: Figure out what version of jQuery you are using:
  • Right Click and view your page’s source code
  • Find jQuery: it will look something like http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.3
  • The three numbers at the end, 1.11.3 in this example, is the jQuery version.
  • If you do not see the version number at the end of your jQuery file, click the file;
  • At the top of the file, in the beginning of the code, you will see something like jQuery v1.11.3
  • Again, in this example, 1.11.3 is the jQuery version
loading atom Step 2: Dequeue the local copy of jQuery and enqueue Google’s

In your theme’s functions.php file or using a plugin like Code Snippets, copy and paste the following code:

function modify_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js’, false, ‘x.x.x’);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘modify_jquery’);

IMPORTANT:

Wherever you see “x.x.x” in the above code, replace this with whatever version number of jQuery you are using.
loading atom Step 3: Do Your Happy Dance

funny happy dance


When You Should NOT Use Google’s Copy of jQueryseparator.png

  1. When you are able to concatenate jQuery with all of your other scripts;
  2. If you have a lot of Chinese users, as Google and Google assets are censored there.

And that’s it, folks!


atom small

Have a question or a comment Let us know below!

Comments 3

  1. K Meyers

    Hello,

    First I could not find my version of the jQuery in my page’s source code. I tried the inserting the version 2.1.4 in the above code in my function.php file and while it didn’t cause any errors it must have conflicted with my Revolution Slider plugin because the sliders disappeared immediately. Any ideas? Thanks

    1. Post
      Author
      WpFASTER

      Hello,

      1.) If you do not see the version number at the end of your jQuery link, click the link
      2.) At the top of the file, in the beginning of the code, you will see something like jQuery v1.11.3
      3.) This is the jQuery version

      I promise, it is there. If you are using a minification plugin -like Autoptimize- and aggregating jQuery you will need to unoptimise JavaScript for a moment to get the version #.

      Have the very best day!
      Marcus T.
      Project Management Lead
      WpFASTER

Leave a Reply

Your email address will not be published. Required fields are marked *