Opi nopeuttamaan verkkosivustoja Nginx- ja Gzip-moduulin avulla

Jopa aikana, jolloin merkittäviä Internet-nopeuksia on saatavilla kaikkialla maailmassa, kaikki pyrkimykset optimoida verkkosivustojen latausajat ovat tervetulleita avosylin.

Tässä artikkelissa käsitellään menetelmää siirtonopeuksien lisäämiseksi pienentämällä tiedostokokoja pakkaamalla. Tämä lähestymistapa tuo lisäetua, koska se myös vähentää prosessissa käytettävän kaistanleveyden määrää ja tekee siitä halvempaa verkkosivuston omistajalle, joka maksaa siitä.

Yllä olevassa kappaleessa mainitun tavoitteen saavuttamiseksi käytämme tässä artikkelissa Nginxiä ja sen sisäänrakennettua gzip-moduulia. Kuten virallisessa dokumentaatiossa todetaan, tämä moduuli on suodatin, joka pakkaa vastaukset tunnetulla gzip-pakkausmenetelmällä. Tämä varmistaa, että lähetettävän tiedon koko pakataan puoleen tai jopa enemmän.

Suositeltu luku: Lopullinen opas Nginx-verkkosivustojen turvaamiseen, tehostamiseen ja suorituskyvyn parantamiseen

Kun pääset tämän viestin loppuun, sinulla on vielä yksi syy harkita Nginxin käyttöä verkkosivustojesi ja sovelluksiesi palvelemiseen.

Nginx-verkkopalvelimen asentaminen

Nginx on saatavilla kaikkiin tärkeimpiin nykyaikaisiin jakeluihin. Käytämme kuitenkin CentOS 7 -virtuaalikonetta (IP 192.168.0.29) tässä artikkelissa.

Alla annetut ohjeet toimivat pienin (jos ollenkaan) muokkauksin myös muissa jakeluissa. Oletetaan, että VM on uusi asennus. Muussa tapauksessa sinun on varmistettava, ettei koneessasi ole muita verkkopalvelimia (kuten Apache).

Asenna Nginx ja sen tarvittavat riippuvuudet käyttämällä seuraavaa komentoa:


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

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

Varmista, että asennus on suoritettu onnistuneesti ja että Nginx voi palvella tiedostoja käynnistämällä verkkopalvelimen:


systemctl start nginx
systemctl enable nginx

ja avaa sitten verkkoselain ja siirry osoitteeseen http://192.168.0.29 (älä unohda korvata 192.168.0.29 palvelimesi IP-osoitteella tai isäntänimellä) . Sinun pitäisi nähdä Tervetuloa-sivu:

Meidän on pidettävä mielessä, että jotkut tiedostotyypit voidaan pakata paremmin kuin toiset. Pelkkä tekstitiedostot (kuten HTML-, CSS- ja JavaScript-tiedostot) pakkaavat erittäin hyvin, kun taas toiset (.iso) tiedostot, tarballs ja kuvat, muutamia mainitaksemme) eivät, koska ne ovat jo luonnostaan pakattuja.

Näin ollen on odotettavissa, että Nginx- ja gzip-yhdistelmän avulla voimme lisätä edellisen siirtonopeuksia, kun taas jälkimmäinen saattaa parantaa vain vähän tai ei ollenkaan kaikki.

On myös tärkeää pitää mielessä, että kun gzip-moduuli on käytössä, HTML-tiedostot AINA pakataan, mutta muut tiedostotyypit ovat yleisesti saatavilla verkkosivustot ja sovellukset (eli CSS ja JavaScript) eivät ole.

Nginx-verkkosivuston nopeuksien testaus ILMAN gzip-moduulia

Aloita lataamalla täydellinen Bootstrap-malli, joka on loistava yhdistelmä HTML-, CSS- ja JavaScript-tiedostoja.

Kun pakattu tiedosto on ladattu, puramme sen palvelinlohkomme juurihakemistoon (muista, että tämä on Nginx-vastine DocumentRoot-direktiiville Apache-virtuaaliisäntäilmoituksessa. ):


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

Sinulla pitäisi olla seuraava hakemistorakenne kohteessa /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Siirry nyt osoitteeseen http://192.168.0.29/tecmint ja varmista, että sivu latautuu oikein. Useimmat nykyaikaiset selaimet sisältävät joukon kehittäjätyökaluja. Voit avata sen Firefoxissa valitsemalla Työkalut → Verkkokehittäjä.

Olemme erityisen kiinnostuneita Verkko-alivalikosta, jonka avulla voimme valvoa kaikkia verkkopyyntöjä tietokoneemme ja paikallisen verkon ja Internetin välillä.

Suositeltu luku: Asenna Mod_Pagespeed nopeuttaaksesi Nginxin suorituskykyä jopa 10x

Pikanäppäin Verkko-valikon avaamiseen kehittäjätyökaluissa on Ctrl + Vaihto + Q. Paina kyseistä näppäinyhdistelmää tai avaa se valikkorivin avulla.

Koska olemme kiinnostuneita tutkimaan HTML-, CSS- ja JavaScript-tiedostojen siirtoa, napsauta alareunassa olevia painikkeita ja päivitä sivu. Päänäytössä näet yksityiskohtaiset tiedot kaikkien HTML--, CSS-- ja JavaScript-tiedostojen-tiedostojen siirtämisestä:

Koko-sarakkeen oikealla puolella (jossa näkyy yksittäisten tiedostojen koot) näet yksittäiset siirto-ajat. Voit myös kaksoisnapsauttaa mitä tahansa tiedostoa nähdäksesi lisätietoja Ajoitukset-välilehdeltä.

Muista tehdä muistiinpanoja yllä olevassa kuvassa näkyvät ajoitukset, jotta voit verrata niitä samaan siirtoon, kun olemme ottaneet käyttöön gzip-moduulin.

Gzip-moduulin käyttöönotto ja määrittäminen Nginxissä

Ota gzip-moduuli käyttöön ja määritä se avaamalla /etc/nginx/nginx.conf, etsimällä pääpalvelinlohko alla olevan kuvan mukaisesti ja lisäämällä tai muokkaamalla seuraavia rivit (älä unohda puolipistettä lopussa tai Nginx palauttaa virheilmoituksen, kun se käynnistetään myöhemmin!)


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

gzip-direktiivi ottaa gzip-moduulin päälle tai pois päältä, kun taas gzip_types-komentoa käytetään luetteloimaan kaikki MIME-tyypit, joita moduulin tulee käsitellä.

Lisätietoja MIME-tyypeistä ja käytettävissä olevista tyypeistä on kohdassa Basics_of_HTTP_MIME_types.

Nginx-verkkosivuston nopeuksien testaus Gzip-pakkausmoduulilla

Kun olemme suorittaneet yllä olevat vaiheet, käynnistetään Nginx uudelleen ja ladataan sivu uudelleen painamalla Ctrl + F5 (tämä toimii jälleen Firefoxissa, joten jos käytät toista selainta, katso ensin vastaava dokumentaatio) ohittaaksesi välimuistin ja tarkkaillaan siirtoaikoja:


systemctl restart nginx

Verkkopyynnöt-välilehdessä on joitain merkittäviä parannuksia. Vertaa ajoituksia nähdäksesi itse, pitäen mielessä, että kyseessä ovat siirrot tietokoneemme ja 192.168.0.29 välillä (Googlen palvelimien ja CDN-verkkojen väliset siirrot ovat käsittämättömiä):

Tarkastellaan esimerkiksi seuraavia tiedostonsiirtoesimerkkejä ennen gzipin käyttöönottoa/sen jälkeen. Ajoitukset annetaan millisekunteina:

index.html (esittää /tecmint/ luettelon yläosassa): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Eikö tämä saa sinut rakastamaan Nginxiä entistä enemmän? Minun mielestäni se tekee!

Suositeltu luku: 5 vinkkiä Apache-verkkopalvelimesi suorituskyvyn parantamiseen

Yhteenveto

Tässä artikkelissa olemme osoittaneet, että voit käyttää Nginx gzip -moduulia nopeuttamaan tiedostojen siirtoa. Virallisessa gzip-moduulin dokumentaatiossa on lueteltu muita määritysohjeita, joita kannattaa ehkä tarkastella.

Lisäksi Mozilla Developer Network -verkkosivustolla on merkintä Network Monitorista, joka selittää, kuinka tätä työkalua käytetään ymmärtämään, mitä verkkopyynnön kulissien takana tapahtuu.

Kuten aina, voit käyttää alla olevaa kommenttilomaketta, jos sinulla on kysyttävää tästä artikkelista. Odotamme aina innolla kuulevamme sinusta!