(function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:3011767,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.defer=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

Browser Caching Explained (Beginner’s Guide – 2025)

Published on April 22, 2025
Last Updated on June 27, 2025

Written by

Morgan Frank - Specialist in Page Speed

Key Takeaways

  • Browser caching allows the browser to store copies of website files locally, reducing the need to download them repeatedly.
  • HTTP caching headers (like Cache-Control, Expires, ETag, Last-Modified) control how caching works.
  • Use long max-age values for static assets and versioning/fingerprinting to ensure updates are fetched.
  • Use Cache-Control: no-cache for HTML to ensure users always get the latest content.
  • Configure caching headers on your web server (Apache, Nginx, etc.).
  • CDNs automatically handle caching and improve performance.

Imagine visiting a library, finding a book you like, and then having to return it to the same librarian every single time you want to look at a page.

That’s what it’s like for a browser to download the same website files (images, CSS, JavaScript) every time a user visits a page, without browser caching.

Browser caching is a technique that allows the browser to store copies of website files locally (on the user’s computer or device) so that it doesn’t have to download them again on subsequent visits.

This significantly speeds up page load times, especially for repeat visitors. It’s like taking the library book home with you – you can read it whenever you want without going back to the library.

advance pagespeed optimization with caching and without caching

How Browser Caching Works

1. First Visit: When a user visits your website for the first time, their browser downloads all the necessary files (HTML, CSS, JavaScript, images, etc.) from your server.

2. Caching Headers: Your server sends these files along with HTTP caching headers. These headers are instructions that tell the browser how long to store the files in its cache.

3. Local Storage: The browser stores the files in its cache, according to the instructions in the caching headers.

4. Subsequent Visits: When the user visits your website again (or another page on your website that uses the same files), the browser checks its cache first.

  • If the files are in the cache and they haven’t expired (according to the caching headers), the browser loads them from the cache instead of downloading them from the server again. This is much faster.
  • If the files are not in the cache or they have expired, the browser downloads them from the server again (and updates its cache).

HTTP Caching Headers: The Instructions

The key to browser caching is using the correct HTTP caching headers. These headers are part of the HTTP response that your server sends along with the files. Here are the most important ones:

1. Cache-Control: This is the most important caching header. It provides a variety of directives to control caching behavior. Common directives include:

  • Public: The response can be cached by any cache (browser, proxy, CDN).
  • Private: The response is intended for a single user and should not be cached by shared caches (like a CDN).
  • No-Cache: The browser must revalidate the cached file with the server every time before using it (more on revalidation below).
  • No-Store: The response should not be cached at all.
  • Max-Age=: Specifies how long (in seconds) the file can be cached before it’s considered stale. For example, max-age=31536000 (one year).
  • S-Maxage=: Similar to max-age, but applies only to shared caches (like a CDN).

2. Expires: An older header that specifies an absolute date and time when the cached file should expire. Cache-Control: max-age is generally preferred over Expires.

3. ETag (Entity Tag): A unique identifier (usually a hash) for a specific version of a file. The browser can use the ETag to revalidate a cached file with the server (see below).

4. Last-Modified: Indicates the date and time when the file was last modified. The browser can also use this for revalidation.

http caching headers

Revalidation: Checking for Updates

Even with caching, the browser needs a way to check if a cached file is still valid (i.e., if it hasn’t been updated on the server). This is called revalidation.

1. Conditional Request: When a cached file is about to be used, the browser sends a conditional request to the server. This request includes headers like:

  • If-None-Match: Contains the ETag of the cached file.
  • If-Modified-Since: Contains the Last-Modified date of the cached file.

2. Server Response:

  • 304 Not Modified: If the file on the server hasn’t changed (the ETag matches or the file hasn’t been modified since the Last-Modified date), the server sends a 304 Not Modified response. This tells the browser that the cached file is still valid and can be used. No file data is transferred, which is very efficient.
  • 200 OK: If the file on the server has changed, the server sends a 200 OK response with the new version of the file (and new caching headers).
server response in caching

Best Practices for Browser Caching

1. Use Long max-age Values for Static Assets: For files that rarely change (like images, CSS, JavaScript), use a long max-age value (e.g., one year: Cache Control: max-age=31536000, public). This minimizes the need for revalidation.

2. Use Versioning/Fingerprinting for Static Assets: To ensure that browsers always get the latest version of your files when they do change, use versioning or fingerprinting. This involves adding a unique identifier (like a version number or a hash) to the filename (e.g., style.css?v=1.2.3 or style-f78a4b.css). When you update the file, you change the identifier, forcing the browser to download the new version.

3. Use Cache-Control: no-cache for HTML: For your HTML files, it’s generally best to use Cache-Control: no-cache. This ensures that the browser always revalidates the HTML with the server, so users always get the latest content. You can still cache the resources linked from the HTML (CSS, JavaScript, images) with long max-age values.

4. Configure Caching Headers on Your Server: How you configure caching headers depends on your web server:

  • Apache: Use the mod_expires and mod_headers modules. You’ll typically configure this in your .htaccess file or your Apache configuration file.
  • Nginx: Use the expires and add_header directives. Configure this in your Nginx configuration file.
  • Other Servers: Consult your server’s documentation.

5. Use a CDN: CDNs automatically handle browser caching for you, and they often have more sophisticated caching mechanisms.

Conclusion

Browser caching is a fundamental and highly effective technique for improving website performance, especially for repeat visitors. By leveraging caching headers correctly, you can significantly reduce page load times, improve the user experience, and reduce the load on your server. It’s a relatively simple optimization to implement, but the benefits are substantial.

Shakeeb Sadikeen

The expert that experts learn from

About Author

Determined to change that, he built RapidLoad — a smart, AI-driven tool that empowers site owners to dramatically improve speed scores, enhance user experience, and meet Google’s Core Web Vitals without needing to touch a single line of code.
Check out the about page
Connect with Shakeeb Sadikeen

Table of content