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:

Connecting jQuery via CDN

Connecting jQuery via CDN has several advantages:

  1. CDNs are usually optimized and often deliver the file faster than your server.

  2. If a visitor has already accessed a site where jQuery was connected in the same way, they already have this script in their cache, and it will not be loaded at all when visiting your site. About 15-20% of websites use Google CDN for jQuery, and this number is growing.

jquery-core means that the link to the main jQuery file is replaced and the additional script jquery-migrate.js, which is needed for transitioning to later versions, is not affected.

jquery-migrate allows old code to work as before and outputs messages to the console.

For reliability, I recommend connecting jQuery from Google CDN.

You can view the current versions of jQuery in the Google directory here.

jQuery from Google CDN

To connect jQuery from Google CDN, you first need to deregister the already added jQuery script in WordPress and register it again with the new address.

With jquery-migrate.js

Insert the following code into the functions.php file of your theme:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// deregister the registered jQuery
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' );

	wp_enqueue_script( 'jquery' );
}

We will get in <head> of the document:

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

Without jquery-migrate.js

If you do not need jquery-migrate.js, use the following code:

add_action( 'wp_enqueue_scripts', 'deregister_jquery' );
function deregister_jquery() {
	// Replacing the main jQuery file
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );

	// Deregister jquery-migrate.js
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', false, [ 'jquery-core' ], null, true );

	// Enqueue
	wp_enqueue_script( 'jquery' );
}

We will get in <head> of the document:

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

Here, by re-registering jquery, we are removing the binding of migrate to jQuery.

true at the end of the wp_register_script() function means that the script will be loaded in the footer of the site if other scripts loaded in <head> do not depend on jQuery. If they do depend, then jQuery will be loaded in <head> regardless of this argument.

jQuery from CDN of the same version as in WordPress

If you need to keep the same version that is installed in WordPress, use the following code:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// Get the current version
	$wp_jquery_ver = wp_scripts()->registered['jquery']->ver;
	$ver = $wp_jquery_ver ?: '1.11.0';
	$url = "https://ajax.googleapis.com/ajax/libs/jquery/{$ver}/jquery.min.js";

	// Re-register jQuery
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', $url );

	// Deregister jquery-migrate.js
	//wp_deregister_script( 'jquery' );
	//wp_register_script( 'jquery', false, [ 'jquery-core' ], null, true );

	// Enqueue
	wp_enqueue_script( 'jquery' );
}

Connecting jQuery in WordPress

Do not connect directly

I have seen many times how jQuery is connected in WordPress by adding the following line to the <head> of the document:

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

The problem is not that this will not work, but that WordPress has a special programmatic way to add scripts to the page - functions:

This method prevents conflicts when the same script is included by different plugins and simplifies the optimization of loading JS files to speed up the site. For example, if all scripts are connected "correctly", they can be combined into one file and delivered to the browser in a compressed form. Also, it is simply the right thing to do: when there is a single standard, updates happen faster and more seamlessly.

Correct way to connect jQuery

Use wp_enqueue_script(). This method eliminates conflicts and ensures that the script is included only once:

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

The code is placed in functions.php of your theme. After it is executed, a line like this will appear in <head>:

<script src="http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>

--

Thanks to Paul for the option with re-registering 'jquery-core' and 'jquery', his articles about this.