What is jQuery CDN and how you can use it in your website

Last Updated: January 21, 2023

The jQuery CDN is a way to include jQuery in your website without actually downloading and keeping it your website’s folder. There are a number of jQuery CDNs which you can use, examples – Google, Microsoft, Cloudflare, jQuery own CDN & more.

How to use jQuery CDN

Normally we all first download & put the jQuery file in the website’s folder. Then we reference this file on the page head section.

<head>
    <script src="files/jquery-3.2.1.min.js"></script>
</head>

Instead we can use jQuery CDN by just providing the link of jQuery directly from Google, Microsoft, CloudFlare, etc.

So when using jQuery from the jQuery’s own CDN, you can do:

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

Notice the src path that links to jQuery file from code.jquery.com domain.

jQuery CDN hosted by Google

In the same way we can use jQuery CDN hosted by Google, as shown below:

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

jQuery CDN hosted by Microsoft

Microsoft also hosts jQuery and this CDN is used below:

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>

jQuery CDN hosted by CloudFlare

CloudFlare is a great CDN and also very popular too. It also has jQuery CDN which you can use in your website.

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

If you want to learn and understand all about the CloudFlare CDN technology then visit – How does CloudFlare works?. You can also host your full website in CloudFlare free of charge.

Why using jQuery CDN is good for your website

When you use jQuery CDN then you are actually doing 2 positive things:

1. Decreasing the load on your website since the jQuery file will be loaded from a CDN and not from your website.
2. jQuery loads faster from CDNs than from your website. This is because CDNs are made for speed, they serve jQuery from the nearest position to the users. They also have lots of data servers and load balancing algorithms that make sure the jQuery is served very fast.

The article What is CDN? explains all about CDN from starting to the end. Do check it.

There can be issues when loading jQuery from CDNs

a. The CDN hosted jQuery might be blocked by a filter or proxy service on the user’s connnection.
b. The CDN is down or timing out, since the browsers typically have a timeout of 30 seconds therefore the jQuery fails to load in these conditions.

Falling Back from CDN to Local Copy of jQuery present on the Website

Luckily there is a simple solution for these CDN issues. You can easily provide a locally-hosted fallback version of jQuery. The basic idea for CDN fallback is to check for a type or variable that should be present after a script loads. If it’s not there then try getting the jQuery file locally.

Notice the escape characters inside the document.write method.

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

<script>
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='/js/jquery-3.2.1.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

Or, slightly differently.

// First try loading jQuery from CDN
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
// If the CDN fails then Fallback to a local copy of jQuery 
<script>
    window.jQuery || document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>'))
</script>

Next tutorial – Select elements with their index using jQuery Eq Method – .eq()