15. Content Delivery Networks (CDN)

A CDN is a globally distributed network of servers (edge servers / Points of Presence) that cache and deliver content to users from the nearest geographic location. CDNs reduce latency, offload origin servers, and improve availability.

Why CDN?

Without CDN

User in Tokyo ────── 200ms RTT ──────→ Origin Server in Virginia
User in London ───── 100ms RTT ──────→ Origin Server in Virginia
User in São Paulo ── 180ms RTT ──────→ Origin Server in Virginia

With CDN

User in Tokyo ──── 5ms ────→ CDN Edge (Tokyo) ──cache──→ Content
User in London ─── 3ms ────→ CDN Edge (London) ──cache──→ Content
User in São Paulo ─ 8ms ──→ CDN Edge (São Paulo) ──cache──→ Content

Benefits:
| Benefit | Description |
|---------|-------------|
| Lower latency | Content served from nearby edge servers |
| Higher throughput | Edge servers absorb the load |
| Reduced origin load | Origin only serves cache misses |
| DDoS protection | Distributed network absorbs attacks |
| High availability | If one edge fails, traffic goes to next closest |
| SSL termination | Edge servers handle TLS, reducing origin CPU |
| Global reach | Serve users worldwide with consistent performance |

How CDN Works

Pull-Based CDN (Lazy / On-Demand)

Content is fetched from the origin when first requested and then cached at the edge.

1. User requests image.jpg from CDN → Cache MISS
2. CDN edge fetches image.jpg from origin server
3. CDN edge caches image.jpg locally
4. CDN edge serves image.jpg to user
5. Next user requests image.jpg → Cache HIT → Served immediately

User → [CDN Edge] → HIT? → Yes → Return cached content
                         → No  → Fetch from Origin → Cache → Return

Pros:

  • No upfront configuration — content cached on demand.
  • Only popular content is cached (efficient use of edge storage).
  • Simple to set up.

Cons:

  • First user gets slower response (cache miss + origin fetch).
  • Cold start after cache expiration.

Best for: Most websites; general-purpose content delivery.

Push-Based CDN (Proactive / Pre-populated)

Content is uploaded directly to the CDN before users request it.

Origin Server → Push content → CDN Edge servers (worldwide)
User → [CDN Edge] → Content already cached → Return immediately

Pros:

  • No cold start — content available immediately.
  • Full control over what's cached.
  • Minimal origin traffic.

Cons:

  • Must manually manage content uploads.
  • Higher storage costs (content pushed everywhere, even if not popular in some regions).
  • More complex deployment pipeline.

Best for: Known static assets, large files (video, software downloads).

What CDN Caches

Static Content (Primary Use)

  • Images (JPEG, PNG, WebP, SVG)
  • CSS and JavaScript files
  • Fonts (WOFF2, TTF)
  • Video and audio files
  • PDFs and documents
  • HTML pages (for static sites)

Dynamic Content (Advanced)

  • API responses (with short TTL)
  • Personalized content (using edge compute)
  • HTML fragments (ESI — Edge Side Includes)

CDN Cache Behavior

Cache Key

The unique identifier for a cached object. Typically:

Cache key = URL + query string + relevant headers (Vary)

Example:
https://cdn.example.com/images/logo.png?v=2
→ Cache key: "/images/logo.png?v=2"

TTL (Time to Live)

How long content stays cached before re-fetching from origin.

Cache-Control: public, max-age=86400       # Cache for 24 hours
Cache-Control: public, s-maxage=3600       # CDN caches for 1 hour (s-maxage for shared caches)
Cache-Control: no-cache                    # Always revalidate with origin
Cache-Control: no-store                    # Never cache

Cache Invalidation

Method Description Speed
TTL expiration Content expires after TTL Automatic but slow
Purge API Manually invalidate specific URLs Instant
Versioned URLs style.css?v=2 or style.v2.css Instant (new URL = new cache entry)
Surrogate keys / Tags Tag content; purge by tag Fast
Wildcard purge Purge all content matching a pattern Fast

Best Practice: Immutable Content + Hashed URLs

<!-- Bad: Changing content at same URL requires cache purge -->
<link rel="stylesheet" href="/styles/main.css">

<!-- Good: Content-hashed filenames → infinite TTL, instant updates -->
<link rel="stylesheet" href="/styles/main.a1b2c3d4.css">

Cache-Control: public, max-age=31536000, immutable

Content never changes at this URL. When you update the CSS, the hash changes → new URL → new cache entry.

CDN Architecture

                        DNS
                         │
                  ┌──────┴──────┐
                  │   GSLB      │  ← Resolves to nearest PoP
                  └──────┬──────┘
                         │
         ┌───────────────┼───────────────┐
         ↓               ↓               ↓
   ┌──────────┐   ┌──────────┐   ┌──────────┐
   │ PoP      │   │ PoP      │   │ PoP      │
   │ (Tokyo)  │   │ (London) │   │ (NYC)    │
   │ ┌──────┐ │   │ ┌──────┐ │   │ ┌──────┐ │
   │ │ Edge │ │   │ │ Edge │ │   │ │ Edge │ │
   │ │Server│ │   │ │Server│ │   │ │Server│ │
   │ └──────┘ │   │ └──────┘ │   │ └──────┘ │
   └────┬─────┘   └────┬─────┘   └────┬─────┘
        │               │               │
        └───────────────┼───────────────┘
                        ↓
                 ┌────────────┐
                 │   Origin   │
                 │   Server   │
                 └────────────┘

PoP (Point of Presence): Physical location with edge servers. Major CDNs have 200+ PoPs worldwide.

Edge Server: Individual server within a PoP that caches and serves content.

Edge Computing

Modern CDNs allow running code at the edge — closer to users:

Service Provider Runtime
CloudFlare Workers Cloudflare V8 isolates
Lambda@Edge AWS CloudFront Node.js, Python
CloudFront Functions AWS CloudFront JavaScript
Fastly Compute Fastly Wasm
Deno Deploy Deno Deno/V8

Use cases for edge compute:

  • A/B testing (route users to different variants).
  • Authentication / token validation.
  • Geolocation-based redirects.
  • Request/response transformation.
  • Personalization.
  • Bot detection.

CDN Performance Optimizations

Optimization Description
Image optimization Automatic format conversion (WebP/AVIF), resizing
Minification Remove whitespace from CSS/JS
Compression Brotli/gzip compression
HTTP/2 & HTTP/3 Multiplexing, header compression
Early hints (103) Tell browser to preload resources
Prefetching Predict and pre-cache next-page content
Connection pooling Reuse connections between edge and origin

CDN Providers

Provider Key Features
Cloudflare Free tier, edge compute (Workers), DDoS protection, DNS
AWS CloudFront Deep AWS integration, Lambda@Edge, S3 origin
Akamai Largest network, enterprise-grade, adaptive media delivery
Fastly Real-time purge, Varnish-based, edge compute (Wasm)
Google Cloud CDN GCP integration, Anycast IPs
Azure CDN Azure integration, multiple CDN provider options
Bunny CDN Cost-effective, simple, good performance

CDN for APIs

CDNs aren't just for static content:

API Request → CDN Edge → Cache HIT? → Yes → Return cached API response (5ms)
                                    → No  → Forward to origin API (200ms)

Considerations:

  • Use short TTLs (1-60 seconds) for API responses.
  • Use Vary header to cache per-user or per-auth-level.
  • Cache GET requests only (not POST/PUT/DELETE).
  • Use stale-while-revalidate for freshness.
Cache-Control: public, max-age=10, stale-while-revalidate=30

Multi-CDN Strategy

Large companies use multiple CDN providers for:

  • Redundancy: If one CDN has issues, traffic fails over to another.
  • Performance: Route to the fastest CDN per region.
  • Cost optimization: Use cheapest CDN per region.
  • Avoid vendor lock-in: Negotiate better pricing.
DNS / Traffic Manager → Cloudflare (US traffic)
                     → Akamai (EU traffic)
                     → CloudFront (APAC traffic)

Summary

Concept Key Point
Purpose Serve content from nearest edge server to reduce latency
Pull vs Push Pull = on-demand caching; Push = pre-populated
Cache invalidation Use hashed/versioned URLs + purge APIs
Edge compute Run code at the edge for personalization, auth, A/B tests
Static content Set long TTL (1 year) with immutable content-hashed URLs
API caching Short TTL + stale-while-revalidate

Rule of thumb: Use a CDN for all static assets. Use content-hashed filenames with long TTLs for instant, zero-purge updates. Consider edge compute for dynamic personalization.