WordPress relies heavily on jQuery, mainly for its user interface and interaction. Countless of plugins and themes also requiring jQuery to function. So, providing the fastest jQuery to your site will be a good policy.

DifficultyMedium
ToolsBrowser’s Dev Tools
Requirement
  • Access to function.php

Hence, because of this, WordPress by default includes jQuery in their distribution. So, out of the box, jQuery is ready. The problem starts to eventuate as more modern themes designs and its responsiveness to user screen, use jQuery literally from the very first-pixel draw.

Because of that, jQuery has become a blocker. Your site needs to send and run it before pretty much anything else. So, this is the task: how to send jQuery as fast as possible to the user’s device.

Let the fastest jQuery race begin…

To make the fastest delivery of jQuery, you will need a CDN (Content Delivery Network). The question is, from which CDN?

You have three main viable options here:

  1. Deliver jQuery from Google’s hosted libraries
  2. Using delivery from Cloudflare (Cdnjs)
  3. Upload and dispatch it from your CDN

What we will do next is to do some timing experiment from each source. We do first the local copy that your server has. Then we do the same timing experiment to all other candidates.

The Baseline: jQuery from localhost

WordPress by default will send the jQuery from the /wp-include/ folder of the localhost. And it is already on top of the list. Only the main style.css dispatched before it.

the one from localhost?
one run from localhost

So, here are some tasks for the baseline run:

  1. Run your WordPress site (say, the homepage). Take a look at the source, to get the exact jQuery link that is on the page. Then, copy the link to the clipboard.
  2. Activate the Developer Tools (F12) on your browser and clear the browser’s cache.
  3. Paste the jQuery link on the address bar and execute it. Then, check out the timing in the Dev. Tools => Console =>Timing. Record the times needed from connecting to finish downloading. Do this several times (at least three(3) times) and make sure always clear your browser cache.
  4. Then, let us do a few basic items check:

    • Make sure compression is active. Content-encoding: exists on the header. (You can check this from Dev. Tools => Console =>Header=>Response header)
    • Confirm that the jQuery is already minified. (open it in browser or text editor)
    • Notice/Record the jQuery version (usually at the very first line). “1.12.4” in my case.

      So, the average of my runs (10-times) loading the local jQuery is:

PhaseTime (ms)
DNS
TCP397.7
SSL349.5
Sending0.17
TFFB783.6
Download27.8

Since TCP and SSL phases are overlapped each other, the total time required = 379.7+0.17+783.6+27.8 = 1540.8 ms.

Of course, your result could be different than mine.


Clocking Google’s jQuery delivery

  1. Go to https://developers.google.com/speed/libraries
  2. Look for jQuery section and choose the version.
  3. Get the link of the script. For version 1.12.4, the link is: https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
  4. Copy and paste the link into your browser. Then do a similar timing experiment as we did for local copy above.
the fastest jQuery from Google?
a run from Google CDN

The average of my runs (10-times) loading the jQuery via Google is:

PhaseTime
DNS0.1
TCP51.0
SSL31.8
Sending0.1
TFFB68.8
Download18

Yes, we do have an additional component: DNS lookup. Because Google is a different domain altogether, a DNS resolution is required.

Then similar as above, since TCP and SSL phases are overlaps, the total time required is 138.0 ms.

Again, your result could be different than mine.


Using Cloudflare’s jQuery

  1. Go to https://cdnjs.com/libraries/jquery/
  2. Choose the version that matches whatever WordPress uses. In my case, it is version 1.12.4.
  3. Then, get the link of the script. For version 1.12.4, it is: https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
  4. Copy and paste the link into your browser. Then do a similar timing experiment as we did for local copy above.
the fastest jQuery from Cloudflare?
a run from Cloudflare CDN

The average of my runs (10-times) loading the jQuery via Cloudflare is:

PhaseTime (ms)
DNS0.2
TCP71.3
SSL40.5
Sending0.12
TFFB37.9
Download51.7

The total time required is: 161.2 ms.

Again, your result could be different than mine.


Which one is the best?

Do not forget that you can do a similar timing experiment to dispatch the jQuery from your CDN. You know the drill.

Now, having done a quantitative experiment above, you can finally choose which is the fastest jQuery for your website.

Yes, different time, different location, different routing could affect the actual timing. But at least you are making a decision based on data than just a hunch or blind opinion from somebody on the internet.

In my case above the localhost, delivery is roughly 10x slower. Both Cloudflare and Google deliver a quite impressive improvement. Google won by mere 30ms.

So, what about your result? Can you choose the fastest jQuery for your site, then?


Incorporating the fastest jQuery to your site

Once you made up your mind which source you choose. Just use the jQuery link into below snippet. Then insert it to your functions.php

// Replace jquery in WordPress
add_filter( 'wp_enqueue_scripts', 'offload_jQuery');
function offload_jQuery() {
    //get current version
    $jQuery_ver=str_replace("-wp","",wp_scripts()->registered['jquery-core']->ver);
    wp_dequeue_script( 'jquery-core' );
    wp_deregister_script( 'jquery-core' );

    // jQuery from Google
    wp_register_script( 'jquery-core', "https://ajax.googleapis.com/ajax/libs/jquery/$jQuery_ver/jquery.min.js",null,null, false );

    wp_add_inline_script( 'jquery-core', 'window.jQuery||document.write(\'<script src="'.includes_url( '/js/jquery/jquery.js' ).'"><\/script>\')' );
    wp_enqueue_script ( 'jquery-core' );
}

Please note a few things about the above snippet:

  • If your WordPress is using version 1.12.4, then copy and paste the above snippet
  • WordPress hardcoded their version of jQuery with additional “-wp”, i.e: “1.12.4-wp.” So, hopefully, WordPress consistently do this kind of versioning in a future release. If it is so, the above script can automatically adjust the version of jQuery accordingly. (Of course, providing Google Hosted Library/Cloudflare also still maintains the same consistency) If any of the versioning scheme changes, you need to adjust the snippet manually.
  • There is a fallback mechanism, nevertheless. If any of the external library loadings failed, it would load the local version. So, your site would be a tad slow, but at least it is not broken.
  • For Cloudflare’s jQuery, change the link of the above snippet (the middle part) to:
    // jQuery from Cloudflare
    wp_register_script( 'jquery-core', "https://cdnjs.cloudflare.com/ajax/libs/jquery/$jQuery_ver/jquery.min.js", null, null, false );

If you are a bit concern with the admin area, you can add if (is admin()) {} at the start of the snippet. But it would not be necessary.

Do not try to load a different version:

  • Do not use a higher version. Not only the higher version is usually bigger, but it might also give different behaviour in a specific aspect.
  • Do not use the lower version. Some new functionality and bug-fixes might be required for your site to function correctly.

For Litespeed Cache plugins user

You are in luck as you just need to specify the choice in CDN=> Load JQuery Remotely. Choose between “Off” (using local copy”, Google or Cdnjs (Cloudflare). And the plugins will do it for you.


So, hopefully, now your site is faster! Need any other items to make your site faster? Read the complete list here.