Opi nopeuttamaan verkkosivustoja Nginx- ja Gzip-moduulien avulla

Jopa silloin, kun merkittäviä Internet-nopeuksia on saatavilla kaikkialla maailmassa, kaikki ponnistelut verkkosivustojen latausaikojen optimoimiseksi ovat tervetulleita avosylin.

Tässä artikkelissa keskustellaan menetelmästä siirtonopeuden lisäämiseksi pienentämällä tiedostokokoja pakkaamisen avulla. Tämä lähestymistapa tuo ylimääräisen edun, koska se myös vähentää prosessissa käytetyn kaistanleveyden määrää ja tekee siitä halvemman verkkosivuston omistajalle, joka maksaa siitä.

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

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

Nginx-verkkopalvelimen asentaminen

Nginx on saatavana kaikkiin tärkeimpiin moderneihin jakeluihin. Vaikka käytämme tässä artikkelissa CentOS 7-virtuaalikonetta (IP 192.168.0.29).

Alla olevat ohjeet toimivat pienillä muutoksilla (jos sellaisia on) myös muissa jakeluissa. Oletetaan, että virtuaalikoneesi on uusi asennus; muuten sinun on varmistettava, että koneellasi ei ole muita verkkopalvelimia (kuten Apache).

Asenna Nginx tarvittavien riippuvuuksien kanssa seuraavalla komennolla:

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

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

Käynnistä verkkopalvelin varmistaaksesi, että asennus on suoritettu onnistuneesti ja että Nginx pystyy palvelemaan tiedostoja:

# systemctl start nginx
# systemctl enable nginx

ja avaa sitten selain 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ät tekstitiedostot (kuten HTML-, CSS- ja JavaScript-tiedostot) pakataan erittäin hyvin, kun taas toiset (.iso-tiedostot, paketit ja kuvat muutamaksi mainitakseni) eivät, koska ne ovat jo luonnostaan pakattuja.

Näin ollen on odotettavissa, että Nginxin ja gzip: n yhdistelmä antaa meille mahdollisuuden lisätä ensimmäisen siirtonopeutta, kun taas jälkimmäinen saattaa näyttää vähän tai ei ollenkaan parannusta.

On myös tärkeää muistaa, että kun gzip-moduuli on käytössä, HTML-tiedostot pakataan AINA, mutta muut verkkosivustoilla ja sovelluksissa yleisesti löydetyt tiedostotyypit (nimittäin CSS ja JavaScript) eivät.

Nginx-verkkosivuston nopeuksien testaaminen ILMAN gzip-moduulia

Aloitetaan lataamalla täydellinen Bootstrap-malli, hieno yhdistelmä HTML-, CSS- ja JavaScript-tiedostoja.

Pakatun tiedoston lataamisen jälkeen puramme sen palvelinlohkon juurihakemistoon (muista, että tämä on Apache-virtuaalisen isäntäilmoituksen DocumentRoot-direktiivin Nginx-ekvivalentti):

# 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

Seuraavan hakemistorakenteen tulisi olla /var/www/html/tecmint -kohdassa:

# 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. Firefoxissa voit avata sen Työkalut → Web-kehittäjä -valikosta.

Olemme erityisen kiinnostuneita Network -alivalikosta, jonka avulla voimme seurata kaikkia tietokoneen ja paikallisen verkon sekä Internetin välisiä verkkopyyntöjä.

Pikanäppäin Network -valikon avaamiseen kehittäjän työkaluissa on Ctrl + Shift + Q . Paina kyseistä näppäinyhdistelmää tai avaa se valikkorivillä.

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

Koko-sarakkeen oikealla puolella (joka näyttää yksittäiset tiedostokoot) näet yksittäiset siirtojen ajoitukset. Voit myös kaksoisnapsauttaa mitä tahansa tiedostoa nähdäksesi lisätietoja Timings -välilehdestä.

Varmista, että teet muistiinpanot yllä olevassa kuvassa esitetyistä ajoituksista, jotta voit verrata niitä samaan siirtoon, kun olemme ottaneet gzip-moduulin käyttöön.

Gzip-moduulin ottaminen käyttöön 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 rivejä (älä unohda puolipiste lopussa tai Nginx palauttaa virheilmoituksen uudelleenkäynnistyksen jälkeen myöhemmin!)

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

Gzip-direktiivi kytkee gzip-moduulin päälle tai pois päältä, kun taas gzip_types-luetteloa käytetään kaikkien MIME-tyyppien luetteloon, joita moduulin tulisi käsitellä.

Jos haluat lisätietoja MIME-tyypeistä ja tarkastella käytettävissä olevia tyyppejä, siirry kohtaan Perusteet_of_HTTP_MIME_tyypit.

Nginx-verkkosivuston nopeuksien testaaminen Gzip-pakkausmoduulilla

Kun olemme suorittaneet yllä olevat vaiheet, käynnistä Nginx uudelleen ja lataa sivu uudelleen painamalla Ctrl + F5 (tämä toimii jälleen Firefoxissa, joten jos käytät toista selainta, tutustu ensin vastaavaan dokumentaatioon) välittää välimuisti ja tarkkailemme 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: n välillä (siirrot Googlen palvelimien ja CDN: ien välillä ovat käsityksemme ulkopuolella):

Tarkastellaan esimerkiksi seuraavia tiedostojen siirtoesimerkkejä ennen/jälkeen gzipin käyttöönoton. Ajoitukset annetaan millisekunteina:

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

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

Yhteenveto

Tässä artikkelissa olemme osoittaneet, että voit käyttää Nginx gzip -moduulia tiedostojen siirtämisen nopeuttamiseen. Gzip-moduulin virallisessa dokumentaatiossa luetellaan muut määritysdirektiivit, joita kannattaa ehkä tarkastella.

Lisäksi Mozilla Developer Network -sivustolla on Network Monitoria koskeva tieto, joka selittää, kuinka tämän työkalun avulla ymmärretään verkkopyynnön kulissien takana tapahtuvaa tapahtumaa.

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