Mastering HTTP Caching: How Browsers Store and Serve Web Resources Efficiently

What Is HTTP Caching

HTTP caching is a simple yet powerful performance optimization technique that stores copies of resources so that subsequent requests can be served directly from the cache without contacting the origin server.

A good caching strategy reduces request latency, saves network bandwidth, and lowers server load by reusing cached files.

Cache Strategies

Browser refresh or navigation actions fall into three categories:

Entering a URL in the address bar or using a bookmark.

Pressing F5, clicking the refresh button, or selecting reload from the context menu.

Pressing Ctrl+F5 (bypassing the cache completely).

Different refresh methods trigger different caching behaviors. HTTP caching is controlled by request and response headers such as Expires, Cache-Control, Last-Modified, and ETag.

Forced Cache

When a resource is already cached and still valid, the browser can use the cached copy directly without contacting the server.

The validity of a forced cache is determined by the response headers Expires (HTTP/1.0) and Cache-Control (HTTP/1.1).

Expires specifies an absolute expiration time set by the server; if the client’s clock is ahead or behind the server, the cache may be inaccurate. In modern browsers, Cache-Control supersedes Expires.

Common Cache-Control directives include:

1) max-age : maximum age in seconds a resource may be cached. 2) s-maxage : same as max-age but only for shared (proxy) caches. 3) public : response may be cached by any cache. 4) private : response is specific to a single user. 5) no-cache : forces revalidation with the server on each request (still cached). 6) no-store : prevents any caching.

<code>cache-control: public, max-age=31536000</code>

This header tells the browser to cache the resource for 31,536,000 seconds (one year). Subsequent requests within that period will be served from the local cache, resulting in a 200 status with "disk cache".

Conditional Cache

Conditional (or validation) caching requires the browser to send a request to the server, which then decides whether the cached copy is still fresh.

The server uses two pairs of headers:

Last-Modified / If-Modified-Since : the server provides the last modification timestamp; the client sends it back, and the server returns 304 if the resource has not changed.

Etag / If-None-Match (higher priority): the server provides a unique identifier for the resource; the client returns it, and the server returns 304 if the ETag matches.

When the server determines the resource is unchanged, it responds with a 304 status, allowing the browser to use its cached copy; otherwise, a full 200 response with the new content is sent.

Summary

HTTP caching consists of forced cache and conditional cache .

Forced cache relies on Cache-Control (and legacy Expires ) to serve resources directly from the local cache with a 200 status.

Conditional cache uses Last-Modified / If-Modified-Since and Etag / If-None-Match to let the server decide if the cached copy is still valid, returning 304 when appropriate.