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.
Comments
Share a question, correction, or practical insight about this article.
Checking login status...
Loading approved comments...