Browser Caching
Browser caching is when a web browser saves copies of a site’s files, such as images, stylesheets and scripts, on the visitor’s device so it does not need to download them again on the next page or visit. The server controls this through HTTP cache headers.
How browser caching works
When a server sends a file, it can include headers telling the browser how long the file stays fresh. The main one is Cache-Control. For example, Cache-Control: max-age=31536000 tells the browser it can reuse the file for a year without asking again. When the time runs out, the browser can check whether the file has changed using validators such as ETag or Last-Modified. If nothing has changed, the server replies with a short 304 Not Modified response instead of sending the whole file again. These response codes are covered in more detail under HTTP status codes.
Why it matters for SEO
Browser caching mainly speeds up the second page a visitor views and any return visits. Shared files like the logo, fonts, CSS and JavaScript load instantly from the device. This improves page speed as people move around the site.
Faster navigation supports engagement and the real-user data behind Core Web Vitals. It also lowers server load. Googlebot handles caching differently from a normal browser, so caching is mainly about user experience rather than crawling.
Sensible cache settings
| File type | Typical approach |
|---|---|
| Versioned CSS and JavaScript (file name changes when updated) | Cache for a year, often with immutable |
| Images, fonts and icons | Cache for months to a year |
| HTML pages | Short or no browser caching, with revalidation, so updates appear quickly |
| Personal pages such as basket or account | no-store or private, never shared |
How to set up and check caching
- Run a page through PageSpeed Insights or Lighthouse and look for the warning about inefficient cache lifetimes on static assets.
- Set cache headers in your server configuration, hosting control panel or a caching plugin.
- Use file versioning, such as adding a hash to file names, so long cache times do not trap users on old files after an update.
- Check headers in browser developer tools under the Network tab.
- If you use a CDN, make sure its edge caching and browser cache rules work together.
Common mistakes
- Caching HTML for a long time, so visitors see outdated prices or content.
- Setting long cache times without versioning, so CSS fixes do not reach users.
- Confusing browser caching with server-side page caching, which speeds up the first visit by reducing Time to First Byte.
- Allowing personal pages to be cached by shared proxies.
- Testing only in a browser that already has files cached, which hides how slow a first visit really is. Use a private window or disable the cache in developer tools.
Further reading: MDN’s guide to HTTP caching.
Key Takeaways
- Browser caching stores files on the visitor’s device for reuse.
- Cache-Control headers set how long each file stays fresh.
- It mainly speeds up repeat visits and later page views.
- Static files can be cached for a long time if their names are versioned.
- HTML and personal pages need short or no caching.
Related Terms
Want to know where your site stands? Book a free SEO health check, or keep learning in the SEO Encyclopedia.