Full Stack โ€ข Java โ€ข System Design โ€ข Cloud โ€ข AI Engineering

CDN Fundamentals for System Design

Learn Content Delivery Networks (CDN) from a System Design perspective. This guide explains how CDNs work, edge locations, caching, cache invalidation, cache hit ratio, global content delivery, and how Amazon, Netflix, YouTube, and CloudFront improve application performance.


Introduction

Imagine your application is hosted in Virginia (USA).

A user from:

  • ๐Ÿ‡บ๐Ÿ‡ธ Texas
  • ๐Ÿ‡ฎ๐Ÿ‡ณ Hyderabad
  • ๐Ÿ‡ฏ๐Ÿ‡ต Tokyo
  • ๐Ÿ‡ฌ๐Ÿ‡ง London
  • ๐Ÿ‡ฆ๐Ÿ‡บ Sydney

opens your website.

Without a CDN, every request travels thousands of kilometers to your origin server.

This causes:

  • Slow page loads
  • Higher latency
  • Increased bandwidth costs
  • Heavy load on origin servers

Modern companies like Amazon, Netflix, YouTube, Facebook, and Instagram solve this problem using a Content Delivery Network (CDN).

A CDN stores copies of static content closer to users, reducing latency and improving performance worldwide.


Learning Objectives

After completing this article, you will understand:

  • What is a CDN?
  • Why CDNs are Needed
  • How CDNs Work
  • Edge Locations
  • Cache Hits & Cache Misses
  • Cache Invalidation
  • TTL
  • CDN Architecture
  • CloudFront
  • Real-World Examples
  • Best Practices

What is a CDN?

A Content Delivery Network (CDN) is a globally distributed network of servers that caches and delivers content from locations closer to users.

Instead of every request reaching the origin server:

User

โ†“

Nearest CDN

โ†“

Fast Response

Why Do We Need a CDN?

Without CDN:

flowchart LR
    A[User in Japan]
    B[Origin Server USA]

    A --> B

Problems

  • High latency
  • Slow downloads
  • High bandwidth usage
  • Heavy origin load

With CDN

flowchart LR
    A[User]

    B[Nearest Edge Location]

    C[Origin Server]

    A --> B
    B --> C

Benefits

  • Faster page loads
  • Lower latency
  • Better scalability
  • Reduced origin traffic

Real-World Example

Suppose your website is hosted in AWS us-east-1 (Virginia).

Users:

  • USA
  • India
  • Japan
  • Australia
  • Europe

Without CDN

Every user

โ†“

Virginia

โ†“

High Latency

With CDN

Japan User

โ†“

Tokyo Edge Server

โ†“

Fast Response

CDN Architecture

flowchart TD

    A[Global Users]

    B[CloudFront CDN]

    C[Edge Location USA]

    D[Edge Location India]

    E[Edge Location Europe]

    F[Origin Server]

    A --> B

    B --> C
    B --> D
    B --> E

    C --> F
    D --> F
    E --> F

Edge Locations

Edge Locations are CDN servers deployed around the world.

Example

USA

India

Singapore

London

Tokyo

Sydney

Each location caches frequently requested content.


Request Flow

flowchart LR

    A[Browser]

    B[CloudFront Edge]

    C[S3 Bucket]

    A --> B
    B --> C

Step 1

User requests:

https://codewithvenu.com/logo.png

Step 2

CloudFront checks cache.

Step 3

If found,

Return immediately.

Otherwise,

Retrieve from S3.


Cache Hit

flowchart LR

    A[User]

    B[Edge Cache]

    A --> B

Response served directly from the Edge Location.

Advantages

  • Very low latency
  • No origin request
  • Faster performance

Cache Miss

flowchart LR

    A[User]

    B[Edge Cache]

    C[Origin Server]

    A --> B
    B --> C

The file is not available in cache.

CloudFront downloads it from the origin and stores it.


Cache Lifecycle

flowchart LR

    A[First Request]

    B[Origin Server]

    C[Cached at Edge]

    D[Future Requests]

    A --> B
    B --> C
    C --> D

Cache Hit Ratio

Formula

Cache Hit Ratio

=

Cache Hits

รท

Total Requests

Example

900 Hits

100 Misses

โ†“

90% Hit Ratio

Higher cache hit ratio means:

  • Lower latency
  • Lower origin traffic
  • Lower AWS cost

Time To Live (TTL)

TTL determines how long content remains cached.

Example

Image

โ†“

TTL

โ†“

24 Hours

After TTL expires,

CloudFront checks the origin for updated content.


Cache Invalidation

Suppose:

You replace:

logo.png

Users still see the old image.

Solution

Invalidate cache.

flowchart LR

    A[New Image]

    B[Invalidate CDN]

    C[Edge Cache Updated]

    A --> B
    B --> C

Static vs Dynamic Content

Content Cache?
Images โœ…
CSS โœ…
JavaScript โœ…
Videos โœ…
PDFs โœ…
User Profile โŒ
Banking Balance โŒ
Shopping Cart โŒ

CloudFront with S3

flowchart TD

    A[Users]

    B[Amazon CloudFront]

    C[S3 Bucket]

    A --> B
    B --> C

Very common architecture for:

  • Websites
  • Images
  • Documents
  • Videos

CloudFront with Spring Boot

flowchart TD

    A[Users]

    B[CloudFront]

    C[Application Load Balancer]

    D[Spring Boot]

    E[(Amazon RDS)]

    A --> B
    B --> C
    C --> D
    D --> E

CloudFront caches static assets.

Dynamic requests are forwarded to Spring Boot.


Banking Example

Banking Application

Logo

โ†“

CloudFront

โ†“

Fast Delivery

But

Account Balance

โ†“

Spring Boot

โ†“

Database

Sensitive customer data should never be cached publicly.


Netflix Example

Netflix uses CDNs to deliver:

  • Movies
  • TV Shows
  • Images
  • Thumbnails
  • Video Segments

Instead of downloading from one central server,

content is streamed from nearby edge servers.


YouTube Example

When watching a video,

YouTube delivers video chunks from nearby CDN servers.

Benefits

  • Lower buffering
  • Faster startup
  • Better user experience

Amazon Example

Amazon caches

  • Product Images
  • CSS
  • JavaScript
  • Product Videos

Dynamic data like pricing and inventory are fetched from backend services.


CDN Benefits

  • Lower Latency
  • Faster Downloads
  • Better User Experience
  • Lower Origin Load
  • Reduced AWS Costs
  • Higher Availability
  • Improved Scalability

AWS CloudFront Features

  • Global Edge Locations
  • HTTPS Support
  • Origin Access Control (OAC)
  • AWS WAF Integration
  • Compression
  • Signed URLs
  • Geo Restriction
  • Lambda@Edge
  • CloudFront Functions

CDN + Route53 + CloudFront

flowchart LR

    A[Users]

    B[Route53]

    C[CloudFront]

    D[Application Load Balancer]

    E[Spring Boot]

    A --> B
    B --> C
    C --> D
    D --> E

CDN Performance

Without CDN

India

โ†“

USA Server

โ†“

280 ms

With CDN

India

โ†“

Mumbai Edge

โ†“

25 ms

Lower latency results in:

  • Faster page loads
  • Better SEO
  • Improved customer satisfaction

Monitoring CDN

Monitor

  • Cache Hit Ratio
  • Cache Misses
  • Bandwidth
  • Origin Requests
  • Error Rate
  • Latency
  • Geographic Traffic
  • Data Transfer

Tools

  • Amazon CloudWatch
  • CloudFront Metrics
  • Datadog
  • Grafana

Common Mistakes

โŒ Caching dynamic APIs

โŒ Forgetting cache invalidation

โŒ Very low TTL values

โŒ Very high TTL for frequently changing content

โŒ Exposing S3 directly instead of using CloudFront

โŒ Ignoring cache hit ratio


Best Practices

  • Cache only static content.
  • Place CloudFront in front of S3 and web applications.
  • Use Origin Access Control (OAC) to keep S3 private.
  • Configure appropriate TTL values.
  • Compress assets with Gzip or Brotli.
  • Enable HTTPS everywhere.
  • Use versioned filenames for CSS and JavaScript.
  • Monitor cache hit ratio regularly.
  • Invalidate cache only when necessary.
  • Use signed URLs for private content.

Common Interview Questions

What is a CDN?

A CDN is a geographically distributed network of edge servers that cache and deliver content closer to end users to reduce latency and improve performance.


What is an Edge Location?

An Edge Location is a CDN server located near users that stores cached copies of content.


What is the difference between a Cache Hit and a Cache Miss?

Cache Hit Cache Miss
Content is available in the edge cache Content is fetched from the origin server
Faster response Higher latency
No origin request Origin server is contacted

What is TTL?

TTL (Time To Live) defines how long cached content remains valid before the CDN checks the origin for updates.


Why shouldn't banking APIs be cached?

Banking APIs return user-specific, frequently changing, and sensitive information such as balances and transactions. Caching them publicly could expose stale or confidential data.


Summary

Content Delivery Networks are one of the most important performance optimization techniques in modern System Design.

In this article, we covered:

  • CDN fundamentals
  • Edge Locations
  • Cache Hits & Misses
  • Cache Lifecycle
  • Cache Hit Ratio
  • TTL
  • Cache Invalidation
  • CloudFront Architecture
  • CDN with Spring Boot
  • Banking, Amazon, Netflix, and YouTube examples
  • Monitoring
  • Best practices

Modern distributed systems use CDNs to reduce latency, improve scalability, lower infrastructure costs, and deliver a consistent user experience across the globe. Understanding CDN fundamentals is essential before moving on to Load Balancers, Reverse Proxies, API Gateways, and Caching Strategies.


Loading likes...

Comments

Share a question, correction, or practical insight about this article.

Loading approved comments...