Lær hvordan du fremskynder websteder ved hjælp af Nginx og Gzip-modulet

Selv i en tid, hvor der findes betydelige internethastigheder over hele kloden, er enhver indsats for at optimere webstedets belastningstider velkommen med åbne arme.

I denne artikel vil vi diskutere en metode til at øge overførselshastigheder ved at reducere filstørrelser gennem komprimering. Denne tilgang giver en ekstra fordel ved, at den også reducerer mængden af båndbredde, der bruges i processen, og gør det billigere for webstedsejeren, der betaler for det.

For at nå det mål, der er anført i ovenstående afsnit, bruger vi Nginx og dets indbyggede gzip-modul i denne artikel. Som det fremgår af den officielle dokumentation, er dette modul et filter, der komprimerer svar ved hjælp af den velkendte gzip-komprimeringsmetode. Dette sikrer, at størrelsen på de transmitterede data komprimeres med halvdelen eller endnu mere.

Når du når bunden af dette indlæg, har du endnu en grund til at overveje at bruge Nginx til at betjene dine websteder og applikationer.

Installation af Nginx Web Server

Nginx er tilgængelig til alle større moderne distributioner. Selvom vi vil bruge en CentOS 7 virtuel maskine (IP 192.168.0.29) til denne artikel.

Instruktionerne nedenfor fungerer med få (hvis nogen) ændringer i andre distributioner også. Det antages, at din VM er en ny installation; Ellers bliver du nødt til at sikre dig, at der ikke kører andre webservere (såsom Apache) på din maskine.

For at installere Nginx sammen med de krævede afhængigheder skal du bruge følgende kommando:

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

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

For at kontrollere, at installationen er gennemført, og at Nginx kan servere filer, skal du starte webserveren:

# systemctl start nginx
# systemctl enable nginx

og åbn derefter en webbrowser og gå til http://192.168.0.29 (glem ikke at erstatte 192.168.0.29 med IP-adressen eller værtsnavnet på din server). Du skal se velkomstsiden:

Vi skal huske på, at nogle filtyper kan komprimeres bedre end andre. Almindelige tekstfiler (såsom HTML-, CSS- og JavaScript-filer) komprimerer meget godt, mens andre (.iso-filer, tarballs og billeder for at nævne nogle få) ikke gør det, da de allerede er komprimeret af natur.

Således kan det forventes, at kombinationen af Nginx og gzip vil give os mulighed for at øge overførselshastighederne for førstnævnte, mens sidstnævnte muligvis viser ringe eller slet ingen forbedring.

Det er også vigtigt at huske på, at når gzip-modulet er aktiveret, komprimeres HTML-filer ALTID, men andre filtyper, der ofte findes på websteder og applikationer (nemlig CSS og JavaScript), er ikke.

Test af Nginx-webstedshastigheder UDEN gzip-modulet

Lad os begynde med at downloade en komplet Bootstrap-skabelon, en fantastisk kombination af HTML-, CSS- og JavaScript-filer.

Efter download af den komprimerede fil udpakker vi den til rodmappen på vores serverblok (husk at dette er Nginx-ækvivalent med DocumentRoot-direktivet i en Apache virtuel værtserklæring):

# 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

Du skal have følgende bibliotekstruktur inde i /var/www/html/tecmint :

# ls -l /var/www/html/tecmint

Gå nu til http://192.168.0.29/tecmint og sørg for, at siden indlæses korrekt. Den mest moderne browser inkluderer et sæt udviklerværktøjer. I Firefox kan du åbne det via menuen Værktøjer → Webudvikler .

Vi er især interesserede i undermenuen Netværk , som giver os mulighed for at overvåge alle netværksanmodninger, der foregår mellem vores computer og det lokale netværk og Internettet.

En genvej til åbning af menuen Netværk i udviklerværktøjerne er Ctrl + Shift + Q . Tryk på den tastekombination, eller brug menulinjen til at åbne den.

Da vi er interesseret i at undersøge overførslen af HTML-, CSS- og JavaScript-filer, skal du klikke på knapperne i bunden og opdatere siden. På hovedskærmen kan du se detaljerne i overførslen af alle HTML-, CSS- og JavaScript-filer:

Til højre for kolonnen Størrelse (som viser de enkelte filstørrelser) ser du de individuelle overførselstider. Du kan også dobbeltklikke på en given fil for at se flere detaljer i fanen Timings .

Sørg for at tage notater af de tidsindstillinger, der vises i ovenstående billede, så du kan sammenligne dem med den samme overførsel, når vi har aktiveret gzip-modulet.

Aktivering og konfiguration af gzip-modulet i Nginx

For at aktivere og konfigurere gzip-modulet skal du åbne /etc/nginx/nginx.conf , finde hovedserverblokken som vist i nedenstående billede og tilføje eller ændre følgende linjer (glem ikke semikolon i slutningen, ellers returnerer Nginx en fejlmeddelelse, mens du genstarter senere!)

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

Gzip-direktivet tænder eller slukker for gzip-modulet, mens gzip_types bruges til at liste alle de MIME-typer, modulet skal håndtere.

Hvis du vil lære mere om MIME-typer og se de tilgængelige typer, skal du gå til Basics_of_HTTP_MIME_types.

Test af Nginx-webstedshastigheder med Gzip-komprimeringsmodul

Når vi har gennemført ovenstående trin, lad os genstarte Nginx og genindlæse siden ved at trykke på Ctrl + F5 (igen fungerer dette i Firefox, så hvis du bruger en anden browser, skal du først konsultere den tilsvarende dokumentation) for at tilsidesætte cachen og lad os overføre overførselstiderne:

# systemctl restart nginx

Fanen Netværksanmodninger viser nogle væsentlige forbedringer. Sammenlign tiderne for at se selv, idet du husker, at det er overførslerne mellem vores computer og 192.168.0.29 (overførsler mellem Google-servere og CDN'er er uden for vores rækkevidde):

Lad os f.eks. Overveje følgende eksempler på filoverførsel før/efter aktivering af gzip. Tiderne er angivet i millisekunder:

index.html (repræsenteret af /tecmint/ øverst på listen): 15/4
Creative.min.css : 18/8
jquery.min.js : 17/7

Får dette dig ikke til at elske Nginx endnu mere? For mig er det det!

Resumé

I denne artikel har vi vist, at du kan bruge Nginx gzip-modulet til at fremskynde filoverførsler. Den officielle dokumentation for gzip-modul viser andre konfigurationsdirektiver, som du måske vil se på.

Derudover har Mozilla Developer Network-webstedet en post om Network Monitor, der forklarer, hvordan man bruger dette værktøj til at forstå, hvad der foregår bag kulisserne i en netværksanmodning.

Som altid er du velkommen til at bruge kommentarformularen nedenfor, hvis du har spørgsmål om denne artikel. Vi ser altid frem til at høre fra dig!