max-age = N
: This directive is your key to keeping your cached content fresh. It controls how long the response data remains fresh after it's generated.
In the context of HTTP caching, understanding max-age is crucial. When you define max-age=N, you're essentially specifying how long the response data will stay fresh after it's been generated by the origin server. In simpler terms, it means the data remains valid and can be used from the cache for up to N seconds from the moment it was first created by the server. This helps ensure that users receive up-to-date content while minimizing the need to re-fetch data from the server.
max-age = N
, it means the response data remains fresh until N seconds after it's generated.In the context of browser caching, freshness is a measure of how long a cached response remains valid and up-to-date. It's determined by the max-age header in the HTTP response, which sets the maximum time a response can be considered fresh. If the response's current-age hasn't exceeded this freshness-lifetime, the data is still considered fresh and can be used from the cache.
max-age
header set to max-age=600
. This means that the cached data remains fresh until it's 10 minutes old.current-age
has not exceeded its freshness-lifetime
, which, in this case, is the 600-second value we assigned to max-age
. You can visualize this freshness using the following formula:When a request is made for a resource, it may pass through one or more intermediate caches (e.g., caching proxies, CDNs) before reaching the client. Each of these intermediaries may store a cached copy of the resource. As the response passes through each intermediary, the Age header is incremented to reflect the time spent in that cache.
Age
header comes into play.Age
header value represents the time the response spent at each step in this journey.Age
header value of 0 typically indicates that the content was retrieved directly from the origin server.response_is_fresh = (freshness_lifetime > current_age)
Now that we've explained max-age
, let's view a sample request-response cycle involving this header:
request: GET /script-v1.js, GET /styles-v1.css, GET /cats-v1.jpg