Master Browser Cache: Using Expires, max-age, ETag to Speed Up Web Pages

What is cache?

Browser caching stores recently requested documents on the user's disk so that subsequent requests can be served from the local cache, speeding up page loading.

Purpose of cache

1. Reduce latency, making the website faster and improving user experience. 2. Avoid network congestion, reduce request volume and outbound bandwidth.

Page content cache strategies

In our business, JS, CSS, static files and images are placed on an imgcache domain. Operations staff set cache policies via Apache. The key HTTP response headers are Expires and Cache-Control . Expires defines an object’s validity period (HTTP/1.0). max-age is a Cache-Control directive that specifies the object's age in seconds (HTTP/1.1) and takes precedence over Expires.

Cache-Control max-age and Last-Modified (If-Modified-Since)

This strategy combines max-age with a validation token Last-Modified . The server sends a Last-Modified timestamp (e.g., Last-Modified: Thu, 08 Apr 2010 15:01:08 GMT). When the cached object expires, the browser includes If-Modified-Since in the request; the server replies with 304 if the resource has not changed, allowing the browser to reuse the cached copy.

Step-by-step example (JS file):

Browser requests http://imgcache.qq.com/paipai/cos/portal/js/spu.js for the first time.

No cache found, request goes to the web server.

Server responds with Cache-Control: max-age=600 and Last-Modified: Wed, 29 Sep 2010 09:59:03 GMT.

Browser caches the response using the URL as the key.

Second request within 10 minutes: browser finds cached entry, max-age not expired, serves from cache (HTTP status “Cache”).

Third request after >10 minutes: max-age expired, browser sends If-Modified-Since. If the resource unchanged, server returns 304; otherwise 200 with new content.

Only max-age

Simple strategy: set Cache-Control: max-age=[seconds]. Example max-age=1800 caches the response for 30 minutes.

Step-by-step example (CSS file):

Browser requests http://imgcache.qq.com/qqshow_v3/css/index_.css.

No cache, request goes to server.

Server responds with Cache-Control: max-age=3600.

Browser caches the response.

Subsequent request within 60 minutes: served from cache. After 60 minutes: cache expired, browser fetches a fresh copy.

max-age with ETag

ETag provides a developer-defined validator (e.g., ETag: "12345678"). Combined with max-age, it enables conditional requests using If-None-Match. If the ETag matches, the server returns 304; otherwise 200 with the new content.

Step-by-step example (CSS file):

Initial request, server responds with Cache-Control: max-age=3600 and ETag: "12345678".

Browser caches the response.

Within 60 minutes, cache is fresh and served directly.

After 60 minutes, browser sends If-None-Match: "12345678". Server returns 304 if unchanged, otherwise 200.

Current business cache policies

JS files: typical cache 10 minutes ( max-age=600); analytics or test scripts may be cached for a year ( max-age=31536000).

CSS files: frequently changed CSS cached for 1 hour ( max-age=3600); shared libraries cached for a year.

Images: frequently updated images cached for 1 hour; static public images cached for a year.

Static/dynamic files: generally cached for 1 hour.

CGI/PHP: usually 1 hour; dynamic content like inventory should not be cached.

Minimize 304 responses where possible.