CDN caching for static content in HLD - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the cache expiration header for static content.

HLD

Cache-Control: max-age=[1]

Drag options to blanks, or click blank then click option'

Agzip

Bno-cache

Ctext/html

D3600

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' disables caching, which is not desired for static content.

The max-age directive sets the cache expiration time in seconds. For static content, a value like 3600 seconds (1 hour) is common.

2fill in blank

medium

Complete the code to define the CDN edge server behavior for cache miss.

HLD

If cache miss, fetch content from [1]

Drag options to blanks, or click blank then click option'

Aclient browser

Banother CDN

Corigin server

Dlocal cache

Attempts:

3 left

💡 Hint

Common Mistakes

Thinking the client browser provides content on cache miss.

On a cache miss, the CDN edge server fetches the content from the origin server.

3fill in blank

hard

Fix the error in the cache key definition for CDN caching.

HLD

Cache key = URL + [1]

Drag options to blanks, or click blank then click option'

Arequest headers

Bresponse body

Cserver logs

Dclient IP

Attempts:

3 left

💡 Hint

Common Mistakes

Including response body or server logs in cache key is incorrect.

The cache key usually includes the URL and relevant request headers like cookies or query strings to differentiate cached content.

4fill in blank

hard

Fill both blanks to configure CDN cache invalidation correctly.

HLD

To invalidate cache, send a [1] request to the CDN with the [2] URL.

Drag options to blanks, or click blank then click option'

APURGE

BGET

Ctarget

Dsource

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of PURGE for invalidation.

Cache invalidation is done by sending a PURGE request to the CDN specifying the target URL to remove from cache.

5fill in blank

hard

Fill all three blanks to define a cache-control header that allows CDN caching but forces revalidation after expiry.

HLD

Cache-Control: public, max-age=[1], [2], [3]

Drag options to blanks, or click blank then click option'

Amust-revalidate

B3600

Cproxy-revalidate

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using no-store disables caching entirely.

This header means the content is public, cached for 3600 seconds, proxies must revalidate after expiry, and clients must also revalidate.

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