How does caching improve performance?

The short answer

Caching stores copies of resources so they do not need to be fetched from the server every time. This reduces network requests, speeds up page loads, and lowers server load. There are multiple levels of caching — browser cache, CDN cache, service worker cache, and API response caching.

Browser caching (HTTP cache)

When the browser fetches a resource, the server can include headers that tell the browser to cache it:

Copy
Cache-Control: public, max-age=86400

This tells the browser to keep the resource for 24 hours (86400 seconds). During that time, the browser uses the cached copy without making a network request.

Common Cache-Control values:

• max-age=3600 — Cache for 1 hour
• no-cache — Always check with the server before using the cached copy (uses ETags)
• no-store — Never cache this resource at all
• public — Can be cached by browsers and CDNs
• private — Can only be cached by the browser, not shared caches
• immutable — The resource will never change (used with hashed filenames)

Cache-busting with hashed filenames:

Copy
<!-- The hash changes when the file content changes -->
<script src="/app.a1b2c3.js"></script>

You can set max-age to a very long time because if the file changes, it gets a new hash and a new URL. The browser treats it as a completely new resource.

ETags and conditional requests

ETags let the server tell the browser "use your cached copy if it has not changed":

Copy
// First request — server responds with ETag
HTTP/1.1 200 OK
ETag: "abc123"
// Second request — browser sends the ETag
GET /api/data
If-None-Match: "abc123"
// If data hasn't changed — server responds with 304
HTTP/1.1 304 Not Modified
// Browser uses its cached copy

This saves bandwidth because the server does not send the body again, just a small 304 response.

Service worker caching

Service workers let you control caching with JavaScript. You can cache resources during installation and serve them even when the user is offline:

Copy
// Cache resources during install
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/app.js',
        '/styles.css',
      ]);
    })
  );
});
// Serve from cache, fall back to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

In-memory caching (application level)

Caching data in your application to avoid repeated API calls:

Copy
const cache = new Map();
async function getUser(id) {
  if (cache.has(id)) {
    return cache.get(id);
  }
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  cache.set(id, user);
  return user;
}

React libraries like React Query and SWR handle this automatically — they cache API responses and serve stale data while revalidating in the background.

Why interviewers ask this

Caching is one of the most effective ways to improve performance. Interviewers ask about it to see if you understand HTTP caching headers, if you know the different layers of caching, and if you can make smart decisions about what to cache and for how long.