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

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

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 CDN 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 in 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, we can do:

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

Notice the src path which links to jQuery file – code.jquery.com.

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 in the below head section of the web page:

<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 your website.
  • 2. jQuery loads faster from CDNs then your website. This is because CDNs are made from 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 to to 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 load. If it’s not there, 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>

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.