How CDNs Work: Edge Caching & Latency Visualized

A Content Delivery Network (CDN) brings content closer to the user to reduce latency and origin load.

What is a CDN?

A Content Delivery Network (CDN) is a geographically distributed group of servers that work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

Why Speed Matters?

Latency is the annoying delay that occurs between the moment you request a web page and the moment it appears on your screen. By placing Points of Presence (PoPs) closer to the user physically, CDNs minimize the Round Trip Time (RTT).

Core Concepts

1
Origin Server: The source of truth. It holds the original versions of your files. Without a CDN, every user request must travel all the way here.
2
Point of Presence (PoP): Edge servers located in strategic data centers around the world. They cache (store) content for a set time (TTL).
3
Cache Hit vs. Miss: A 'Hit' serves data instantly from the PoP. A 'Miss' forces the PoP to fetch data from the Origin, which is slower but fills the cache for future users.

Real World Examples

Cloudflare

Global Anycast Network

AWS CloudFront

Integrated with S3/EC2

Akamai

Enterprise Edge Computing

Understanding CDN Architecture

The Origin vs Edge Model

A CDN is essentially a network of proxy servers distributed globally. The Origin Server holds the original content, while Edge Servers (PoPs) cache copies closer to users.

Latency Reduction Formula

Without CDN: User → Origin (New York) = ~200-400ms
With CDN: User → Edge (Istanbul) = ~20-50ms
Improvement: 10x faster

Cache Hit vs Cache Miss

When a user requests content, the Edge Server first checks its local cache:

✓ Cache Hit

Content found in edge cache. Served instantly to user. Origin server not contacted.

✗ Cache Miss

Content not in cache. Edge fetches from origin, caches it, then serves to user.

TTL (Time-To-Live)

Every cached item has a TTL - how long it stays valid before needing refresh. Setting the right TTL is critical:

Static assets (images, CSS, JS): Long TTL (1 year) - rarely changes
API responses: Short TTL (1-5 min) - frequently updates
News articles: Medium TTL (1-24 hr) - occasional edits

💡 Pro Tip: Use Cache-Control: max-age=31536000, immutable for versioned assets (e.g., main.abc123.js)

Global CDN Simulator

CDN & Edge Caching Simulator

How to Play

Quick Guide: Content Delivery Networks

How It Works

Key Benefits

Real-World Uses