Lær hvordan du får fart på nettsteder ved å bruke Nginx og Gzip-modulen

Selv i en tid hvor betydelige Internett-hastigheter er tilgjengelige over hele verden, er alle anstrengelser for å optimalisere nettsidens lastetider velkommen med åpne armer.

I denne artikkelen vil vi diskutere en metode for å øke overføringshastighetene ved å redusere filstørrelsene gjennom komprimering. Denne tilnærmingen gir en ekstra fordel ved at den også reduserer mengden båndbredde som brukes i prosessen, og gjør det billigere for eieren av nettstedet som betaler for det.

For å oppnå målet angitt i avsnittet ovenfor, vil vi bruke Nginx og dens innebygde gzip-modul i denne artikkelen. Som den offisielle dokumentasjonen sier, er denne modulen et filter som komprimerer svar ved å bruke den velkjente gzip-komprimeringsmetoden. Dette sikrer at størrelsen på de overførte dataene vil bli komprimert med halvparten eller enda mer.

Foreslått lesing: Den ultimate guiden for å sikre, herde og øke ytelsen til Nginx-nettsteder

Når du kommer til bunnen av dette innlegget, vil du ha enda en grunn til å vurdere å bruke Nginx for å betjene nettstedene og applikasjonene dine.

Installere Nginx Web Server

Nginx er tilgjengelig for alle store moderne distribusjoner. Selv om vi vil bruke en CentOS 7 virtuell maskin (IP 192.168.0.29) for denne artikkelen.

Instruksjonene nedenfor vil fungere med små (om noen) modifikasjoner i andre distribusjoner også. Det antas at din VM er en ny installasjon; ellers må du sørge for at det ikke er noen andre webservere (som Apache) som kjører på maskinen din.

For å installere Nginx sammen med de nødvendige avhengighetene, bruk 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 å bekrefte at installasjonen er fullført og at Nginx kan levere filer, start webserveren:


systemctl start nginx
systemctl enable nginx

og åpne en nettleser og gå til http://192.168.0.29 (ikke glem å erstatte 192.168.0.29 med IP-adressen eller vertsnavnet til serveren din) . Du bør se velkomstsiden:

Vi må huske på at noen filtyper kan komprimeres bedre enn andre. Vanlige tekstfiler (som HTML, CSS og JavaScript-filer) komprimeres veldig godt mens andre (.iso filer, tarballs og bilder, for å nevne noen) ikke, siden de allerede er komprimert av naturen.

Dermed er det å forvente at kombinasjonen av Nginx og gzip vil tillate oss å øke overføringshastighetene til førstnevnte, mens sistnevnte kan vise liten eller ingen forbedring ved alle.

Det er også viktig å huske på at når gzip-modulen er aktivert, er HTML-filer ALLTID komprimert, men andre filtyper som vanligvis finnes i nettsteder og applikasjoner (nemlig CSS og JavaScript) er det ikke.

Tester Nginx nettstedhastigheter UTEN gzip-modulen

For å begynne, la oss laste ned en komplett Bootstrap-mal, en flott kombinasjon av HTML-, CSS- og JavaScript-filer.

Etter å ha lastet ned den komprimerte filen, vil vi pakke den ut til rotkatalogen til serverblokken vår (husk at dette er Nginx-ekvivalenten til DocumentRoot-direktivet i en Apache virtuell vertserklæ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 bør ha følgende katalogstruktur inne i /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Gå nå til http://192.168.0.29/tecmint og sørg for at siden laster inn riktig. De fleste moderne nettlesere inkluderer et sett med utviklerverktøy. I Firefox kan du åpne den via Verktøy → Nettutvikler-menyen.

Vi er spesielt interessert i undermenyen Nettverk, som lar oss overvåke alle nettverksforespørsler som foregår mellom datamaskinen vår og det lokale nettverket og Internett.

Foreslått lesing: Installer Mod_Pagespeed for å øke Nginx-ytelsen opptil 10x

En snarvei for å åpne Nettverk-menyen i utviklerverktøyene er Ctrl + Shift + Q. Trykk på den tastekombinasjonen eller bruk menylinjen for å åpne den.

Siden vi er interessert i å undersøke overføringen av HTML-, CSS- og JavaScript-filer, klikker du på knappene nederst og oppdaterer siden. På hovedskjermen vil du se detaljene om overføringen av alle HTML-, CSS- og JavaScript-filene:

Til høyre for Størrelse-kolonnen (som viser de individuelle filstørrelsene) ser du de individuelle overføringstidene. Du kan også dobbeltklikke på en gitt fil for å se flere detaljer i kategorien Tidstider.

Pass på at du noterer tidspunktene vist i bildet ovenfor, slik at du kan sammenligne dem med samme overføring når vi har aktivert gzip-modulen.

Aktivering og konfigurering av gzip-modulen i Nginx

For å aktivere og konfigurere gzip-modulen, åpne /etc/nginx/nginx.conf, finn hovedserverblokken som vist i bildet nedenfor, og legg til eller endre følgende linjer (ikke glem semikolonet på slutten, ellers vil Nginx returnere en feilmelding mens du starter på nytt senere!)


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

gzip-direktivet slår på eller av gzip-modulen, mens gzip_types brukes til å liste opp alle MIME-typene modulen skal håndtere.

For å lære mer om MIME-typer og se de tilgjengelige typene, gå til Basics_of_HTTP_MIME_types.

Testing av Nginx-nettstedshastigheter med Gzip-komprimeringsmodul

Når vi har fullført trinnene ovenfor, la oss starte Nginx på nytt og laste inn siden på nytt ved å trykke Ctrl + F5 (igjen, dette fungerer i Firefox, så hvis du bruker en annen nettleser, se først den tilhørende dokumentasjonen) for å overstyre cachen og la oss observere overføringstidene:


systemctl restart nginx

Nettverksforespørsler-fanen viser noen betydelige forbedringer. Sammenlign tidspunktene for å se selv, og husk at det er overføringene mellom datamaskinen vår og 192.168.0.29 (overføringer mellom Google-servere og CDN-er er utenfor vår rekkevidde):

La oss for eksempel vurdere følgende filoverføringseksempler før/etter aktivering av gzip. Tider er gitt i millisekunder:

  1. index.html (representert av /tecmint/ øverst på listen): 15/4
  2. Creative.min.css: 18/8
  3. jquery.min.js: 17/7

Får ikke dette deg til å elske Nginx enda mer? Så vidt jeg er bekymret, gjør det det!

Foreslått lesing: 5 tips for å øke ytelsen til Apache-nettserveren din

Sammendrag

I denne artikkelen har vi vist at du kan bruke Nginx gzip-modulen for å øke hastigheten på filoverføringer. Den offisielle dokumentasjonen for gzip-modulen viser andre konfigurasjonsdirektiver som du kanskje vil ta en titt på.

I tillegg har nettstedet for Mozilla Developer Network en oppføring om Network Monitor som forklarer hvordan du bruker dette verktøyet for å forstå hva som skjer bak kulissene i en nettverksforespørsel.

Som alltid, bruk gjerne kommentarskjemaet nedenfor hvis du har spørsmål om denne artikkelen. Vi ser alltid frem til å høre fra deg!