Stop 16 · PerformanceTopics · 8/13

Caching

In short

The fastest request is the one you never make. Good caching means returning visitors load your site almost instantly, and your server handles far fewer requests.

Using HTTP cache headers, service workers, or in-app caching to avoid redundant network requests and speed up repeat visits.

The jaadu on a hostel bed holds a masala sachet while sniffing a milk carton to check it.

Think of it like this

Keeping masala in your room

You keep a packet of Maggi masala in your hostel room instead of walking to the shop every time. But you check the date on the milk before using it. Cache-Control headers tell the browser which things to keep and when to check freshness.

Watch it happen

A repeat visit, two kinds of file

Browser

Cache

Server

app.3f9a.js?

1/6The browser checks its cache for the hashed JS file first.

The big ideas

What you need to know

Hashed files: cache for a year

Files like app.3f9a1c.js never change under the same name, so they can be cached with immutable.

HTML: always check

no-cache doesn't mean 'don't store'. It means 'check with the server before using', so users get new deploys.

stale-while-revalidate

Serve the cached copy instantly, then fetch a fresh one in the background for next time.

Never cache private data publicly

Use no-store for sensitive responses like bank details, so nothing is saved on shared computers or proxies.

See it in code

Walk through the code

http

1# Hashed JS/CSS/images: keep for a year, never re-check2Cache-Control: public, max-age=31536000, immutable3 4# HTML pages: store, but check with the server every time5Cache-Control: no-cache6 7# API data that can be a little old: fresh for 60s,8# then serve stale for up to 5 min while refetching9Cache-Control: max-age=60, stale-while-revalidate=30010 11# Sensitive, per-user data: never store12Cache-Control: no-store

1/4Hashed files never change under the same name, so cache them for a year.

31536000 seconds is one year. A 304 response has no body, so revalidating is much cheaper than downloading again.

Save yourself the pain

Common mistakes

Oops

Caching index.html for a long time.

Do this instead

Then users won't see new deploys. Cache HTML with no-cache and let hashed assets carry the long cache.

Oops

Putting long max-age on files without a hash in the name, like /app.js.

Do this instead

Users get stuck with old code. Long caching is safe only for content-hashed filenames.

Your mission

Read real cache headers

~15 min

Quick check

What does Cache-Control: no-cache actually mean?

Go deeper

1Set proper `Cache-Control` headers on static assets in a project.
2Learn the difference between `no-cache`, `no-store` and `max-age`.
3Explore how a service worker can cache assets for offline or fast repeat loads.