What Is a CDN and How Does It Speed Up Your Site?

Your Site's Files, Copied All Over the World

Imagine you wrote a really popular recipe and posted it in one library in New York. If someone in Tokyo wants to read it, they'd have to wait a long time for the library to mail a copy. That's what happens when your website lives on just one server — everyone, no matter where they are, has to wait to get the files from that one place.

A CDN (Content Delivery Network) solves this. It takes copies of your website's files — images, CSS stylesheets, JavaScript code — and stores them on dozens of servers spread across the globe. When a visitor comes to your site, the CDN automatically sends them the files from the closest server to them.

The CDN itself isn't your website — it's like a delivery service standing in front of your website. Your main server still has the original files, but the CDN makes everything load much faster for your actual visitors.

Speed Is Everything on the Web

Every extra second your site takes to load, you lose visitors. Studies show that most people leave a site if it takes more than 3 seconds to load. For a site with visitors from all over the world, a single server in one location can make your site feel slow everywhere except where that server is.

Beyond speed, CDNs also protect your site. If a huge number of people suddenly try to visit your site all at once (called a traffic spike), a single server might crash. A CDN spreads that traffic across many servers so no single one gets overwhelmed.

From One Server to a Global Network

Here's how a CDN delivers your content to visitors around the world:

1. You upload your files to your main server or a CDN provider like Cloudflare, Fastly, or AWS CloudFront.
2. The CDN spreads copies around — it pushes your files out to servers in dozens of cities and countries. These are called "edge servers" because they sit at the outer "edge" of the network, closest to users.
3. A visitor arrives — when someone types your URL, the CDN's system (called Anycast routing) automatically picks the closest edge server.
4. The file is delivered fast — the edge server sends the file from right nearby. The visitor's browser loads your site almost instantly.
5. Cache refresh — every so often, the CDN checks back with your main server to make sure it still has the latest version of your files.

Think of it like a chain of coffee shops. Instead of everyone driving to one roastery in one city, the roastery sends coffee to shops in every neighborhood. Now customers just go to the shop around the corner. Same coffee, much faster delivery.

Before and After a CDN

Here's a comparison showing how a browser loads resources with and without a CDN:

// Without a CDN — browser fetches directly from origin
const resources = [
  'https://yourdomain.com/images/hero.jpg',
  'https://yourdomain.com/styles.css',
  'https://yourdomain.com/app.js'
];

// Every visitor downloads from the same server.
// A visitor in Tokyo waits 600ms+ for each file.

async function loadSite() {
  for (const url of resources) {
    await fetch(url);  // SLOW from far-away server
  }
}

// With a CDN — browser fetches from nearest edge server
const cdnBase = 'https://yourid.cloudfront.net';

const resources = [
  `${cdnBase}/images/hero.jpg`,   // Frankfurt edge → ~20ms
  `${cdnBase}/styles.css`,        // Singapore edge → ~15ms
  `${cdnBase}/app.js`             // Los Angeles edge → ~25ms
];

// The CDN routes each request to the closest server.

async function loadSite() {
  for (const url of resources) {
    await fetch(url);  // FAST — edge server nearby
  }
}

The key difference: with a CDN, your files are reachable from dozens of locations simultaneously. The CDN handles the routing automatically — you just change your URLs to point to the CDN's domain instead of your origin server.

Knowledge Check

Test what you learned with this quick quiz.