What Browser Caching Does
Browser caching tells a visitor’s browser to save copies of files — images, CSS, JavaScript, fonts — so they do not need to be downloaded again on subsequent page views or return visits. Without browser caching, every page load re-downloads assets the browser already has, wasting bandwidth and adding load time. For returning visitors and multi-page sessions, proper browser caching can cut page load times by 50% or more.
How cache headers work
Browser caching is controlled by HTTP response headers that the server sends alongside each file. Two headers do most of the work:
- Cache-Control — specifies how long the browser should keep a cached copy. A value like
max-age=31536000(one year) tells the browser the file will not change and should not be re-requested. Shorter values likemax-age=3600(one hour) suit content that updates more frequently. - ETag / Last-Modified — allow the browser to ask the server “has this file changed?” without downloading it again. If the file has not changed, the server responds with a
304 Not Modifiedstatus, and the browser uses its cached copy.
What should be cached and for how long
Static assets like CSS, JavaScript, images, and fonts rarely change. These should have long cache lifetimes (months to a year). When you update them, cache-busting techniques — like adding a version query string (style.css?v=2.1) or changing the filename — ensure browsers fetch the new version.
HTML pages should generally have short cache lifetimes or none at all, since their content changes more often. Page caching handles the server-side equivalent of this, but the browser itself should check for fresh HTML on each visit.
Common issues with browser caching
The most frequent problem is missing cache headers entirely. WordPress itself does not set cache headers for static files — that responsibility falls to the web server configuration or a caching plugin. Many hosting environments leave this unconfigured by default, meaning every visit re-downloads every asset.
The opposite problem — overly aggressive caching — causes visitors to see stale CSS or JavaScript after a site update. This is why cache-busting strategies matter: they let you set long cache lifetimes without worrying about serving outdated files.
Tools That Can Help
WP Rocket automatically sets browser cache headers for static assets. LiteSpeed Cache includes browser caching controls as part of its broader caching suite. Most CDN services like Cloudflare also manage browser cache headers at the edge.
Further Reading
- Prevent unnecessary network requests with the HTTP Cache (web.dev) — Google’s guide to HTTP caching headers and strategies.