How CDN Works - Technology for Faster Content Delivery

What is a CDN

A CDN (Content Delivery Network) is a mechanism that delivers content from the location closest to the user through a network of servers distributed around the world.

Why is it needed: If the origin server is in Japan, users in the United States must wait for data to travel across the Pacific Ocean. With a CDN, content can be retrieved from an edge server in the US, significantly reducing latency.

Basic CDN Architecture

flowchart LR
    subgraph Tokyo
        UT["User (Tokyo)"] --> ET["Edge Server (Tokyo)"]
    end
    subgraph NY
        UN["User (NY)"] --> EN["Edge Server (NY)"]
    end
    ET -.->|On cache miss| Origin["Origin Server (US)"]
    EN -.->|On cache miss| Origin

• Edge Server: Cache servers deployed around the world
• Origin Server: The server holding the original content
• PoP (Point of Presence): Data center where edge servers are located

CDN Operation Flow

Cache Hit

flowchart LR
    User -->|1. Request| Edge["CDN Edge<br/>(cache exists)"]
    Edge -->|2. Immediate response| User

Cache Miss

flowchart LR
    User -->|1. Request| Edge["CDN Edge<br/>(no cache)"]
    Edge -->|2. Fetch| Origin["Origin Server"]
    Origin -->|3. Return content| Edge
    Edge -->|4. Store in cache| Edge
    Edge -->|5. Response| User

Cache Control

Cache-Control Headers

# Cache for 1 hour
Cache-Control: public, max-age=3600

# Do not cache
Cache-Control: no-store

# Requires revalidation
Cache-Control: no-cache

# Cache only on CDN
Cache-Control: s-maxage=86400

Cache Keys

Even for the same URL, cache can be separated by the following elements.

Cache Invalidation (Purge)

Methods to delete old cache when content is updated.

Instant Purge

# Cloudflare API example
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {token}" \
  -d '{"files":["https://example.com/image.jpg"]}'

Cache Busting

Include version or hash in filename.

<!-- Version number -->
<script src="/app.js?v=1.2.3"></script>

<!-- Content hash -->
<script src="/app.a1b2c3d4.js"></script>

Key CDN Features

DDoS Protection

flowchart TB
    Attack["Attack Traffic"] --> Edge["CDN Edge<br/>(absorb & filter)"]
    Edge --> Normal["Normal Traffic Only"]
    Normal --> Origin["Origin Server"]

SSL/TLS Termination

CDN handles HTTPS connections and optimizes connection to origin.

flowchart LR
    User -->|HTTPS| CDN -->|HTTP/Optimized| Origin

Image Optimization

flowchart TB
    Original["Original: image.jpg (2MB)"]
    Original -->|Auto-convert at CDN| WebP["WebP: image.webp (400KB)"]
    Original -->|Auto-convert at CDN| AVIF["AVIF: image.avif (300KB)"]
    Original -->|Auto-convert at CDN| Resize["Resize: Scaled to required size"]

Edge Computing

Execute code at CDN edges, processing close to users.

// Cloudflare Workers example
export default {
  async fetch(request) {
    const url = new URL(request.url);

    // A/B testing
    const variant = Math.random() > 0.5 ? 'A' : 'B';
    url.pathname = `/variant-${variant}${url.pathname}`;

    return fetch(url);
  }
}

Major CDN Providers

When to Use a CDN

Good Fit

• Static assets (images, CSS, JavaScript)
• Video streaming
• Globally deployed websites
• Handling traffic spikes
• Security enhancement

Requires Consideration

• Frequently updated content
• Personalized content
• APIs requiring real-time responses

Summary

A CDN is important infrastructure for improving website performance and security. By designing appropriate caching strategies and utilizing CDN according to content characteristics, you can significantly improve user experience.