Erfahren Sie, wie Sie Websites mithilfe des Nginx- und Gzip-Moduls beschleunigen

Selbst in einer Zeit, in der weltweit erhebliche Internetgeschwindigkeiten verfügbar sind, ist jeder Versuch, die Ladezeiten von Websites zu optimieren, mit offenen Armen willkommen.

In diesem Artikel besprechen wir eine Methode zur Erhöhung der Übertragungsgeschwindigkeit durch Reduzierung der Dateigröße durch Komprimierung. Dieser Ansatz bringt einen zusätzlichen Vorteil mit sich, da er auch die für den Prozess benötigte Bandbreite reduziert und den Vorgang für den Websitebesitzer, der dafür bezahlt, kostengünstiger macht.

Um das im obigen Absatz genannte Ziel zu erreichen, verwenden wir in diesem Artikel Nginx und sein integriertes gzip-Modul. Wie es in der offiziellen Dokumentation heißt, handelt es sich bei diesem Modul um einen Filter, der Antworten mit der bekannten gzip-Komprimierungsmethode komprimiert. Dadurch wird sichergestellt, dass die Größe der übertragenen Daten um die Hälfte oder sogar mehr komprimiert wird.

Empfohlene Lektüre: Der ultimative Leitfaden zum Sichern, Härten und Steigern der Leistung von Nginx-Websites

Wenn Sie am Ende dieses Beitrags angelangt sind, werden Sie einen weiteren Grund haben, darüber nachzudenken, Nginx für die Bereitstellung Ihrer Websites und Anwendungen zu verwenden.

Nginx-Webserver installieren

Nginx ist für alle wichtigen modernen Distributionen verfügbar. Obwohl wir für diesen Artikel eine virtuelle CentOS 7-Maschine (IP 192.168.0.29) verwenden werden.

Die unten bereitgestellten Anweisungen funktionieren mit geringfügigen (wenn überhaupt) Änderungen auch in anderen Distributionen. Es wird davon ausgegangen, dass es sich bei Ihrer VM um eine Neuinstallation handelt; Andernfalls müssen Sie sicherstellen, dass auf Ihrem Computer keine anderen Webserver (z. B. Apache) ausgeführt werden.

Um Nginx zusammen mit den erforderlichen Abhängigkeiten zu installieren, verwenden Sie den folgenden Befehl:

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

Um zu überprüfen, ob die Installation erfolgreich abgeschlossen wurde und Nginx Dateien bereitstellen kann, starten Sie den Webserver:

systemctl start nginx
systemctl enable nginx

Öffnen Sie dann einen Webbrowser und gehen Sie zu http://192.168.0.29 (vergessen Sie nicht, 192.168.0.29 durch die IP-Adresse oder den Hostnamen Ihres Servers zu ersetzen). . Sie sollten die Willkommensseite sehen:

Wir müssen bedenken, dass einige Dateitypen besser komprimiert werden können als andere. Einfache Textdateien (wie HTML-, CSS- und JavaScript-Dateien) lassen sich sehr gut komprimieren, während andere (.iso) sehr gut komprimiert werden können Dateien, Tarballs und Bilder, um nur einige zu nennen), nicht, da sie von Natur aus bereits komprimiert sind.

Daher ist zu erwarten, dass die Kombination von Nginx und gzip es uns ermöglichen wird, die Übertragungsgeschwindigkeiten von ersterem zu erhöhen, während letzteres möglicherweise kaum oder gar keine Verbesserung zeigt alle.

Es ist auch wichtig zu bedenken, dass bei aktiviertem gzip-Modul HTML-Dateien IMMER komprimiert werden, andere Dateitypen jedoch häufig in komprimiert werden Websites und Anwendungen (nämlich CSS und JavaScript) sind es nicht.

Testen der Nginx-Website-Geschwindigkeit OHNE das gzip-Modul

Laden wir zunächst eine vollständige Bootstrap-Vorlage herunter, eine großartige Kombination aus HTML-, CSS- und JavaScript-Dateien.

Nachdem wir die komprimierte Datei heruntergeladen haben, entpacken wir sie in das Stammverzeichnis unseres Serverblocks (denken Sie daran, dass dies das Nginx-Äquivalent der DocumentRoot-Direktive in einer virtuellen Apache-Host-Deklaration ist). ):

cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

Sie sollten die folgende Verzeichnisstruktur in /var/www/html/tecmint haben:

ls -l /var/www/html/tecmint

Gehen Sie nun zu http://192.168.0.29/tecmint und stellen Sie sicher, dass die Seite korrekt geladen wird. Die meisten modernen Browser enthalten eine Reihe von Entwicklertools. In Firefox können Sie es über das Menü Tools → Web Developer öffnen.

Uns interessiert insbesondere das Untermenü Netzwerk, mit dem wir alle Netzwerkanfragen überwachen können, die zwischen unserem Computer und dem lokalen Netzwerk und dem Internet stattfinden.

Empfohlene Lektüre: Installieren Sie Mod_Pagespeed, um die Nginx-Leistung um das Zehnfache zu beschleunigen

Eine Verknüpfung zum Öffnen des Menüs Netzwerk in den Entwicklertools ist Strg + Umschalt + Q. Drücken Sie diese Tastenkombination oder verwenden Sie die Menüleiste, um sie zu öffnen.

Da wir daran interessiert sind, die Übertragung von HTML-, CSS- und JavaScript-Dateien zu untersuchen, klicken Sie auf die Schaltflächen unten und aktualisieren Sie die Seite. Im Hauptbildschirm sehen Sie die Details der Übertragung aller HTML-, CSS- und JavaScript-Dateien:

Rechts neben der Spalte Größe (die die einzelnen Dateigrößen anzeigt) sehen Sie die einzelnen Übertragungszeiten. Sie können auch auf eine beliebige Datei doppelklicken, um weitere Details auf der Registerkarte Timings anzuzeigen.

Notieren Sie sich unbedingt die im obigen Bild gezeigten Zeitpläne, damit Sie sie mit derselben Übertragung vergleichen können, sobald wir das gzip-Modul aktiviert haben.

Aktivieren und Konfigurieren des gzip-Moduls in Nginx

Um das gzip-Modul zu aktivieren und zu konfigurieren, öffnen Sie /etc/nginx/nginx.conf, suchen Sie den Hauptserverblock, wie im Bild unten gezeigt, und fügen Sie Folgendes hinzu oder ändern Sie es Zeilen (vergessen Sie nicht das Semikolon am Ende, sonst gibt Nginx beim späteren Neustart eine Fehlermeldung zurück!)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

Die gzip-Direktive schaltet das gzip-Modul ein oder aus, während gzip_types zum Auflisten aller MIME-Typen verwendet wird, die das Modul verarbeiten soll.

Um mehr über MIME-Typen zu erfahren und die verfügbaren Typen anzuzeigen, gehen Sie zu Basics_of_HTTP_MIME_types.

Testen der Geschwindigkeit von Nginx-Websites mit dem Gzip-Komprimierungsmodul

Sobald wir die oben genannten Schritte abgeschlossen haben, starten wir Nginx neu und laden die Seite neu, indem wir Strg + F5 drücken (auch dies funktioniert in Firefox, also Wenn Sie einen anderen Browser verwenden, konsultieren Sie zunächst die entsprechende Dokumentation, um den Cache zu überschreiben und die Übertragungszeiten zu beachten:

systemctl restart nginx

Die Registerkarte „Netzwerkanfragen“ zeigt einige wesentliche Verbesserungen. Vergleichen Sie die Zeiten, um sich selbst ein Bild zu machen. Bedenken Sie dabei, dass es sich um die Übertragungen zwischen unserem Computer und 192.168.0.29 handelt (Übertragungen zwischen Google-Servern und CDNs liegen außerhalb unserer Reichweite):

Betrachten wir beispielsweise die folgenden Dateiübertragungsbeispiele vor/nach der Aktivierung von gzip. Die Zeiten werden in Millisekunden angegeben:

1. index.html (dargestellt durch /tecmint/ oben in der Liste): 15/4
2. Creative.min.css: 18/8
3. jquery.min.js: 17/7

Lässt Sie das nicht dazu führen, dass Sie Nginx noch mehr lieben? Soweit es mich betrifft, ist es so!

Empfohlene Lektüre: 5 Tipps zur Steigerung der Leistung Ihres Apache-Webservers

Zusammenfassung

In diesem Artikel haben wir gezeigt, dass Sie das Nginx-gzip-Modul verwenden können, um Dateiübertragungen zu beschleunigen. Die offizielle Dokumentation zum gzip-Modul listet weitere Konfigurationsanweisungen auf, die Sie sich vielleicht ansehen sollten.

Darüber hinaus gibt es auf der Mozilla Developer Network-Website einen Eintrag zum Network Monitor, der erklärt, wie man dieses Tool verwendet, um zu verstehen, was hinter den Kulissen einer Netzwerkanfrage vor sich geht.

Wenn Sie Fragen zu diesem Artikel haben, können Sie wie immer gerne das Kommentarformular unten verwenden. Wir freuen uns immer, von Ihnen zu hören!