Browser Caching Explained for Website Owners

When someone visits your website, their browser downloads many files: images, stylesheets, scripts, and fonts. Browser caching lets the browser keep copies of some of these files, so on the next page or the next visit it can reuse them instead of downloading them again. This makes repeat views much faster and reduces load on your server.

How caching works

When your server sends a file, it also sends instructions in HTTP headers that say how long the file may be stored. If the browser already has a fresh copy, it uses it. If the copy has expired, the browser may check with the server to see whether anything changed.

The most important header is Cache-Control. For example, Cache-Control: max-age=31536000 tells browsers they can reuse a file for a year.

What to cache

Files that rarely change are ideal:

• Images and logos
• Fonts
• Stylesheets and scripts that are versioned

HTML pages usually change more often, so they get shorter lifetimes or are checked with the server each time.

The versioning trick

Long cache times create a problem: if you update a file, returning visitors may keep seeing the old one. The fix is to change the file name whenever its content changes, for instance site.3f9a1c.css. The new name is treated as a new file, while unchanged files stay cached. Many build tools and platforms do this automatically.

How to set it up

• Website builders and managed hosts often set sensible cache rules for you.
• WordPress and similar systems can use caching plugins, which handle both browser caching and page caching.
• Custom servers can configure headers in the server settings or a configuration file. Your host's documentation will explain how.

Browser cache versus server and CDN caches

Browser caching stores files on the visitor's device. Server caching and CDNs store copies on the server side or at network locations. They work together, and each has its own rules, so clear the right cache after changes.

Check it is working

Run a test with PageSpeed Insights, which flags files with inefficient cache policies. See how to test website speed. Browser developer tools also show cache headers in the Network panel.

Watch out for mistakes

• Setting very long lifetimes on files that change without renaming them
• Caching private or personalized pages, which can expose information to other users
• Forgetting to clear caches after an update

Part of a bigger plan

Caching works best alongside image optimization and minified code. Our full checklist is in how to reduce website load time.

The bottom line

Cache static files for a long time, version them when they change, and be careful with dynamic pages. Returning visitors will feel the difference.