304 Not Modified vs From disk cache — what's the difference?

304: browser sent a conditional request (If-Modified-Since / If-None-Match), server replied "unchanged"; browser uses cached body. From disk cache: browser used cached body without contacting server at all (because Cache-Control max-age wasn't exceeded). 304 = network round-trip; From cache = no network. From cache is faster.

Why does the same URL show "From memory cache" vs "From disk cache"?

Both are local cache, just different storage tiers. Memory cache holds very recently used resources; disk cache survives browser restart. Memory cache is faster but small. Browser decides which based on usage patterns. From user perspective: both are "cached, no network used."

Disable cache checkbox in DevTools — when to use?

During development — forces browser to fetch every request fresh, ignoring Cache-Control. Useful for verifying server returns updated content. Toggle off for production-like testing where you want to see real caching behavior. Only affects browser while DevTools is open.

How to see if a Cache-Control change took effect?

Hard refresh (Ctrl+Shift+R) to invalidate all caching, reload normally, inspect the Response Headers in Network tab. Should see new Cache-Control value. If still old, server didn't apply your config change — check Apache/nginx reload, verify the right vhost is being hit.

Inspecting Cache-Control: max-age in Browser Developer Tools

3 min read

15.09.2025

The Cache-Control: max-age directive tells the browser and caching mechanisms how long a resource should be considered fresh. Using browser developer tools, you can easily inspect and verify the behavior of the Cache-Control header for debugging or performance optimization.

Inspect Cache-Control DevTools — DevTools → Network → click request → Headers tab; Cache-Control there.

For the broader Cache-Control cluster, see Cache-Control: max-age — Complete Guide, max-age for Static Assets, and max-age with public.

Open Developer Tools

Open your browser.
Access Developer Tools:
- Google Chrome / Microsoft Edge: Press F12 or Ctrl + Shift + I (Windows/Linux), or Cmd + Option + I (Mac).
- Mozilla Firefox: Press F12 or Ctrl + Shift + I (Windows/Linux), or Cmd + Option + I (Mac).
- Safari: Enable Developer Tools in Preferences > Advanced, then press Cmd + Option + I.

Inspect Network Activity

Go to the Network Tab

In Developer Tools, click on the Network tab.

Reload the Page

Reload the page (F5 or Ctrl + R) to capture network activity.
Ensure Disable Cache (available in the Network tab) is unchecked to see cached responses.

Filter or Search for a Resource

Use the filter bar to narrow down specific resources like CSS, JS, images, or API calls.

Check Cache-Control in Response Headers

Select a Resource

Click on any resource in the Network tab to inspect its details.

View the Headers

In the right-hand pane, click on the Headers tab.
Look under Response Headers for the Cache-Control header.

Example:

Cache-Control: max-age=3600, public

Observe Cache Behavior

Check Status Code:
- 200 OK: Indicates a fresh resource served from the server or CDN.
- 304 Not Modified: Indicates the resource was served from the cache after revalidation.
Size: Resources served from the cache will display (from disk cache) or (from memory cache) in the Size column.

Interpreting Cache-Control: max-age

Headers You Might See

Cache with max-age:

Cache-Control: max-age=3600, public

The resource is cacheable for 3600 seconds (1 hour).

No Cache:

Cache-Control: max-age=0, no-cache

The resource is cached but must be revalidated before use.

No Store:

Cache-Control: no-store

The resource is not cached and must be fetched directly from the server.

Immutable Resource:

Cache-Control: max-age=31536000, public, immutable

The resource is cached for 1 year and will not be revalidated during this time.

Tips for Testing Cache Behavior

Force Reload: Perform a "hard refresh" to bypass the cache:
- Windows/Linux: Ctrl + Shift + R.
- Mac: Cmd + Shift + R.
Simulate Cache Expiry: Wait for the max-age duration to expire, then reload the page to observe revalidation.
Disable Cache: In the Network tab, check Disable Cache to force resources to load directly from the server.

Best Practices for Debugging Cache-Control

Ensure Correct Headers: Use the Headers tab to verify that Cache-Control is set correctly.
Monitor Response Codes: Look for 304 Not Modified to ensure proper cache revalidation.
Test Across Browsers: Check caching behavior in multiple browsers, as implementations may vary slightly.
Combine with Performance Tools: Use tools like Google Lighthouse or WebPageTest for caching analysis.

By leveraging browser developer tools, you can efficiently analyze and fine-tune your cache behavior for optimal performance and reliability.

Inspecting Cache-Control: max-age in Browser Developer Tools

Open Developer Tools

Inspect Network Activity

Go to the Network Tab

Reload the Page

Filter or Search for a Resource

Check Cache-Control in Response Headers

Select a Resource

View the Headers

Observe Cache Behavior

Interpreting Cache-Control: max-age

Tips for Testing Cache Behavior

Best Practices for Debugging Cache-Control

Hosting

Cloud Solutions

For You

VDS

Website Builders

Our services

Client Area

Inspecting Cache-Control: max-age in Browser Developer Tools

Open Developer Tools

Inspect Network Activity

Go to the Network Tab

Reload the Page

Filter or Search for a Resource

Check Cache-Control in Response Headers

Select a Resource

View the Headers

Observe Cache Behavior

Interpreting Cache-Control: max-age

Tips for Testing Cache Behavior

Best Practices for Debugging Cache-Control

Hosting

Cloud Solutions

For You

VDS

Website Builders

Our services

Client Area

Выберите валюту