So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern

So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern

Warum GZIP-Komprimierung verwenden?

Durch Aktivieren der GZIP-Komprimierung in Nginx wird die Größe statischer Ressourcen wie JS und CSS auf der Webseite erheblich reduziert. Dadurch wird viel Bandbreite gespart, die Übertragungseffizienz verbessert und den Benutzern ein schnelles Erlebnis geboten.

nginx implementiert gzip

Das Prinzip der Ressourcenkomprimierung in nginx besteht darin, Anforderungen über das standardmäßig integrierte Modul ngx_http_gzip_module abzufangen und GZIP für die Typen auszuführen, die GZIP-komprimiert werden müssen. Es ist sehr einfach zu verwenden und kann direkt durch Festlegen von Optionen aktiviert werden. .

Anforderungsheader und Antwortheader nach dem Wirksamwerden von gzip

Anforderungsheader:
Akzeptierte Kodierung: gzip, deflate, sdch

Antwortheader:
Inhaltskodierung:gzip
Cache-Steuerung:max-age240

GZIP-Verarbeitung

Aus der Perspektive des HTTP-Protokolls deklariert der Anforderungsheader „acceopt-encoding:gzip deflate sdch“ (bezieht sich auf den Komprimierungsalgorithmus, wobei sdch eine von Google selbst geförderte Komprimierungsmethode ist).
Server->Antwort->Inhalt mit gzip komprimieren->An Browser senden->Browser dekodiert gzip->Gzip-komprimierten Inhalt empfangen

Allgemeine Konfigurationsparameter von gzip

  • gzip on|off Gibt an, ob gzip aktiviert werden soll
  • gzip_buffers 4k-Puffer (wie viele Blöcke werden für die Komprimierung im Speicher gepuffert? Wie groß ist jeder Block?)
  • gzip_comp_level [1-9] Empfohlene Komprimierungsstufe 6, je höher die Stufe, desto geringer die Komprimierung, aber desto mehr CPU-Ressourcen werden verschwendet
  • gzip_disable Regulärer Ausdruck, der mit UA übereinstimmt: Welche Art von URI wird nicht mit gzip komprimiert?
  • gzip_min_length 200 Die Mindestlänge, ab der die Komprimierung beginnt. Wenn die Länge geringer ist, wird nginx sie nicht komprimieren.
  • gzip_http_version 1.0|1.1 Komprimierung der HTTP-Protokollversion starten (Standard 1.1)
  • gzip_proxied legt den anfordernden Proxyserver fest und erklärt, wie Inhalte zwischengespeichert werden
  • gzip_types text/plain application/xml Für welche Dateitypen soll die Komprimierung verwendet werden, z. B. txt, xml, html, css
  • gzip_vary off Gibt an, ob das Gzip-Komprimierungsflag übertragen werden soll

nginx-Konfiguration gzip

Statische Seite index.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Demonstration der Nginx-GZIP-Komprimierung</title>
  <script src="./jquery.js" ></script>
</Kopf>
<Text>
<img src="./nginx_img.jpeg" style="Breite: 100px;Höhe: 100px;" />
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
<h1>nginx implementiert GZIP-Komprimierung, um die Bandbreitennutzung zu reduzieren und die Website-Geschwindigkeit zu verbessern</h1>
</body>
</html>

Nginx-Konfiguration

Server{
    hören Sie 80;
    Servername localhost 192.168.0.96;
    gzip an;
    gzip_puffer 32 4k;
    gzip_comp_level 6;
    gzip_min_länge 200;
    gzip_types Anwendung/Javascript-Anwendung/X-Javascript-Text/Javascript-Text/XML-Text/CSS;
    gzip_vary aus;
    root /Benutzer/lidong/Desktop/wwwroot/test;
    index.php index.html index.htm;
    access_log /Benutzer/lidong/wwwlogs/access.log;
    Fehlerprotokoll /Benutzer/lidong/wwwlogs/error.log;
    Standort ~ [^/]\.php(/|$) {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $Dokumentstammsatz$fastcgi_script_name;
        fastcgi_params einschließen;
    }
}

So verwenden Sie die Seitenanforderung vor GZIP:

Anfragen mit aktiviertem GZIP:

Beachten

  • Bilder und MP3 müssen im Allgemeinen nicht komprimiert werden, da die Komprimierungsrate relativ gering ist
  • Komprimieren Sie im Allgemeinen Dateien im Text-, CSS-, JS- und XML-Format
  • Kleinere Dateien müssen nicht komprimiert werden und können größer als die Originaldatei sein.
  • Binärdateien müssen nicht komprimiert werden

Zusammenfassen

Oben ist die vom Editor eingeführte Implementierungsmethode der GZIP-Komprimierung in Nginx zur Verbesserung der Website-Geschwindigkeit. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zum Aktivieren der Gzip-Komprimierung in der Nginx-Serverkonfiguration
  • Nginx aktiviert die GZIP-Komprimierungsmethode für die Übertragung von Webseiten (empfohlen)
  • So aktivieren Sie die Gzip-Komprimierung in Nginx, um die Seitenladegeschwindigkeit deutlich zu erhöhen
  • nginx konfiguriert gzip-komprimierte Seite
  • Analyse der Nginx-Serverkonfiguration mithilfe der GZIP-Komprimierung
  • Tutorial zum Konfigurieren der GZip-Komprimierung bei Verwendung von Nginx als Reverse-Proxy für Node.js-Sites
  • So aktivieren Sie Komprimierung und GZIP-Komprimierung in Nginx
  • Beispiel zum Aktivieren der GZIP-Komprimierung in Nginx
  • Einführung in die Gzip-Komprimierungskonfiguration in Nginx
  • Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten

<<:  Detaillierte Installationsschritte für MySQL 8.0.11

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)

Artikel empfehlen

Detaillierte Erklärung des DOM DIFF-Algorithmus in der React-Anwendung

Inhaltsverzeichnis Vorwort Was ist VirtualDOM? Gr...

Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue

Einführung Während des Front-End-Projektentwicklu...

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Vorwort Als ich heute Xianyu durchsuchte, fiel mi...

Zusammenfassung der Blockelemente, Inline-Elemente und variablen Elemente

Blockelement p - Absatz Text vorformatieren Tisch ...

CSS3 realisiert den grafischen Fallanimationseffekt

Sehen Sie zuerst den Effekt Implementierungscode ...

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Vorwort Im Internet gibt es zahlreiche Informatio...

VUE realisiert Registrierungs- und Login-Effekte

In diesem Artikelbeispiel wird der spezifische Co...

Vue.js implementiert eine Bildwechselfunktion

In diesem Artikel wird der spezifische Code von V...