Connecting jQuery from Google CDN with Auto-detection of Version

CDN (Content Delivery Network or Content Distribution Network) is a technology for geographically precise content delivery, allowing a user's computer to download files as quickly as possible by locating the server as close to the user as possible. Such file delivery networks exist for Google, Yandex, and other search and non-search systems. In web development, these networks are often used to connect frequently used libraries, especially jQuery. Here is a link to Google's CDN, where all commonly used JavaScript libraries are located.

jquery Google cdn
Contents:

Correct Way to Connect jQuery in WordPress

Mistake

I have often seen and even mentioned in articles without fully understanding the importance of the mistake. In the examples, I talked and spoke about connecting jQuery in WordPress by adding the following line to the <head> section of the document:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The mistake is not that it won't work, but that WordPress has a special programmatic method for adding scripts to the page - these are functions:

This method is necessary to prevent conflicts when connecting the same script by different plugins. It can also simplify the process of optimizing the loading of JavaScript files to speed up website loading. For example, if all scripts are connected "correctly," they can be programmatically combined into one file and delivered to the browser in compressed form. And ultimately, it is correct to have order and common logic (standard), because if everything is done according to the standard, then when updating and changing functions, it is precisely the unified standard that will help to quickly and imperceptibly transition to updates.

Correct Way to Connect jQuery Script

This involves using the aforementioned wp_enqueue_script() function. Such a connection will protect you from conflicts when connecting the same script in different plugins (the script will be connected only once):

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

This code should be inserted into the theme file functions.php. After the script runs, the following line will appear in the <head> section of the document:

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

CDN When Connecting jQuery in WordPress

The above example demonstrates how to connect jQuery from the WordPress files, while I would recommend connecting jQuery from the Google CDN. This type of connection has several advantages:

  1. The file is delivered in compressed form and weighs less.
  2. If a visitor has already visited a site where jQuery was connected in the same way, then the script is already in their cache and will not be loaded when visiting your site. I read an analytical-statistical article on this topic online - about 15-20% of sites use Google CDN for jQuery, and this figure is growing.
  3. The file is loaded in a separate thread.

jQuery from Google CDN

To connect jQuery from the Google CDN, you first need to deregister the already registered jQuery script in WordPress and register it again with a new address. This is done by adding the following code to functions.php:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// deregister the registered jQuery
	// instead of "jquery-core", you can enter "jquery", then both jquery-core and jquery-migrate will be deregistered
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

As a result, we will get these lines in the head section of the document:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Here, jquery-core means that the link to the jQuery script itself is being replaced, and the additional script jqury-migrate.js, which is needed to transition to version jQuery 1.9.x from earlier versions, is not affected.

Connecting the jquery-migrate plugin means that if you have incompatibility errors with version 1.9.x (i.e., your code was written for earlier versions), jQuery will continue to work, and errors can be fixed as they are identified.

You can check the current links to jQuery in the Google directory here.

Disabling jquery-migrate.js

If jquery-migrate.js is not needed, use the following code to connect jQuery:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

function my_scripts_method() {
	// deregister the registered jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// register
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// enqueue
	wp_enqueue_script( 'jquery' );
}

By deregistering jquery, we automatically deregister the mirgate attachment to jQuery. As a result, we will only get this line:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

true at the end means that the script will be loaded in the footer of the site if possible.

If there are other scripts that are loaded in the head section and depend on jQuery, despite the last argument being true, jquery will still be loaded in the head section of the document, which is logical...

Thanks to Paul for the method of re-registering 'jquery-core' and 'jquery', his article on this.

jQuery from CDN with the Same Version as Used in WordPress

The example below shows how to connect jQuery of the version used in WordPress but from the CDN service:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );

function my_scripts_method() {

	// get the jQuery version
	wp_enqueue_script( 'jquery' );

	// for versions of WP less than 3.6, 'jquery' needs to be changed to 'jquery-core'
	$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver;
	$jquery_ver = $wp_jquery_ver ?: '1.11.0';
	$cdn_url = "//ajax.googleapis.com/ajax/libs/jquery/{$jquery_ver}/jquery.min.js";

	wp_deregister_script( 'jquery-core', $cdn_url );
	wp_register_script( 'jquery-core',  );

	wp_enqueue_script( 'jquery' );
}