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.

Step 01 · Concept Snapshot

CDN = serve static files from closer locations

Use this page to see how edge caching changes latency, origin load, freshness, cost, and failure behavior.

Without CDN

User——Origin

Every static request hits origin. Distant users wait for the full round trip.

With CDN

User—Edge—Origin(on miss only)

Static files served from nearby edge. Origin only involved on cache miss.

Choose a scenario

Static images dominate. High CDN benefit, low freshness risk.

Step 02 · CDN Behavior

Simulate CDN request routing

Change mode, location, and cache state to see consequences.

CDN Mode

User Location

Asset Type

Cache State

TTL Setting

Traffic10,000 req/hr

Asset Size2 MB

Live System View

Hover any node to understand its role.

Live

Step 03 · System Metrics

Avg Latency

14ms

Origin Requests

CDN Hit Rate

96%

Freshness Risk

55%

Step 04 · What Changed

Cache hit — edge serves the file in ~14ms. Origin does zero work for this request.

Step 05 · Freshness Tradeoff

Update the origin and watch the CDN serve old or fresh content

CDN performance depends on caching, but correctness depends on freshness rules.

Origin Server

logo-v1.png

Current version

CDN Edge

logo-v1.png

Fresh

TTL Setting

TTL 1h — suitable for most static assets. Deploy with cache invalidation.

Long TTL improves cache efficiency but can serve stale content after deployments. Use versioned filenames (logo-v2.png) or explicit invalidation to control freshness without sacrificing cache hit rate.

Step 06 · Failure Mode

What happens when the CDN goes down?

CDN improves performance, but the system still needs fallback behavior for outages.

CDN Status

Fallback

Latency

14ms

Origin Load

Availability

99.9%

CDN is healthy. Nearby edges serve static assets. Origin handles only cache misses.

Step 07 · Cost Tradeoff

Should this asset be on the CDN?

Select an asset type to see the cost, benefit, and freshness tradeoffs.

Product image

Good CDN fit

Frequently requested, rarely changes.

CDN Benefit95%

Cost Impact20%

Freshness Risk5%

Step 08 · Validate Understanding

Reduce global image latency

Users in India load images from a US origin. Use CDN edge caching.

Handle first request

Edge server does not have video.mp4. Fetch from origin, cache, return.

Fix stale CSS after deploy

Users still receive old app.css. Invalidate the CDN object.

Lower origin load

90% of requests hit the same static asset. Increase CDN hit rate.

Plan outage fallback

CDN provider is unavailable. Fallback to origin and monitor load.

Step 09 · Solution Panel

Walkthrough, comparison, and interview answer.

Caching SQL vs NoSQL

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.