Eliminate Unnecessary CSS Requests with Nginx Expires Configuration

When a page includes a static CSS file (s.css), the browser initially makes two requests (page.html and s.css) and receives 200 responses.

On subsequent visits, the browser still sends two requests but receives a 304 Not Modified response, indicating it used its local cache after confirming the file hasn't changed.

To avoid even the 304 request, the server can set an expiration time for the resource so the browser knows it can use its cached copy without contacting the server.

By adding an location ~ .*\.css$ { expires 2d; } directive for CSS files in Nginx, the browser will consider the CSS valid for two days. After clearing the browser cache and loading the page once (receiving 200), subsequent loads only request page.html, and the CSS is served from the cache.

The expires directive controls the HTTP response headers “Expires” and “Cache‑Control”. Syntax: expires [time|epoch|max|pff]. Default is off. time can be positive or negative, setting Expires to current time plus the given value. epoch sets Expires to 1 January 1970 00:00:01 GMT. max sets Expires to 31 December 2037 23:59:59 GMT and Cache‑Control to ten years.