Content Delivery Network (CDN)

Visualize how CDNs reduce latency by serving content from edge locations closer to users, with real-time cache behavior and performance metrics.

Goal: See how edge caches cut latency and protect the origin during static-content traffic.Try: Keep content static, let edges warm up, then flip traffic spike on and compare origin load with CDN on vs off.
CDN Simulation
HIT
MISS
DYNAMIC
ORIGIN
US East
Europe
Asia
S. America
US West

CDN Settings

Traffic & Cache

TTL60s
Live Metrics
Hit Rate0.0%
Avg Latency0ms
Edge Hits0
Misses0
Dynamic0

What's happening?

Five global regions generate requests to a central origin server. When CDN is ON, edge servers (cloud icons) intercept static requests. A green line is a cache hit (served from the edge). An orange dashed line is a cache miss (edge fetches from origin and caches the result). A red line is dynamic content — always bypasses cache.

Why it matters?

CDNs reduce latency by bringing content geographically closer to users. A user in Asia fetching from a US origin adds 200–300ms of round-trip time; an edge server in the same region cuts that to ~20ms. CDNs also absorb traffic spikes and reduce origin bandwidth costs. Dynamic content (personalized, real-time) can't be cached and must still reach the origin.

Why this exists

A CDN moves content closer to users by serving it from geographically distributed edge caches. The main value is not just speed. It is removing repeated load from the origin while reducing latency for distant users.

Distance creates latency

Even a well-tuned origin feels slow when it is far away. Edge caching shortens the physical path for repeated content.

Origins should serve the uncommon path

The origin should mainly handle cold misses, personalization, or dynamic work. Repeated static delivery belongs at the edge.

Cacheability determines value

A CDN is strongest for static assets and cacheable responses. Highly personalized traffic limits what the edge can absorb.

Key takeaways

  • CDNs reduce latency and protect the origin simultaneously.
  • They work best for static assets and predictable cache lifetimes.
  • Edge misses still need a healthy origin path.
  • Cache headers are part of the system design, not just frontend implementation.