CDN caching for static content in HLD - Architecture Diagram

System Overview - CDN caching for static content

This system delivers static content like images, stylesheets, and scripts to users quickly and reliably. It uses a Content Delivery Network (CDN) to cache static files close to users, reducing load on the origin server and improving response times globally.

Architecture Diagram

User
  |
  v
+----------------+
|      CDN       |
+----------------+
  |
  v
+----------------+
| Load Balancer  |
+----------------+
  |
  v
+----------------+
| Origin Server  |
+----------------+

Components

User

client

Requests static content like images and scripts

CDN

cache

Caches static content geographically close to users to reduce latency and origin load

Load Balancer

load_balancer

Distributes incoming requests to origin servers for cache misses

Origin Server

service

Hosts the original static content and serves cache misses

Request Flow - 8 Hops

User → CDN

CDN → CDN

CDN → User

CDN → Load Balancer

Load Balancer → Origin Server

Origin Server → Load Balancer

Load Balancer → CDN

CDN → User

Failure Scenario

Component Fails:CDN

Impact:Users experience slower load times as requests go directly to origin server, increasing origin load and latency

Mitigation:Users fallback to origin server via load balancer; origin must be scaled to handle increased traffic; CDN provider redundancy can reduce downtime

Architecture Quiz - 3 Questions

What component serves cached static content directly to the user?

A Origin Server

B Load Balancer

C CDN

D User

Design Principle

This design uses a CDN to cache static content close to users, reducing latency and origin server load. The load balancer ensures scalable and reliable origin server access for cache misses, improving overall system performance and availability.

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