What Is Browser Caching and How Does It Speed Up Your Website?

Every time someone visits a web page, their browser downloads the files needed to display it — HTML, CSS, JavaScript, images, fonts, and more. On a first visit, all of these files must be fetched from the server. But if nothing has changed since the last visit, downloading them again is wasted effort. Browser caching solves this by storing copies of these files on the visitor's device so they can be reused on subsequent visits.

When caching is configured correctly, a returning visitor's browser can load most of your site's assets from local storage without making a network request at all. This makes repeat visits dramatically faster, reduces server load, and can improve Core Web Vitals scores — particularly for returning visitors who make up a significant portion of traffic for most businesses.

How Browser Caching Works

Caching is controlled via HTTP response headers that your server sends along with each file. The most important are Cache-Control and Expires. Cache-Control: max-age=31536000 tells the browser it can use its cached copy of a file for up to one year without checking with the server. Expires sets an absolute date and time after which the file should be re-fetched.

When a cached file expires, the browser does not necessarily re-download it. Instead, it sends a conditional request to the server — essentially asking whether the file has changed since the cached version was stored. The server checks the file's ETag (a unique identifier based on file content) or Last-Modified date. If unchanged, it returns a 304 Not Modified response, and the browser uses its cached copy. Only if the file has changed does the browser download a new version.

What to Cache and for How Long

Static assets that rarely change — fonts, logo images, framework CSS and JavaScript — can safely be cached for very long periods, often a year or more. Versioning or cache-busting (adding a query string or version hash to filenames such as style.v3.css) ensures that when these files do change, visitors automatically download the new version rather than using a stale cache.

HTML pages should usually be cached for shorter periods, or not cached at all if they contain dynamic or personalised content. CSS and JavaScript specific to your site's design should be cached with version hashing in place. User-uploaded images and media can be cached for long periods since URLs typically change when the file is replaced.

How to Configure Browser Caching

On Apache web servers, cache headers can be set in your .htaccess file using the mod_expires or mod_headers directives. On Nginx, the expires directive in the server configuration achieves the same result. Most managed hosting control panels and caching plugins for CMS platforms include settings to configure caching headers without direct server access.

In Google PageSpeed Insights, the "Serve static assets with an efficient cache policy" audit lists all assets that are either uncached or cached for too short a period. Use this report to identify quick wins. If you are using a CDN, its caching rules interact with your origin cache headers — ensure the CDN is configured to respect your origin headers or set appropriate edge cache TTLs in the CDN control panel.