Check out more CDN Examples Comprehensive CDN Guide

Comprehensive Guide to Content Delivery Networks (CDNs)

Content Delivery Networks (CDNs) are systems of distributed servers that deliver web content to users based on their geographic location. Using a CDN can significantly improve load times, reliability, and performance of your website. Below is a list of popular CDNs along with code examples for various types of resources.

Popular CDNs

CDNJS - A popular library for hosting JavaScript libraries and other assets.
jsDelivr - A free CDN for open-source projects.
Google Hosted Libraries - A collection of popular JavaScript libraries.
UNPKG - A fast CDN for everything on npm.
Microsoft Ajax CDN - CDN for hosting JavaScript libraries and other resources.
Bootstrap CDN - A CDN specifically for Bootstrap and its dependencies.
Cloudflare CDN - A general-purpose CDN for hosting various assets.

Comprehensive Lists and Resources

CDNJS Directory - A comprehensive directory of libraries hosted on CDNJS.
GitHub CDN - List of projects hosted on GitHub accessible via CDN.
Awesome CDN - A curated list of various CDNs on GitHub.
Public CDN List - A list of various public CDNs.

Special Purpose CDNs

FontCDN - A CDN specifically for web fonts.
Cloudflare Fonts - A service from Cloudflare for hosting Google Fonts.

Code Examples

1. Embedding jQuery from CDNJS

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

Rendered:

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

2. Embedding Bootstrap from CDN

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

Rendered:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

3. Using Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Rendered:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

4. Including Font Awesome for Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Rendered:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

5. Embedding an AngularJS Application from Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Rendered:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

6. Including Axios for HTTP Requests

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

Rendered:

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

7. Using Popper.js for Tooltips and Popovers

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>

Rendered:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>

8. Including D3.js for Data Visualization

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

Rendered:

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

Conclusion

CDNs are a powerful tool for improving the performance and reliability of web applications. By utilizing various CDNs, developers can enhance user experience through faster loading times and reduced latency.