Content Delivery Network (CDN): How It Works
A CDN is a network of distributed servers that cache and serve web content based on user location.
Content Delivery Network
A Content Delivery Network (CDN) is a globally distributed network of servers that stores copies of your website's content and delivers them from whichever location is closest to the user, dramatically reducing load times and improving reliability for visitors around the world.
What Is a CDN
When a user in Tokyo visits a website hosted on a server in London, the data must travel thousands of kilometres across undersea cables and multiple network hops before it reaches them. Every kilometre adds latency. A CDN solves this by storing cached copies of your content on edge servers distributed across dozens or hundreds of locations worldwide. The Tokyo user gets content from a nearby CDN server rather than waiting for it to arrive from London.
The origin server, which is your actual web host, only needs to handle requests that the CDN cannot serve from cache. For most websites, the vast majority of traffic consists of static assets like images, stylesheets, and scripts that rarely change. A CDN handles all of those, leaving your origin server free to focus on dynamic requests that genuinely require processing.
- Hundreds to thousands of edge servers distributed across continents
- Delivers cached static content and sometimes dynamic content
- Reduces latency by minimising the physical distance data must travel
- Offloads a large portion of traffic from the origin server
- Provides redundancy so that a single server failure does not take your site offline
How a CDN Works
The first time a user requests a resource that the CDN has not yet cached, the CDN fetches it from the origin server, stores a copy at the edge server, and serves it to the user. Every subsequent request for the same resource from users in the same region is served directly from that edge copy without touching the origin at all.
- A user requests a resource such as an image or a CSS file
- The request is routed to the nearest CDN edge server based on the user's location
- If the resource is cached at that edge server (a cache HIT), it is delivered immediately
- If the resource is not cached (a cache MISS), the CDN fetches it from the origin server
- The CDN stores the fetched copy at the edge server for a period defined by cache headers
- Subsequent users in the same region receive the cached copy without involving the origin
Cache duration is controlled by HTTP headers such as Cache-Control and Expires that the origin server sets on its responses. A CDN respects these headers and holds cached copies for as long as the headers specify before treating a resource as stale and re-fetching it.
What CDNs Cache
Not all content is equally suited to CDN caching. Static assets that do not change between requests are ideal candidates. Dynamic content that is unique to each user, such as a shopping cart or an account dashboard, should generally not be cached at a shared edge server.
| Content Type | Examples | Cacheable? |
|---|---|---|
| Images | .jpg, .png, .webp, .svg | Yes, with a long cache duration |
| CSS and JavaScript | styles.css, app.js | Yes, with versioned filenames to allow cache busting |
| Fonts | .woff2, .ttf | Yes, fonts rarely change and can be cached for months |
| Videos | .mp4, .webm | Yes, video files are large and benefit greatly from edge delivery |
| HTML pages | index.html | With caution, using a short cache duration or revalidation |
| Dynamic API responses | Product listings, public data | Sometimes, for responses that are the same for all users |
| Private or user-specific data | Account pages, order history | No, this data must always come from the origin |
Cache Busting with CDNs
One challenge with long cache durations is that users may receive an outdated version of a file after you deploy an update. The standard solution is cache busting, which involves changing the filename or adding a version parameter to the URL whenever the file changes.
- Include a content hash in filenames, for example
app.a3f92c.js. When the file changes, the hash changes, and the CDN treats it as a new resource. - Append a version query string such as
styles.css?v=2, though filename-based hashing is generally more reliable. - Use a CDN that supports instant cache purging so you can manually invalidate specific files after a deployment.
Benefits of Using a CDN
- Faster load times: Content is delivered from the nearest physical edge location, reducing the round-trip time for every asset on your page.
- Reduced origin server load: Edge servers absorb the majority of requests, meaning your origin only handles traffic the CDN cannot serve from cache.
- DDoS protection: The distributed nature of a CDN allows it to absorb and distribute attack traffic across many servers rather than directing it all at your origin.
- High availability: If one edge server fails or goes offline, traffic is automatically routed to the next closest available server.
- Better Core Web Vitals: Faster asset delivery directly improves metrics like Largest Contentful Paint, which Google uses as a ranking signal.
- Consistent global performance: Users in every region experience similar load times regardless of where your origin server is physically located.
- SSL termination at the edge: Many CDNs handle TLS handshakes at the edge server rather than at the origin, reducing connection setup time for users.
Popular CDN Providers
| Provider | Known For |
|---|---|
| Cloudflare | Security combined with CDN delivery, generous free tier, widely used across sites of all sizes |
| AWS CloudFront | Deep integration with Amazon Web Services, good choice if your origin is already on AWS |
| Fastly | Developer-friendly configuration, real-time cache purging, popular with media and publishing platforms |
| Akamai | Enterprise-scale delivery, one of the oldest and largest CDN networks in the world |
| BunnyCDN | Cost-effective pricing, straightforward setup, well suited for smaller sites and indie developers |
| Vercel Edge Network | Built into the Vercel deployment platform, automatically caches assets for Next.js and other frameworks |
When You Might Not Need a CDN
A CDN is one of the most impactful performance tools available, but it is not always necessary. If your website serves a geographically concentrated audience, for example a local business directory serving users in a single city, the latency savings from a CDN will be minimal. Similarly, if your site is almost entirely dynamic content that cannot be cached, the benefit is limited.
That said, many CDN providers offer free tiers that make it cost-free to add CDN delivery to any project. Even for small or local sites, the DDoS protection and redundancy benefits alone often make it worthwhile.
Frequently Asked Questions
- Does a CDN replace web hosting?
No. A CDN caches and delivers content but always pulls from an origin server, which is your web host, whenever it encounters a cache miss. A CDN and a web host complement each other rather than one replacing the other. Your hosting provider runs your application; the CDN sits in front of it and handles delivery. - Does a CDN help with SEO?
Yes. Faster load times improve Core Web Vitals scores, particularly Largest Contentful Paint, which Google uses as part of its ranking signals. Sites that load quickly for users across all regions tend to perform better in search results than slower equivalents. - Is a CDN only for large websites?
No. Even small blogs and portfolio sites benefit from CDN speed improvements. Many providers including Cloudflare offer free tiers with no traffic limits, making CDN delivery accessible to projects of any size and budget. - What is the difference between a cache HIT and a cache MISS?
A cache HIT occurs when the requested resource is already stored at the edge server. The CDN serves it directly without contacting the origin, which is fast. A cache MISS occurs when the edge server does not have a copy, so the CDN must fetch the resource from the origin server before delivering it. The first request for any resource will always be a miss; subsequent requests from the same region will be hits until the cache expires. - How does a CDN handle HTTPS?
Most CDNs handle SSL and TLS termination at the edge server. This means the encrypted connection between the user and the CDN is established at the nearest edge location rather than all the way at the origin server. This reduces the time spent on the TLS handshake, which is one of the slower parts of establishing a secure connection over long distances.
Conclusion
A CDN is one of the most impactful performance and reliability tools you can add to any website. By caching content at edge servers located near your users, it reduces latency, absorbs traffic away from your origin server, and provides resilience against failures and attacks. Even small sites benefit, and many providers make getting started free. Pair your CDN with proper HTTP caching headers to control how long content is held at the edge, and combine it with a fast origin server to handle the dynamic requests that cannot be cached.
