TOC

So erhöhen Sie den PageSpeed-Score durch Ändern Ihrer Nginx-Konfiguration unter Ubuntu 16.04

Einführung

Nginx ist hervorragend für die Verarbeitung von Anfragen nach Webseiten geeignet. Auch wenn eine Webseite schnell erscheinen kann, führt die Standardkonfiguration von Nginx dazu, dass Google https://developers.google.com/speed/ pagespeed / insights / [PageSpeed ​​Insights] -Tool zum Markieren von Ineffizienzen auf Ihrer Website und zum Beurteilen von Ineffizienzen. Google verwendet die Geschwindigkeit Ihrer Website als Schlüsselfaktor für die Ermittlung der Suchposition Ihrer Website.

In diesem Lernprogramm nehmen Sie schnelle Änderungen an der Konfigurationsdatei für Ihre Domain vor, die die Reaktionsgeschwindigkeit Ihrer Site und die PageSpeed-Metrik sofort verbessern. Ziel ist es, eine Punktzahl über 80/100 zu erreichen, da dies der Schwellenwert ist, ab dem Google eine grüne Markierung auf Ihre Punktzahl anwendet, um eine schnelle Website zu signalisieren.

Zunächst aktivieren Sie die Gzip-Komprimierung für bestimmte Dateitypen. Anschließend konfigurieren Sie das Browser-Caching für einen zusätzlichen Schub. Diese Methoden verbessern die Geschwindigkeit einer Site, die unter Nginx ausgeführt wird, unabhängig von der Software oder dem CMS, mit dem sie erstellt wurde. Zum Beispiel würde eine langsame und unterdurchschnittliche Wordpress-Installation sofortige Gewinne erzielen, ohne eine Zeile des Kerns berühren oder für teure Leistungs-Plugins bezahlen zu müssen. Dieser Ansatz funktioniert auch, wenn die Site auf einem gemeinsam genutzten Hosting mit geringer Leistung ausgeführt wird, sofern der Server Nginx ist und Sie die Konfigurationsdatei bearbeiten können.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

Schritt 1 - Ermitteln Sie den anfänglichen PageSpeed-Score

Bevor wir Änderungen vornehmen, erfassen wir den vorhandenen PageSpeed-Score, damit nach Abschluss des Lernprogramms eine Leistungsgrundlage zum Vergleich vorliegt. Fügen Sie dazu die Website-URL in Googles PageSpeed ​​Insights-Dienst ein und klicken Sie auf "Insights ausführen".

Es werden folgende Ergebnisse angezeigt:

image: https://assets.digitalocean.com/articles/pagespeed_nginx_1604/LbXFqZD.png [PageSpeed-Score vor Optimierungen]

In diesem Beispiel wird auf Mobilgeräten eine niedrige Punktzahl von 63 und auf dem Desktop von 74 angezeigt, da die Komprimierung und das Browser-Caching auf dem Server nicht richtig konfiguriert sind. Am Ende dieses Lernprogramms werden diese beiden Elemente bei allen Gerätetypen über Änderungen an der Nginx-Konfiguration behoben.

Beginnen wir damit, Nginx so zu konfigurieren, dass einige Antworten komprimiert werden.

Schritt 2 - Aktivieren der Komprimierung

CSS-, JavaScript- und Bilddateien können sehr umfangreich sein und die Datenmenge erhöhen, die Benutzer herunterladen müssen. Komprimierung bedeutet, dass diese Assets auf eine kompaktere Version reduziert werden, die kleiner ist, aber alle erforderlichen Daten enthält. Gzip ist eine Option, um diese Komprimierung unter Nginx durchzuführen. Es ist in allen wichtigen Linux-Distributionen verfügbar und muss nur aktiviert und richtig konfiguriert werden. Wenn die Gzip-Komprimierung aktiviert ist, können Browser statische Elemente schneller herunterladen, weshalb das PageSpeed-Tool sie als etwas kennzeichnet, das behoben werden muss.

Öffnen Sie zum Aktivieren der Komprimierung die Nginx-Konfigurationsdatei für Ihre Site in nano oder Ihrem bevorzugten Texteditor. In diesem Beispiel wird die Standarddatei verwendet:

sudo nano /etc/nginx/sites-available/

Suchen Sie den Serverkonfigurationsblock, der wie folgt aussieht:

/ etc / nginx / sites-available / default

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

Fügen wir eine Reihe von Snippets hinzu, um die Komprimierung zu konfigurieren.

Aktivieren Sie zunächst die Gzip-Komprimierung und legen Sie die Komprimierungsstufe fest:

/ etc / nginx / sites-available / default

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

Sie können für diesen Wert eine Zahl zwischen + 1 + und + 9 + wählen. + 5 + ist ein perfekter Kompromiss zwischen Größe und CPU-Auslastung und bietet für die meisten ASCII-Dateien eine Reduzierung von ca. 75% (fast identisch mit Stufe 9).

Als nächstes fordern Sie Nginx auf, nichts zu komprimieren, was bereits klein ist und wahrscheinlich nicht weiter schrumpft. Die Standardeinstellung ist "+ 20 " Bytes, was schlecht ist, da es nach der Komprimierung normalerweise zu größeren Dateien führt. Stellen Sie es stattdessen auf ` 256 +`:

/ etc / nginx / sites-available / default

...
   gzip_comp_level    5;

Als Nächstes weisen Sie Nginx an, Daten auch für Clients zu komprimieren, die über Proxys wie CloudFront eine Verbindung zu uns herstellen:

/ etc / nginx / sites-available / default

...
   gzip_min_length    256;

Weisen Sie diese Proxys dann an, sowohl die komprimierte als auch die reguläre Version einer Ressource zwischenzuspeichern, wenn der Capabilities-Header des Clients von "+ Accept-Encoding +" abweicht. Dies vermeidet das Problem, dass ein nicht-Gzip-fähiger Client, der heutzutage äußerst selten ist, Kauderwelsch anzeigt, wenn sein Proxy ihm die komprimierte Version gibt.

...
   gzip_proxied       any;

Zuletzt geben Sie die MIME-Typen für die Ausgabe an, die Sie komprimieren möchten. Wir komprimieren Bilder, JSON-Daten, Schriftarten und andere gängige Dateitypen:

/ etc / nginx / sites-available / default

...
   gzip_vary          on;

Wenn Sie fertig sind, sollte der gesamte Abschnitt wie folgt aussehen:

/ etc / nginx / sites-available / default

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

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module
}

Speichern und schließen Sie die Datei.

Sie haben der Konfigurationsdatei viele Zeilen hinzugefügt, und es besteht immer die Möglichkeit, dass ein Zeichen oder ein Semikolon fehlt, das zu Fehlern führen kann. Testen Sie die Nginx-Konfiguration, um sicherzustellen, dass Ihre Datei zu diesem Zeitpunkt keine Fehler enthält:

sudo nginx -t

Wenn Sie die Änderungen genau wie in diesem Lernprogramm angegeben vorgenommen haben, werden keine Fehlermeldungen angezeigt.

Diese Änderung sorgt für die größte Beschleunigung Ihrer Site-Geschwindigkeit. Sie können Nginx jedoch auch so konfigurieren, dass das Browser-Caching genutzt wird, wodurch die zusätzliche Leistung des Servers beeinträchtigt wird.

Schritt 3 - Browser-Caching konfigurieren

Wenn Sie zum ersten Mal eine Domain besuchen, werden diese Dateien heruntergeladen und im Cache des Browsers gespeichert. Bei späteren Besuchen kann der Browser die lokalen Versionen bereitstellen, anstatt die Dateien erneut herunterzuladen. Dadurch kann die Webseite viel schneller geladen werden, da nur die Daten abgerufen werden müssen, die sich seit dem letzten Besuch geändert haben. Es bietet eine viel bessere Benutzererfahrung und ist der Grund, warum Google PageSpeed ​​Insights die Implementierung empfiehlt.

Öffnen Sie erneut die Standard-Nginx-Konfigurationsdatei in Ihrem Editor:

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

Sie fügen einen kleinen Code hinzu, mit dem Browser CSS-, JavaScript-, Bild- und PDF-Dateien sieben Tage lang in ihrem Cache speichern können.

Fügen Sie das folgende Snippet direkt nach dem vorherigen Code für die Gzip-Komprimierung in den Serverblock ein:

/ etc / nginx / sites-available / default

...
# text/html is always compressed by gzip module

Die endgültige Nginx-Konfigurationsdatei sollte folgendermaßen aussehen:

/ etc / nginx / sites-available / default

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

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module

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

Speichern und schließen Sie die Datei, um sie zu beenden. Stellen Sie sicher, dass die Konfiguration keine Fehler enthält:

sudo nginx -t

Starten Sie dann Nginx neu, um diese neuen Anweisungen auf eingehende Anforderungen anzuwenden.

sudo systemctl restart nginx

Sie haben Nginx so angepasst, dass es bessere PageSpeed-Ergebnisse liefert. Sehen wir uns an, wie sich diese Änderungen auf unsere PageSpeed ​​auswirken.

Schritt 4 - Messen Sie die Ergebnisse

Um zu überprüfen, um wie viele Punkte diese Konfigurationsänderungen Ihren PageSpeed-Score erhöht haben, führen Sie Ihre Site erneut über die PageSpeed ​​Insights-Tools aus, indem Sie die URL einfügen und auf "Run Insights" klicken. Sie werden feststellen, dass die Warnmeldungen zur Komprimierung und zum Zwischenspeichern des Browsers nicht mehr angezeigt werden:

image: https: //assets.digitalocean.com/articles/pagespeed_nginx_1604/IQolNMR.png [PageSpeed ​​Score nach Optimierungen]

Vergleichen Sie die neue Punktzahl mit Ihrer anfänglichen Basismetrik. Nach Abschluss dieses Tutorials sollten Sie eine Note haben, die mindestens 10 Punkte höher ist als zuvor.

Unser Ziel war es, eine Punktzahl von über 80 zu erreichen. Wenn Ihre Site immer noch unter diesem Schwellenwert liegt, müssen Sie noch andere Dinge beachten. PageSpeed ​​Insights zeigt Ihnen genau, um was es sich handelt und wie Sie diese Probleme beheben können, wenn Sie für jedes Problem auf den Link * Show how to fix * klicken. Die genauen Schritte variieren für jede Site und liegen außerhalb des Bereichs dieses Lernprogramms.

Fazit

Sie haben Ihre Website beschleunigt, indem Sie einfache Änderungen an der Nginx-Konfiguration vorgenommen haben. Ihr PageSpeed-Score ist jetzt viel besser und die Website wird viel schneller geladen. Dies macht die Nutzer zufriedener und erhöht die Qualität Ihrer Website in den Augen von Google. PageSpeed ​​ist ein sehr wichtiges Ranking-Signal und Sie demonstrieren jetzt, dass Ihre Domain Besuchern ein angenehmes Erlebnis bietet.

Das Ändern Ihrer Nginx-Konfiguration ist nur eine Methode zur Verbesserung von PageSpeed ​​und reicht möglicherweise nicht aus. Sie müssen weiterhin performanten Code schreiben, die Dinge angemessen zwischenspeichern, Assets über ein Content Delivery Network (CDN) bereitstellen und, wo immer möglich, die Minimierung verwenden, um die Dinge schnell zu halten.

Related