Have you ever noticed that a website feels slow the first time you open it—but loads almost instantly the second time?
That speed boost isn’t accidental. It’s not better internet. And it’s definitely not magic.
It’s HTTP caching.
If you’re learning web development, caching might sound like one of those “advanced topics” people avoid explaining clearly. But the truth is—HTTP caching is simple once you see it through real-world examples.
What is HTTP Caching?
The HTTP cache stores a response associated with a request and reuses the stored response for subsequent requests.
There are several advantages to reusability. First, since there is no need to deliver the request to the origin server, then the closer the client and cache are, the faster the response will be. The most typical example is when the browser itself stores a cache for browser requests.
Also, when a response is reusable, the origin server does not need to process the request — so it does not need to parse and route the request, restore the session based on the cookie, query the DB for results, or render the template engine. That reduces the load on the server.
Real-World Analogy
Think of caching like saving a phone number:
First time → ask someone
Next time → use saved contact
If number changes → update contact
Simple, right?
Purpose
Speed Improvement
Reduces load times by serving cached resources quickly.
Reduced Traffic
Reduces the amount of data transmitted over the network.
Reduced Server Load
Lessens the burden on origin servers by serving cached content.
Improved Availability
Increases resilience against network issues by providing local copies of resources.
Faster Load Times
Cached resources are served more quickly than fetching them from the origin server.
Lower Latency
Reduces the time taken for requests to travel across the network.
Real-World Analogy
It’s like taking a shortcut you already know instead of asking for directions every time.
Resources
1. Static Assets
- CSS
- JavaScript files
- Images
- Fonts
- HTML pages
2. API Responses
Real-World Analogy
Static assets are like printed brochures — once created, they don’t change often, so keeping copies nearby makes sense.
HTTP Headers
Caching behavior is controlled using HTTP headers sent by the server.
Cache-Control
The Cache-Control HTTP header field holds directives (instructions) — in both requests and responses — that control caching in browsers and shared caches.
Directives
1. public
The public directive means any cache can store the resource.
Analogy: A public notice board — anyone can read and copy it.
2. private
A response with a private directive can only be cached by the client and never by an intermediary agent, such as a CDN or a proxy.
These are often resources containing private data, such as a website displaying a user’s personal information.
Analogy: Your personal diary — only you should keep a copy.
3. max-age=seconds
Specifies the maximum amount of time a resource is considered valid. After this period, the resource must be fetched again.
Analogy: Food expiry date — it’s good until a certain time.
4. no-store
A response with a no-store directive cannot be cached anywhere, ever. Every request must go to the origin server.
Analogy: ATM PIN — never write it down.
5. no-cache
Forces caches to submit the request to the origin server for validation before releasing a cached copy.
Validation is typically done using ETag. If the token matches, cached data is reused; otherwise, new data is fetched.
Analogy: Checking if today’s news is still valid before sharing it.
6. must-revalidate
Indicates that the cache must verify the status of stale resources before using them. Expired resources should not be used.
Analogy: Checking your ID expiration before traveling.
Example Usage
res.setHeader('Cache-Control', 'public, max-age=86400');
Expires
The Expires HTTP header contains the date/time after which the response is considered expired.
res.setHeader('Expires', 'Sat, 23 Dec 2023 11:20:39 GMT');
Analogy: A coupon with a fixed expiry date.
Last-Modified
The Last-Modified response HTTP header contains a date and time when the origin server believes the resource was last modified.
It is used as a validator to determine if the resource is the same as the previously stored one.
res.setHeader('Last-Modified', 'Sat, 23 Dec 2023 11:20:39 GMT');
Analogy: “Last updated on” timestamp in a document.
ETag
ETag headers identify whether the version of a resource cached in the browser is the same as the resource at the web server.
A visitor’s browser stores ETags. When the visitor revisits the site, the browser compares each ETag.
Matching values cause a 304 Not Modified HTTP response.
res.setHeader('ETag', 'dj3958ehcxvj69237dh59');
Analogy: File checksum — if it matches, the file hasn’t changed.
How to Avoid Resources Being Fetched from Cache
Cache Busting
Change the resource URL whenever the content changes.
image.gif?hash=abcdef
no-store
Prevents caching entirely.
max-age=0
Indicates the resource is stale immediately.
Real-World Analogy
Changing a file name so everyone downloads the new version instead of using the old one.
Key Takeaways
- HTTP caching reuses responses to improve performance
- Reduces network traffic and server load
- Controlled using HTTP headers
- Cache-Control is the most important header
- ETag and Last-Modified enable efficient validation
- Cache busting forces fresh content when required
Top comments (0)