Developers often struggle with a common issue: “I updated the site, but the old version keeps showing.” In nearly all cases, the cause is the browser’s caching system.
This article explains strong cache, weak cache, ETag, and Last-Modified in a practical way, and covers why updates don’t appear and how to reliably fix cache-related issues.
What Is a Browser Cache?
A browser cache stores copies of website data (HTML, CSS, JS, images) to speed up loading and reduce data usage.
Major benefits include:
- Faster page load times
- Reduced server requests
- Lower data usage
But the same mechanism often causes the infamous problem: changes don’t update because the browser is still using old files.
Two Types of Browser Cache: Strong Cache and Weak Cache
Browser caching is not one mechanism — it has two levels.
① Strong Cache (No server request until it expires)
With strong cache, the browser does not contact the server at all. It uses stored files directly, making this the #1 cause of “updates not showing.”
Triggered by headers like:
Cache-Control: max-age=◯◯Expires: ◯◯
If max-age=31536000 (1 year) is set, CSS or JS may stay cached
for an entire year.
② Weak Cache (Browser checks with server)
Weak cache verifies whether cached data is still valid by making a lightweight request.
It uses headers such as:
ETagIf-None-MatchLast-ModifiedIf-Modified-Since
If the server replies with 304 Not Modified, the cached version is reused.
Why Updates Don’t Show
This is the most common problem for site owners:
“I updated my CSS/JS, but the browser keeps using the old version.”
Reason 1: Strong cache is set too long
CDNs often apply long-lived strong cache headers.
Reason 2: The file name hasn’t changed
Browsers assume same URL = same file.
So style.css may never update.
Reason 3: No version query is used
Without versioning like ?v=123, browsers won’t reload the latest file.
How to Ensure Cache Updates Apply Correctly
① Add version parameters (most reliable)
style.css?v=20260202If the URL changes, Chrome and Safari must fetch the new file.
② Change the actual file name
style.abc123.cssBuild tools like Vite/Webpack use this technique.
③ Use shorter Cache-Control for frequently updated files
Cache-Control: no-cacheThis forces the browser to revalidate with the server.
Differences Between Browsers
Safari (iPhone)
- Strong caching is very aggressive
- Back/Forward Cache (BFCache) is strong
- Most likely to show outdated versions
Chrome (Android / Desktop)
- ETag handling is stable
- Cache behavior is predictable
Firefox
- ETag is applied more strictly
- Disabling cache during development is essential
Best Practices to Avoid Cache Problems
- Always version CSS/JS files
- Use short Cache-Control for frequently updated assets
- Be cautious when using PWA + Service Worker
- Understand your CDN’s caching policies
- Suggest “Hard Reload” to users after major updates
Summary
- Browser cache speeds up loading by storing local copies
- Strong and weak caching determine update behavior
- Updates don’t show because the URL stays the same
- Versioning files is the safest and most reliable solution
Caching is powerful but can cause frustrating issues if misunderstood. By learning how strong/weak caches work, you can prevent stale content and ensure your updates appear instantly.
