What is browser caching and how does it improve performance?
Answer
Browser caching stores copies of resources (JS, CSS, images) locally so subsequent page visits are much faster. Controlled via HTTP response headers: Cache-Control: max-age=31536000, immutable for content-hashed assets (cache forever, the hash changes with content). no-cache: must validate with server before using (stale-while-revalidate pattern). no-store: never cache (sensitive data). ETag: fingerprint of the response — browser sends If-None-Match header; server returns 304 Not Modified if unchanged. Last-Modified: similar but time-based. Best strategy: use content hashing for JS/CSS bundles (e.g., app.a1b2c3.js) with very long max-age. Use short max-age + ETag for HTML files (need to pick up new asset filenames). Serve static assets from CDN with long cache TTLs. Service Worker cache: programmatic caching with full control, enables offline support. A well-cached site loads near-instantly on repeat visits — only the HTML (uncached or short TTL) needs to be fetched fresh.
Previous
What is lazy loading and why is it important?
Next
What is a CDN and how does it improve web performance?