CDN caching for static content in HLD - System Design Guide

Problem Statement

When all user requests for static files like images, stylesheets, or scripts hit the origin server, it becomes overloaded, causing slow response times and potential downtime. Users far from the origin also experience high latency, leading to poor user experience.

Solution

A Content Delivery Network (CDN) caches static content on servers distributed globally. When a user requests a static file, the CDN serves it from the nearest cache server, reducing load on the origin and speeding up delivery by minimizing network distance.

Architecture

Origin

Origin

↓

CDN

CDN

↓

User A

(Near CDN

This diagram shows user requests for static content being served by CDN edge servers close to users, reducing load on the origin server and improving response times.

Trade-offs

✓ Pros

→

Reduces load on origin servers by serving cached static content from CDN edge servers.

→

Improves user experience by lowering latency through geographically closer servers.

→

Scales easily to handle large traffic spikes without origin server overload.

→

Offloads bandwidth costs from origin to CDN providers.

✗ Cons

→

Cache invalidation can be complex, leading to stale content if not managed properly.

→

Additional cost for CDN services compared to serving directly from origin.

→

Initial cache miss causes a request to origin, which can add latency for first-time content.

Use when your system serves significant static content to a geographically distributed user base and experiences high traffic or latency issues.

Avoid if your traffic is very low (e.g., under 100 requests per second) or if content changes too frequently making caching ineffective.

Real World Examples

Netflix

Uses CDN caching to deliver static assets like images and UI scripts quickly worldwide, reducing load on central servers and improving streaming startup times.

Amazon

Caches product images and static web assets on CDN edge servers to provide fast page loads globally and reduce origin server bandwidth.

Shopify

Delivers static storefront assets via CDN to ensure merchants’ sites load quickly for customers anywhere in the world.

Alternatives

Origin Pull with Cache-Control Headers

Relies on browsers and intermediate caches to store static content rather than a global CDN network.

Use when: When you have a smaller user base mostly in one region and want to avoid CDN costs.

Edge Computing with Dynamic Content Caching

Caches not only static but also dynamic content at edge servers with logic to update caches dynamically.

Use when: When you need to cache personalized or frequently changing content closer to users.

Summary

CDN caching reduces origin server load by serving static content from globally distributed edge servers.

It improves user experience by lowering latency and handling traffic spikes efficiently.

Proper cache management is essential to avoid stale content and balance cost versus performance.

Practice

1. What is the main purpose of using a CDN cache for static content?

easy

A. To delete static files after use

B. To store static files closer to users for faster access

C. To encrypt all static content

D. To increase the size of static files

Solution

1. Step 1: Understand CDN caching basics

   A CDN cache stores copies of static files like images and scripts near users to reduce loading time.

2. Step 2: Identify the main benefit

   By storing files closer, users get faster access and the main server has less load.

3. Final Answer:

   To store static files closer to users for faster access -> Option B

4. Quick Check:

   CDN caching = faster static content delivery [OK]

Hint: CDN caches static files near users to speed up loading [OK]

Common Mistakes:

• Thinking CDN increases file size
• Confusing caching with encryption
• Assuming CDN deletes files after use

2. Which HTTP header is commonly used to control CDN caching behavior for static content?

easy

A. Cache-Control

B. Content-Type

C. Authorization

D. User-Agent

Solution

1. Step 1: Identify headers related to caching

   Cache-Control header tells browsers and CDNs how long to keep cached content.

2. Step 2: Exclude unrelated headers

   Content-Type defines file type, Authorization is for access, User-Agent identifies client.

3. Final Answer:

   Cache-Control -> Option A

4. Quick Check:

   Cache-Control header manages caching [OK]

Hint: Cache-Control header sets caching rules for CDNs [OK]

Common Mistakes:

• Confusing Content-Type with caching
• Using Authorization header for caching
• Thinking User-Agent controls cache

3. Given the following Cache-Control header: Cache-Control: max-age=3600, public, what does it mean for CDN caching?

medium

A. Cache content publicly for 3600 seconds

B. Do not cache content at all

C. Cache content privately for 3600 seconds

D. Cache content indefinitely

Solution

1. Step 1: Interpret max-age directive

   max-age=3600 means cache content for 3600 seconds (1 hour).

2. Step 2: Understand public directive

   public means content can be cached by any cache, including CDNs and browsers.

3. Final Answer:

   Cache content publicly for 3600 seconds -> Option A

4. Quick Check:

   max-age=3600 + public = public cache for 1 hour [OK]

Hint: max-age sets cache time; public allows shared caching [OK]

Common Mistakes:

• Confusing public with private caching
• Assuming max-age disables caching
• Thinking max-age means indefinite caching

4. A CDN is serving outdated static content even after you updated the files on your origin server. What is the most likely cause?

medium

A. The origin server is down

B. The user's browser cache is disabled

C. The static files were deleted from the origin

D. The CDN cache was not invalidated or purged

Solution

1. Step 1: Understand CDN cache behavior

   CDNs keep cached copies until they expire or are explicitly purged.

2. Step 2: Identify cause of stale content

   If files updated on origin but CDN still serves old files, cache invalidation likely missing.

3. Final Answer:

   The CDN cache was not invalidated or purged -> Option D

4. Quick Check:

   Stale CDN content = missing cache purge [OK]

Hint: Stale CDN content? Check cache invalidation first [OK]

Common Mistakes:

• Assuming origin server down causes stale CDN cache
• Thinking deleted origin files cause stale CDN content
• Blaming user browser cache for CDN stale content

5. You want to ensure users always get the latest version of your static files after you update them, but still benefit from CDN caching. Which approach is best?

hard

A. Disable CDN caching and serve files directly from origin

B. Set Cache-Control to no-cache for all static files

C. Use versioned URLs for static files and set long cache expiration

D. Use short cache expiration without versioning

Solution

1. Step 1: Understand versioned URLs

   Versioned URLs (e.g., style.v2.css) change file names on update, forcing CDN to fetch new files.

2. Step 2: Combine with long cache expiration

   Long cache expiration lets CDN cache files efficiently without frequent revalidation.

3. Step 3: Avoid disabling caching or short expiration

   Disabling caching or short expiration hurts performance and increases load.

4. Final Answer:

   Use versioned URLs for static files and set long cache expiration -> Option C

5. Quick Check:

   Versioned URLs + long cache = fresh and fast [OK]

Hint: Version URLs + long cache = fresh content with speed [OK]

Common Mistakes:

• Disabling CDN caching unnecessarily
• Using no-cache header causing slow loads
• Relying on short expiration without versioning