HTTP Caching and CDN: Cache Strategies for Web Performance

What is HTTP Caching?

HTTP caching is the temporary storage of resources (HTML, CSS, JS, images) by browsers and intermediate servers (proxy, CDN).

Caching reduces network traffic on repeated requests and speeds up page loading. A properly configured cache can reduce server load by up to 80%.

Two types of cache: Browser cache (client-side) and shared cache (CDN, proxy). Both serve different purposes.

The Cache-Control header is the primary mechanism controlling caching behavior. It contains directives like max-age, s-maxage, no-cache, no-store.

Cache-Control Headers

max-age=3600: Specifies that the resource is fresh for 3600 seconds (1 hour). During this time, the browser makes no network request.

s-maxage=3600: max-age for shared caches (CDN). Browser uses max-age, CDN uses s-maxage.

no-cache: Resource must be validated with server on every use. Stored in cache but revalidation is performed before use.

no-store: Resource is not stored in any cache. Used for sensitive data (personal information, banking).

public/private: public means it can be stored in any cache. private means it's stored only in browser cache (user-specific content).

immutable: Resource never changes (versioned assets). Browser doesn't perform revalidation, improving performance.

ETag and Last-Modified

ETag (Entity Tag): A unique identifier for the resource. Server uses it to check if the resource has changed.

Last-Modified: Specifies the last modification date of the resource. Browser makes conditional request with If-Modified-Since header.

Conditional Request: Browser makes request with If-None-Match (ETag) or If-Modified-Since (Last-Modified) header. If resource hasn't changed, server returns 304 Not Modified.

304 Not Modified: If resource hasn't changed, server returns only headers, not body. This saves bandwidth.

CDN (Content Delivery Network)

CDN is a network that serves static assets (images, CSS, JS, fonts) from servers in different locations around the world.

CDN serves content from the server closest to the user. This reduces latency by 50-80%.

Popular CDNs: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Each has different pricing and features.

CDN configuration: Origin server (source), edge servers (endpoints), cache TTL (time to live), purge (cache clearing).

Dynamic content with CDN: Some CDNs (Cloudflare Workers, Fastly Compute) can generate dynamic content at the edge.

Caching Strategies

Cache First: Serve from cache first, fetch from network if not available. Ideal for static assets (CSS, JS, images).

Network First: Fetch from network first, fall back to cache if failed. Ideal for dynamic content (API responses).

Stale While Revalidate: Serve from cache, update from network in background. Provides fast response while keeping content fresh.

Cache Only: Serve only from cache. Used for offline applications.

Network Only: Fetch only from network. Used for real-time data (stock prices, chat).

Cache Busting

Versioned filenames: Change filename with style.css?v=1.2.3 or style.abc123.css. Browser loads new file.

Query string: Cache busting with style.css?v=20261025. Some CDNs don't use query string as cache key.

Content hash: Webpack/Vite creates hash based on file content (main.a1b2c3.js). Hash changes when content changes.

Service Worker: New Service Worker becomes active immediately with self.skipWaiting() and clients.claim(). Cache is updated.