TOC

Implementieren von Browser-Caching mit dem Nginx-Header-Modul unter Ubuntu 16.04

Einführung

Je schneller eine Website geladen wird, desto wahrscheinlicher ist es, dass ein Besucher bleibt. Wenn Websites voller Bilder und interaktiver Inhalte sind, die von im Hintergrund geladenen Skripten ausgeführt werden, ist das Öffnen einer Website keine einfache Aufgabe. Es besteht darin, nacheinander viele verschiedene Dateien vom Server anzufordern. Das Minimieren der Anzahl dieser Anfragen ist eine Möglichkeit, Ihre Website zu beschleunigen.

Dies kann auf viele Arten geschehen, aber einer der wichtigeren Schritte ist die Konfiguration von browser caching. Dies teilt dem Browser mit, dass einmal heruntergeladene Dateien von lokalen Kopien wiederverwendet werden können, anstatt sie immer wieder vom Server anzufordern. Dazu müssen neue HTTP-Antwortheader eingeführt werden, die dem Browser mitteilen, wie er sich verhalten soll.

Hier kommt das Header-Modul von Nginx ins Spiel. Dieses Modul kann verwendet werden, um der Antwort beliebige Header hinzuzufügen. Seine Hauptaufgabe besteht jedoch darin, die Caching-Header ordnungsgemäß festzulegen. In diesem Lernprogramm erfahren Sie, wie Sie das Header-Modul von Nginx verwenden, um das Browser-Caching zu implementieren.

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

Zusätzlich zum Kopfzeilenmodul verwenden wir in diesem Artikel auch das Kartenmodul von Nginx. Weitere Informationen zum Kartenmodul finden Sie unter How To Use Nginxs Kartenmodul unter Ubuntu 16.04.

Schritt 1 - Testdateien erstellen

In diesem Schritt erstellen wir mehrere Testdateien im Standardverzeichnis von Nginx. Wir werden diese Dateien später verwenden, um das Standardverhalten von Nginx zu überprüfen und dann zu testen, ob das Browser-Caching funktioniert.

Um zu entscheiden, welche Art von Datei über das Netzwerk bereitgestellt wird, analysiert Nginx den Dateiinhalt nicht. das wäre unerschwinglich langsam. Stattdessen wird nur die Dateierweiterung nachgeschlagen, um den MIME-Typ der Datei zu ermitteln, der den Zweck der Datei angibt.

Aufgrund dieses Verhaltens ist der Inhalt unserer Testdateien irrelevant. Durch die richtige Benennung der Dateien können wir Nginx täuschen, dass beispielsweise eine vollständig leere Datei ein Bild und eine andere ein Stylesheet ist.

Erstellen Sie eine Datei mit dem Namen "+ test.html " im Standardverzeichnis von Nginx, indem Sie " truncate +" verwenden. Diese Erweiterung gibt an, dass es sich um eine HTML-Seite handelt.

sudo truncate -s 1k /var/www/html/test.html

Erstellen Sie auf die gleiche Weise einige weitere Testdateien: eine "+ jpg " - Bilddatei, eine " css " - Stilvorlage und eine " js +" - JavaScript-Datei.

sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

Der nächste Schritt besteht darin, das Verhalten von Nginx in Bezug auf das Senden von Caching-Steuerelement-Headern bei einer Neuinstallation mit den soeben erstellten Dateien zu überprüfen.

Schritt 2 - Überprüfen des Standardverhaltens

Standardmäßig haben alle Dateien dasselbe Standard-Caching-Verhalten. Um dies zu untersuchen, verwenden wir die in Schritt 1 erstellte HTML-Datei. Sie können diese Tests jedoch mit jeder der Beispieldateien ausführen.

Überprüfen wir also, ob "+ test.html +" mit Informationen versorgt wird, wie lange der Browser die Antwort zwischenspeichern soll. Der folgende Befehl fordert eine Datei von unserem lokalen Nginx-Server an und zeigt die Antwortheader an.

curl -I http://localhost/test.html

Sie sollten mehrere HTTP-Antwortheader sehen:

Output: Nginx response headersHTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:12:26 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive

Accept-Ranges: bytes

In der vorletzten Zeile sehen Sie den Header "+ ETag ", der eine eindeutige Kennung für diese bestimmte Revision der angeforderten Datei enthält. Wenn Sie den vorherigen Befehl " curl " wiederholt ausführen, sehen Sie genau denselben " ETag +" - Wert.

Bei Verwendung eines Webbrowsers wird der Wert "+ ETag " gespeichert und mit dem Anforderungsheader " If-None-Match +" an den Server zurückgesendet, wenn der Browser dieselbe Datei erneut anfordern möchte, z. B. beim Aktualisieren der Seite .

Wir können dies in der Befehlszeile mit dem folgenden Befehl simulieren. Stellen Sie sicher, dass Sie den Wert "+ ETag " in diesem Befehl so ändern, dass er mit dem Wert " ETag +" in Ihrer vorherigen Ausgabe übereinstimmt.

curl -I -H 'If-None-Match: ""' http://localhost/test.html

Die Antwort wird jetzt anders sein:

Output: Nginx response headersHTTP/1.1 304 Not Modified
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:20:31 GMT
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag: "57d40685-400"

Diesmal antwortet Nginx mit * 304 Nicht geändert *. Die Datei wird nicht erneut über das Netzwerk gesendet. Stattdessen wird dem Browser mitgeteilt, dass er die bereits heruntergeladene Datei lokal wiederverwenden kann.

Dies ist nützlich, weil es den Netzwerkverkehr reduziert, aber nicht gut genug ist, um eine gute Caching-Leistung zu erzielen. Das Problem mit "+ ETag +" ist, dass der Browser * immer * eine Anfrage an den Server sendet, ob er seine zwischengespeicherte Datei wiederverwenden kann. Auch wenn der Server mit 304 antwortet, anstatt die Datei erneut zu senden, dauert es noch einige Zeit, die Anforderung zu stellen und die Antwort zu empfangen.

Im nächsten Schritt werden wir das Header-Modul verwenden, um Caching-Steuerungsinformationen anzufügen. Dadurch kann der Browser einige Dateien lokal zwischenspeichern, ohne den Server explizit zu fragen, ob dies in Ordnung ist.

Schritt 3 - Cache-Steuerung konfigurieren und Header ablaufen lassen

Zusätzlich zum Header "+ ETag " für die Dateivalidierung gibt es zwei Header für die Antwort der Cachesteuerung: " Cache-Control " und " Expires ". ` Cache-Control` ist die neuere Version, die mehr Optionen als` + Expires` bietet und im Allgemeinen nützlicher ist, wenn Sie Ihr Caching-Verhalten genauer steuern möchten.

Wenn diese Header gesetzt sind, können sie dem Browser mitteilen, dass die angeforderte Datei für eine bestimmte Zeit (einschließlich für immer) lokal aufbewahrt werden kann, ohne sie erneut anzufordern. Wenn die Header nicht gesetzt sind, fordern Browser die Datei immer vom Server an und erwarten entweder * 200 OK * oder * 304 Not Modified * Antworten.

Wir können das Header-Modul verwenden, um diese HTTP-Header festzulegen. Das Header-Modul ist ein zentrales Nginx-Modul, das heißt, es muss nicht separat installiert werden, um verwendet zu werden.

Um das Header-Modul hinzuzufügen, öffnen Sie die Standard-Nginx-Konfigurationsdatei in + nano + oder Ihrem bevorzugten Texteditor.

sudo nano /etc/nginx/sites-available/default

Suchen Sie den Konfigurationsblock "+ server +", der folgendermaßen aussieht:

/ etc / nginx / sites-available / default

. . .
# Default server configuration
#

server {
   listen 80 default_server;
   listen [::]:80 default_server;

. . .

Fügen Sie hier die folgenden zwei neuen Abschnitte hinzu: einen vor dem + server + - Block, um zu definieren, wie lange verschiedene Dateitypen zwischengespeichert werden sollen, und einen darin, um die Caching-Header entsprechend festzulegen.

Geändert / etc / nginx / sites-available / default

. . .
# Default server configuration
#










server {
   listen 80 default_server;
   listen [::]:80 default_server;


. . .

Der Abschnitt vor dem "+ server" -Block ist ein neuer "+ map" -Block, der die Zuordnung zwischen dem Dateityp und der Dauer definiert, für die diese Art von Datei zwischengespeichert werden soll.

In dieser Karte werden verschiedene Einstellungen verwendet:

  • Der Standardwert ist auf "+ off +" gesetzt, wodurch keine Caching-Steuerelement-Header hinzugefügt werden. Wir haben keine besonderen Anforderungen an die Funktionsweise des Caches.

  • Für "+ text / html" setzen wir den Wert auf "+ epoch". Dies ist ein spezieller Wert, der explizit zu keinem Caching führt und den Browser dazu zwingt, immer zu fragen, ob die Website selbst aktuell ist.

  • Für "+ text / css" und "+ application / javascript", bei denen es sich um Stylesheets und Javascript-Dateien handelt, setzen wir den Wert auf "+ max +". Dies bedeutet, dass der Browser diese Dateien so lange wie möglich zwischenspeichert, wodurch sich die Anzahl der Anforderungen erheblich verringert, da in der Regel viele dieser Dateien vorhanden sind.

  • Die letzte Einstellung ist für "+ ~ image / ", ein regulärer Ausdruck, der allen Dateitypen entspricht, die " image / " in ihrem _MIME-Typnamen enthalten (wie " image / jpg " und " image / png ") `). Wie bei Stylesheets gibt es häufig viele Bilder auf Websites, die sicher zwischengespeichert werden können. Daher setzen wir diese Option ebenfalls auf " max +".

Innerhalb des Serverblocks setzt die Direktive "+ expires " (ein Teil des Headermoduls) die Header der Cachesteuerung. Es verwendet den Wert aus der in der Map festgelegten Variable " $ expires +". Auf diese Weise unterscheiden sich die resultierenden Header je nach Dateityp.

Speichern und schließen Sie die Datei, um sie zu beenden.

Starten Sie Nginx neu, um die neue Konfiguration zu aktivieren.

sudo systemctl restart nginx

Stellen wir als Nächstes sicher, dass unsere neue Konfiguration funktioniert.

Schritt 4 - Browser-Caching testen

Führen Sie dieselbe Anforderung wie zuvor für die Test-HTML-Datei aus.

curl -I http://localhost/test.html

Dieses Mal wird die Antwort anders sein. Sie sollten zwei zusätzliche HTTP-Antwortheader sehen:

Nginx-Antwortheader

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:48:53 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag: "57d40685-400"


Accept-Ranges: bytes

Der Header "+ Expires " zeigt ein Datum in der Vergangenheit an und " Cache-Control " wird mit " no-cache " festgelegt. Dadurch wird der Browser angewiesen, den Server immer zu fragen, ob eine neuere Version der Datei vorhanden ist (unter Verwendung von " ` ETag +` Header, wie zuvor).

Bei der Testbilddatei wird eine unterschiedliche Antwort angezeigt.

curl -I http://localhost/test.jpg

Nginx-Antwortheader

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:50:41 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:36 GMT
Connection: keep-alive
ETag: "57d40688-400"


Accept-Ranges: bytes

In diesem Fall zeigt "+ Expires " das Datum in ferner Zukunft an, und " Cache-Control " enthält " max-age +" - Informationen, die dem Browser mitteilen, wie lange die Datei in Sekunden zwischengespeichert werden kann. Dadurch wird der Browser angewiesen, das heruntergeladene Bild so lange wie möglich zwischenzuspeichern, sodass alle nachfolgenden Erscheinungsbilder dieses Bildes den lokalen Cache verwenden und überhaupt keine Anforderung an den Server senden.

Das Ergebnis sollte für + test.js und` + test.css ähnlich sein, da sowohl JavaScript- als auch Stylesheet-Dateien mit Caching-Headern festgelegt sind.

Dies bedeutet, dass die Header der Cachesteuerung ordnungsgemäß konfiguriert wurden und Ihre Website vom Leistungsgewinn und von den geringeren Serveranforderungen aufgrund des Browser-Cachings profitiert. Sie sollten die Caching-Einstellungen basierend auf dem Inhalt Ihrer Website anpassen. Die Standardeinstellungen in diesem Artikel sind jedoch ein vernünftiger Ausgangspunkt.

Fazit

Das Header-Modul kann verwendet werden, um der Antwort beliebige Header hinzuzufügen. Das richtige Festlegen von Caching-Steuer-Headern ist jedoch eine der nützlichsten Anwendungen. Dies erhöht die Leistung für die Benutzer der Website, insbesondere in Netzwerken mit höherer Latenz, wie z. B. Mobilfunknetzen. Es kann auch zu besseren Ergebnissen bei Suchmaschinen führen, die Geschwindigkeitstests in ihre Ergebnisse einbeziehen. Das Festlegen von Browser-Caching-Headern ist eine der wichtigsten Empfehlungen der PageSpeed-Testtools von Google.

Weitere Informationen zum Header-Modul finden Sie unter in der offiziellen Dokumentation zum Header-Modul von Nginx.

Related