This tutorial explains how you can configure Nginx to set the Expires HTTP header and the max-age directive of the Cache-Control HTTP header of static files (such as images, CSS and Javascript files) to a date in the future so that these files will be cached by your visitors’ browsers. This saves bandwidth and makes your web site appear faster (if a user visits your site for the second time, static files will be fetched from the browser cache).
The Expires HTTP header can be set with the help of the expires directive which can be placed in inside http {}, server {}, location {}, or an if statement inside a location {} block. Usually, you will use it in a location block for your static files, e.g. as follows:
location ~* ^.+\.(ico|css|js|gif|jpe?g|png|woff|woff2|eot|svg|ttf|)$ { expires 30d; add_header Pragma public; add_header Cache-Control "public"; }
In the above example, all ico, .css, .js, .gif, .jpg, .jpeg, .png, .woff, .woff2, .eot, .svg and .ttf files get an Expires header with a date 30 days in the future from the browser access time. Therefore, you should make sure that the location {} block really only contain static files that can be cached by browsers
Reload Nginx after your changes:
/etc/init.d/nginx reload
You can use the following time settings with the expires directive:
- off makes that the Expires and Cache-Control headers will not be modified.
- epoch sets the Expires header to 1 January, 1970 00:00:01 GMT.
- max sets the Expires header to 31 December 2037 23:59:59 GMT, and the Cache-Control max-age to 10 years.
- A time without an @ prefix means an expiry time relative to the browser access time. A negative time can be specified, which sets the Cache-Control header to no-cache. Example: expires 10d; or expires 14w3d;
- A time with an @ prefix specifies an absolute time-of-day expiry, written in either the form Hh or Hh:Mm, where H ranges from 0 to 24, and M ranges from 0 to 59. Exmaple: expires @15:34;
You can use the following time units:
- ms: milliseconds
- s: seconds
- m: minutes
- h: hours
- d: days
- w: weeks
- M: months (30 days)
- y: years (365 days)
Leave a Reply