Browser Caching Explained: Cache-Control, ETag and Expires

What Is Browser Caching?

Browser caching allows a browser to reuse previously downloaded resources according to HTTP caching rules. Effective caching can reduce repeated network transfers for returning visitors.

Cache-Control

The Cache-Control header provides directives that influence how responses may be cached. Static assets often benefit from longer caching when their URLs are versioned or fingerprinted.

ETag

An ETag can identify a particular representation of a resource. A browser can use conditional requests to ask whether its cached copy is still current.

Expires

The Expires header provides an expiration date for a cached response. Modern caching configurations commonly rely heavily on Cache-Control, but legacy configurations may still contain Expires.

Cache Busting

When CSS or JavaScript changes, versioned filenames or query-based asset versioning can help ensure browsers receive the updated resource while retaining long cache lifetimes for unchanged files.

Common Caching Mistakes

• Caching private or user-specific content publicly.
• Using very short cache lifetimes for immutable static assets.
• Using long cache lifetimes without cache busting for frequently changing assets.
• Failing to verify cache behavior in real responses.

For more performance techniques, read our speed optimization guide.

Conclusion

Good caching is about balancing freshness and reuse. Configure caching according to how frequently each resource changes and whether the response contains public or private information.