Cloudflare jQuery CDN to Improve Website Speed by 15% using 3 simple methods

by
Cloudflare jQuery CDN

Cloudflare jQuery CDN is the most popularly used Content delivery network to add the jQuery library to web applications.

What is jQuery?

jQuery is an open-source javascript library built mainly for HTML, CSS manipulation on any webpage on the fly. It can also handle various browser events, animation, and full-fledged ajax capability with complete cross-browser compatibility.

jQuery being very easy to learn and implement, is used on almost all the web applications that we come across today. A vast majority of WordPress websites utilize jQuery as a core component.

3 Common Methods of adding jQuery library to your website are:

Method 1: Download the jQuery.js file from the official jQuery website and include jquery in an HTML file such as index.html inside your public_html folder. This js file is then called by the web pages, as shown below.

<script src="public_html/jquery.min.js"></script>

Method 2 : It is also possible to include the entire jquery js file inline on each webpage inside <script></script> tags under the <head></head>.

<script>
/*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof ...
...
...
...
</script>

Method 3: Another popular and recommended way of adding jQuery to your website is using Content Delivery Network or CDN such as Cloudflare.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js">
</script>

Here, when we use a CDN to implement jQuery in our website, each time the webpage loads, it sends a request to the nearest Content delivery network or CDN POP server, quickly serving the required jQuery JS file from the local copy available with the nearest edge server. This offloads the serving of these static library files to CDN servers which do this job more efficiently.

Advantages of using jQuery CDN

  1. Each time a user visits the website, the jQuery js file is served to the user from your webserver. And when the webserver becomes busy or if a lot of users visit the website all at once, it could overwhelm the server. Using a CDN, the jQuery js file is requested and served by the CDN server reducing the load on your server and saving resources so that more visitors can access your website.
  2. CDNs such as Cloudflare have servers and POP locations spread across the entire globe and available in almost all countries. These CDN servers are fully optimized for speed and efficiency to serve JS, CSS, and other static files. These CDN servers will always serve the jQuery js file from the location nearest to the user helping in improving the overall website page speed.
  3. There are multiple jquery.js CDN providers both paid and free.

5 Free jQuery CDN providers are:


1.Cloudflare jQuery CDN

Cloudflare jQuery CDN is served from the cdnjs.cloudflare.com domain. The uncompressed Cloudflare CDN jQuery links can be added as shown below.

jQuery Latest CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js">
</script>

The minified version or compressed version jQuery can be added using the below code: observe the .min in the URL

jQuery.min.js CDN Cloudflare

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>

Cloudflare jQuery CDN also provides a slim and minified version of jQuery that can be added, as shown below.

cdnjs cloudflare jquery

jquery 3.6 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js">
</script>

Note: Some jQuery ajax functions may not work when using slim.min.js

Cloudflare jQuery v1.12.4 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js">
</script>

Cloudflare CDN jquery 1.9.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

jquery cdn 1.12 4 Minified version

jquery 1.12.4 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

For Other versions of jQuery CDN Cloudflare links.

2. jQuery CDN

We could also use jQuery’s official CDN to request the jQuery.js file and add it to our website. As shown in the example below:

jquery CDN latest Uncompressed Version

jquery cdn url

<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>

jquery CDN Minified Version from jQuery official CDN

jquery 3.6.0 cdn

<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>

jquery CDN Slim & Minified version

Latest jquery CDN Link from official repository

official CDN for jquery slim from jquery.com

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js">
</script>

jquery CDN latest version

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

3. Google jQuery CDN

Google jQuery CDN has its presence in every location where Google search is available. With google having network peering with almost every internet service provider in every country helps provide a more stable global content delivery service. Using jQuery Google CDN significantly improves the overall website speed performance. Google offers these hosted libraries, including jQuery CDN, for free without any restrictions.

Google jQuery CDN Link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js">
</script>

Using Minified jQuery CDN from Google

Google CDN Latest jQuery

Google CDN Latest jQuery

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

jquery google hosted CDN links are available for all the below versions except few unstable jquery versions (3.3.0, 2.1.2, 1.2.5 & 1.2.4).

Google jquery CDN versions Hosted libraries 

Google Hosted jquery cdn links are available for below jquery versions:

3.6.0, 3.5.1, 3.5.0, 3.4.1, 3.4.0, 3.3.1, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

4. Microsoft jQuery CDN

Microsoft is also offering jQuery CDN for free and without any restrictions. Most MS web applications built on asp.net tend to use the Microsoft CDN, as shown below:

Microsoft jquery CDN Link(latest)

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js">
</script>

5. jsdelivr jQuery CDN

Another popular and free CDN is from jsdelivr.net. This can be implemented as follows:

Minified version of jQuery js from jsdeliver CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js">
</script>

How to load jquery locally when cdn fails

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js">
</script>


<script>
if (!window.jQuery) {
  var scriptd = document.createElement('script');
  var scatt = document.createAttribute("src");       // Create a "class" attribute
  scatt.value = "/js/jquery.min.js";                           
  scriptd.setAttributeNode(scatt);
document.head.appendChild(scriptd);
}

</script>

</head>

Here we first, load the jQuery library from Google jquery CDN which is requested in the first script tag and in the 2nd segment or the 2nd script tag it checks if jquery is loaded from Google jquery cdn link. If window.jquery throws an undefined error indicating that jquery from CDN failed to load. In this case, the jquery library can be loaded locally from your webserver.

This creates an automatic fail safe support for loading jquery library.

Leave a Comment