Browser-Cache für statische Dateien in nginx aktivieren

Dieses Tutorial erklärt, wie Sie nginx konfigurieren können, um den Expires HTTP-Header und die max-age-Direktive des Cache-Control HTTP-Headers für statische Dateien (wie Bilder, CSS- und Javascript-Dateien) auf ein Datum in der Zukunft zu setzen, damit diese Dateien von den Browsern Ihrer Besucher zwischengespeichert werden. Dies spart Bandbreite und lässt Ihre Website schneller erscheinen (wenn ein Benutzer Ihre Seite ein zweites Mal besucht, werden statische Dateien aus dem Browser-Cache geladen).

Ich übernehme keine Garantie, dass dies bei Ihnen funktioniert!

1 Vorbemerkung

Ich gehe davon aus, dass Sie eine funktionierende nginx-Installation haben, z.B. wie in diesem Tutorial gezeigt: Nginx mit PHP5 (und PHP-FPM) und MySQL-Unterstützung (LEMP) auf Ubuntu 12.04 LTS installieren

2 Konfigurieren von nginx

Der Expires HTTP-Header kann mit Hilfe der expires-Direktive gesetzt werden, die innerhalb von http {}, server {}, location {} oder einer if-Anweisung innerhalb eines location {}-Blocks platziert werden kann. Normalerweise verwenden Sie es in einem Location-Block für Ihre statischen Dateien, z.B. wie folgt:

| location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } |

Im obigen Beispiel erhalten alle .jpg, .jpeg, .png, .gif, .ico, .css und .js Dateien einen Expires-Header mit einem Datum, das 365 Tage in der Zukunft vom Zugriffszeitpunkt des Browsers liegt. Daher sollten Sie sicherstellen, dass der location {}-Block wirklich nur statische Dateien enthält, die von Browsern zwischengespeichert werden können.

Laden Sie nginx nach Ihren Änderungen neu:

/etc/init.d/nginx reload

Sie können die folgenden Zeiteinstellungen mit der expires-Direktive verwenden:

• off bewirkt, dass die Expires- und Cache-Control-Header nicht geändert werden.
• epoch setzt den Expires-Header auf den 1. Januar 1970 00:00:01 GMT.
• max setzt den Expires-Header auf den 31. Dezember 2037 23:59:59 GMT und die Cache-Control max-age auf 10 Jahre.
• Eine Zeit ohne ein @-Präfix bedeutet eine Ablaufzeit relativ zur Zugriffszeit des Browsers. Eine negative Zeit kann angegeben werden, die den Cache-Control-Header auf no-cache setzt. Beispiel: expires 10d; oder expires 14w3d;
• Eine Zeit mit einem @-Präfix gibt eine absolute Ablaufzeit an, die entweder in der Form Hh oder Hh:Mm geschrieben wird, wobei H von 0 bis 24 und M von 0 bis 59 reicht. Beispiel: expires @15:34;

Sie können die folgenden Zeiteinheiten verwenden:

• ms: Millisekunden
• s: Sekunden
• m: Minuten
• h: Stunden
• d: Tage
• w: Wochen
• M: Monate (30 Tage)
• y: Jahre (365 Tage)

Beispiele: 1h30m für eine Stunde dreißig Minuten, 1y6M für ein Jahr und sechs Monate.

Beachten Sie auch, dass Sie, wenn Sie einen weit in der Zukunft liegenden Expires-Header verwenden, den Dateinamen der Komponente ändern müssen, wann immer sich die Komponente ändert. Daher ist es eine gute Idee, Ihre Dateien zu versionieren. Wenn Sie beispielsweise eine Datei javascript.js haben und diese ändern möchten, sollten Sie eine Versionsnummer zum Dateinamen der modifizierten Datei hinzufügen (z.B. javascript-1.1.js), damit Browser sie herunterladen müssen. Wenn Sie den Dateinamen nicht ändern, laden Browser die (alte) Datei aus ihrem Cache.

Anstatt den Expires-Header auf der Zugriffszeit des Browsers zu basieren (z.B. expires 10d;), können Sie ihn auch auf dem Änderungsdatum einer Datei basieren (bitte beachten Sie, dass dies nur für echte Dateien funktioniert, die auf der Festplatte gespeichert sind!) indem Sie das Schlüsselwort modified verwenden, das der Zeit vorangestellt wird:

expires modified 10d;

3 Testen

Um zu testen, ob Ihre Konfiguration funktioniert, können Sie das Live HTTP Headers-Plugin für Firefox installieren und eine statische Datei über Firefox aufrufen (z.B. ein Bild). Im Live HTTP Headers-Ausgang sollten Sie jetzt einen Expires-Header und einen Cache-Control-Header mit einer max-age-Direktive sehen (max-age enthält einen Wert in Sekunden, zum Beispiel 31536000 ist ein Jahr in der Zukunft):

4 Links

• nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule
• Live HTTP Headers Plugin für Firefox: https://addons.mozilla.org/en-us/firefox/addon/live-http-headers/

Über den Autor

Falko Timme ist der Eigentümer von Timme Hosting (ultra-schnelles nginx-Webhosting). Er ist der Hauptbetreuer von HowtoForge (seit 2005) und einer der Hauptentwickler von ISPConfig (seit 2000). Er hat auch zum O’Reilly-Buch “Linux-Systemadministration” beigetragen.