Browser Caching.

Browser caching is the mechanism by which a browser stores a local copy of static resources — images, CSS, JavaScript, fonts — from a website, so that on a user's next visit, those assets are loaded from the local cache rather than re-downloaded from the server. Cache behaviour is controlled by HTTP response headers: Cache-Control sets how long a resource should be cached; Expires sets an expiry date; ETag allows conditional requests to check if a resource has changed.

How Cache-Control Works

Cache-Control: max-age=31536000 (one year) tells the browser to use the cached version of a file for up to a year without checking the server. This is ideal for versioned assets (images, CSS, JS files with a content hash in their filename), because the filename changes when the file changes — bypassing the cache naturally. For frequently updated resources, shorter max-age values or no-cache (check with server each time) are appropriate.

Browser Caching and Core Web Vitals

Browser caching dramatically improves load times for repeat visitors, but has no impact on the first visit — when all resources must be downloaded fresh. Since Google's Core Web Vitals assessment uses field data from all user visits (including repeats), good cache policies improve the distribution of LCP times across the user population. Caching is particularly powerful on mobile where network latency is high and downloads are slow.