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

Last Updated: September 13, 2026

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.7.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.7.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.7.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.7.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.7.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 a jQuery CDN, you get multiple key benefits:

Reduced server load – Since the jQuery file is delivered from the CDN instead of your own website, your server handles less traffic.
Faster loading speed – CDNs are built for performance. They serve jQuery from a server location closest to each user and rely on multiple data centers along with load-balancing techniques to ensure the file loads as quickly as possible.
Likely already cached in the browser – Since thousands of websites use the same popular jQuery CDN links (like Google’s or code.jquery.com), there’s a good chance a visitor’s browser has already cached that exact jQuery file from browsing another site — so it loads instantly on yours, with zero download time.
Parallel downloading of resources – Browsers restrict how many files they’ll download at once from a single domain. By loading jQuery from a CDN domain instead of your own, the browser can fetch it alongside your website’s other files (CSS, images, etc.) in parallel, rather than waiting in a queue — speeding up your overall page load.
High reliability and uptime – Major jQuery CDNs (Google Hosted Libraries, cdnjs, jsDelivr) run on large, redundant infrastructure. If one server fails, another instantly takes over — giving you better uptime than depending only on your own hosting for the jQuery file.
Saves your hosting bandwidth – Every time jQuery is requested from a CDN instead of your server, you save that bandwidth — useful if you’re on a limited or shared hosting plan.
Automatic delivery from the nearest server – jQuery CDNs have edge servers spread worldwide. A user in India gets jQuery from a nearby data center, and a user in the US gets it from theirs — automatically, with no setup needed on your part.
No manual updates or storage needed – You don’t have to download, store, or update the jQuery file yourself. To use a newer version, you just change the version number in the CDN URL.
Handles traffic spikes smoothly – If your website suddenly gets a lot of visitors, the CDN — not your server — bears the load of serving jQuery, keeping your site stable and responsive.

If the jQuery CDN is ever down or blocked, your site’s jQuery features could break unless you add a local fallback. We will see this thing next.

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

The CDN hosted jQuery might be blocked by a filter or proxy service on the user’s connnection.
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 a Local Copy of jQuery on your Website

Fortunately, there’s a simple fix for these CDN-related issues: you can set up a locally-hosted fallback version of jQuery. The basic idea behind a CDN fallback is to check whether a specific type or variable exists after the script has loaded. If it isn’t found, the browser then loads the jQuery file from your own server instead.

Notice the escape characters inside the document.write method.

<!-- First try loading jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.7.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.7.1.min.js"><\/script>')
</script>

Explaination:

window.jQuery checks if jQuery has already been loaded into the browser. When jQuery loads successfully (from the CDN <script> tag above it), it creates a global jQuery object attached to window. So window.jQuery will either be:

The jQuery object (if it loaded) → truthy
undefined (if the CDN failed/was blocked) → falsy

JavaScript’s || uses short-circuit evaluation: it only runs the right-hand side if the left-hand side is falsy.

If window.jQuery is truthy → the right side is skipped entirely, nothing else happens.
If window.jQuery is falsy (undefined) → the right side runs.

document.write('<script src="/js/jquery-3.7.1.min.js"><\/script>')

This injects a new <script> tag into the page that loads jQuery from your local server instead.

<\/script>

The backslash before the forward slash (\/) is there to escape it. Without this, the browser’s HTML parser would see </script> inside the string and think the current script block is ending early — which would break the page. Escaping it as <\/script> prevents that misinterpretation.

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