jQuery CDN vs Local File

Before you write any jQuery code, you must include the jQuery library in your HTML page. There are two ways to do this — using a CDN or using a local file. This topic explains both methods, when to use each, and how they differ.

What is a CDN?

CDN stands for Content Delivery Network. It is a system of servers spread across the world. When you use a CDN link for jQuery, the browser downloads jQuery from the nearest server to the user's location. You do not host the file yourself.

What is a Local File?

A local file means you download the jQuery file from jquery.com and save it inside your project folder. You then link to it using a relative path.

Local File Example

Project Folder:
├── index.html
└── js/
    └── jquery.min.js

In index.html:
<script src="js/jquery.min.js"></script>

Diagram: CDN vs Local File Flow

  CDN Method:
  User's Browser ──── Internet ──── Google/jQuery Server
                                         │
                                  Downloads jquery.min.js
                                         │
                                  Page loads with jQuery ✓

  Local File Method:
  User's Browser ──── Your Web Server
                           │
                    Loads jquery.min.js
                    from your own server
                           │
                    Page loads with jQuery ✓

Comparing CDN and Local File

Feature	CDN	Local File
Speed	Faster (uses nearest server)	Depends on your server
Works offline	No	Yes
File hosting	Not needed	You host the file
Caching benefit	High (shared cache)	Only your visitors
Internet required	Yes	No
Version control	You choose version in URL	You control the file

Browser Caching Advantage of CDN

If a user visits another website that also uses the same Google CDN link for jQuery, their browser already has that file cached. When they visit your site, jQuery loads instantly from their local cache — not from the internet.

  User visits Website A → Downloads jQuery from Google CDN
                                  │
                           Browser caches file
                                  │
  User visits Website B → Browser finds jQuery already cached
                        → No download needed → Loads instantly ✓

When to Use CDN

Your website is live on the internet.
You want faster load times for global users.
You do not want to manage the jQuery file yourself.
You trust the CDN provider (Google, jQuery, Microsoft).

When to Use Local File

You are building a project that must work offline.
You are developing on localhost without internet access.
Your company security policy blocks external scripts.
You want full control over the jQuery version in your project.

Full vs Minified Version

jQuery comes in two versions — full and minified.

  jquery-3.7.1.js       → Full version (readable, for learning)  ~287 KB
  jquery-3.7.1.min.js   → Minified version (compressed, for live)  ~87 KB

Always use the minified version on live websites. It is smaller and loads faster. The full version is useful when you want to read the jQuery source code.

Where to Place the Script Tag

Place the jQuery script tag just before the closing </body> tag. This lets the HTML load first, which improves page speed.

<body>
  <!-- All your HTML content -->

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

CDN Fallback — Best of Both Worlds

You can use CDN as the primary source and fall back to a local file if the CDN fails. This gives you speed and reliability together.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  if (typeof jQuery === 'undefined') {
    document.write('<script src="js/jquery.min.js"><\/script>');
  }
</script>

If the CDN fails and jQuery is not loaded, the browser loads your local copy instead.

Quick Summary

CDN loads jQuery from an external server — fast, no file hosting needed.
Local file loads jQuery from your own server — works offline, full control.
Use CDN for live websites and local file for offline or restricted environments.
Always use the minified version of jQuery on production sites.
Place the jQuery script tag before your custom script tags.

Previous lesson

Back to course

Next lesson