Naučite se, kako pospešiti spletna mesta z uporabo modulov Nginx in Gzip


Tudi v času, ko so po vsem svetu na voljo pomembne internetne hitrosti, so vsa prizadevanja za optimizacijo časa nalaganja spletnih strani dobrodošla z odprtimi rokami.

V tem članku bomo razpravljali o načinu povečanja hitrosti prenosa z zmanjšanjem velikosti datotek s stiskanjem. Ta pristop prinaša dodatno korist, saj zmanjšuje tudi količino pasovne širine, uporabljene v postopku, in poceni lastnika spletnega mesta, ki to plača.

Za dosego cilja, navedenega v zgornjem odstavku, bomo v tem članku uporabili Nginx in vgrajeni modul gzip. Kot piše v uradni dokumentaciji, je ta modul filter, ki stisne odzive z dobro znano metodo stiskanja gzip. To zagotavlja, da bo velikost poslanih podatkov stisnjena za polovico ali celo več.

Ko dosežete dno te objave, boste imeli še en razlog, da razmislite o uporabi Nginxa za oskrbo vaših spletnih mest in aplikacij.

Namestitev spletnega strežnika Nginx

Nginx je na voljo za vse glavne sodobne distribucije. Čeprav bomo za ta članek uporabili navidezni stroj CentOS 7 (IP 192.168.0.29).

Spodnja navodila bodo delovala z majhnimi (če sploh) spremembami tudi v drugih distribucijah. Predpostavlja se, da je vaša VM nova namestitev; v nasprotnem primeru se morate prepričati, da na vaši napravi ni nobenega drugega spletnega strežnika (na primer Apache).

Če želite namestiti Nginx skupaj z zahtevanimi odvisnostmi, uporabite naslednji ukaz:

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

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

Če želite preveriti, ali se je namestitev uspešno zaključila in ali Nginx lahko streže datoteke, zaženite spletni strežnik:

# systemctl start nginx
# systemctl enable nginx

in nato odprite spletni brskalnik in pojdite na http://192.168.0.29 (ne pozabite zamenjati 192.168.0.29 z naslovom IP ali imenom gostitelja strežnika). Morali bi videti stran dobrodošlice:

Upoštevati moramo, da je nekatere vrste datotek mogoče stisniti bolje kot druge. Navadne besedilne datoteke (kot so datoteke HTML, CSS in JavaScript) se zelo dobro stisnejo, druge (datoteke .iso, tarballs in slike, če naštejemo le nekatere) pa ne, saj jih že stisne narava.

Tako je pričakovati, da nam bo kombinacija Nginxa in gzipa omogočila povečanje hitrosti prenosa prvega, medtem ko bo slednji morda pokazal le malo ali nič izboljšanja.

Pomembno je tudi upoštevati, da se datoteke HTML, kadar je omogočen modul gzip, VEDNO stisnejo, druge vrste datotek, ki jih pogosto najdemo na spletnih mestih in v aplikacijah (CSS in JavaScript), pa ne.

Testiranje hitrosti spletnega mesta Nginx BREZ modula gzip

Za začetek prenesite celotno predlogo Bootstrap, odlično kombinacijo datotek HTML, CSS in JavaScript.

Po prenosu stisnjene datoteke jo bomo razpakirali v korenski imenik našega strežniškega bloka (ne pozabite, da je to Nginx-ov ekvivalent direktive DocumentRoot v deklaraciji virtualnega gostitelja Apache):

# 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

V /var/www/html/tecmint bi morala biti naslednja struktura imenika:

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

Zdaj pojdite na http://192.168.0.29/tecmint in se prepričajte, da se stran pravilno naloži. Večina sodobnih brskalnikov vključuje nabor orodij za razvijalce. V Firefoxu ga lahko odprete v meniju Orodja → Spletni razvijalec .

Še posebej nas zanima podmeni Network , ki nam bo omogočil spremljanje vseh omrežnih zahtev, ki se dogajajo med našim računalnikom in lokalnim omrežjem ter internetom.

Bližnjica do odpiranja menija Network v orodjih za razvijalce je Ctrl + Shift + Q . Pritisnite to kombinacijo tipk ali jo uporabite v menijski vrstici, da jo odprete.

Ker nas zanima prenašanje datotek HTML, CSS in JavaScript, kliknite gumbe na dnu in osvežite stran. Na glavnem zaslonu boste videli podrobnosti o prenosu vseh datotek HTML, CSS in JavaScript:

Desno od stolpca Velikost (ki prikazuje posamezne velikosti datotek) boste videli posamezne čase prenosa. Dvokliknete lahko tudi katero koli datoteko, da si ogledate več podrobnosti na zavihku Časi .

Ne pozabite si zapisati časov, prikazanih na zgornji sliki, da jih boste lahko primerjali z istim prenosom, ko bomo omogočili modul gzip.

Omogočanje in konfiguriranje modula gzip v Nginxu

Če želite omogočiti in konfigurirati modul gzip, odprite /etc/nginx/nginx.conf , poiščite glavni strežniški blok, kot je prikazano na spodnji sliki, in dodajte ali spremenite naslednje vrstice (ne pozabite na podpičje na koncu ali bo Nginx med ponovnim zagonom pozneje vrnil sporočilo o napaki!)

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

Direktiva gzip vklopi ali izklopi modul gzip, medtem ko se gzip_types uporablja za naštevanje vseh vrst MIME, ki jih mora modul obravnavati.

Če želite izvedeti več o vrstah MIME in si ogledati razpoložljive vrste, pojdite na Basics_of_HTTP_MIME_types.

Testiranje hitrosti spletnega mesta Nginx z modulom za stiskanje Gzip

Ko končamo zgornje korake, znova zaženimo Nginx in znova naložimo stran s pritiskom na Ctrl + F5 (to znova deluje v Firefoxu, zato, če uporabljate drug brskalnik, najprej poglejte ustrezno dokumentacijo) da preglasimo predpomnilnik in upoštevamo čas prenosa:

# systemctl restart nginx

Zavihek omrežnih zahtev prikazuje nekaj pomembnih izboljšav. Primerjajte časovnice, da se prepričate sami, pri tem pa upoštevajte, da gre za prenose med našim računalnikom in 192.168.0.29 (prenosi med Googlovimi strežniki in CDN-ji so zunaj našega dosega):

Oglejmo si na primer naslednje primere prenosa datotek pred/po omogočanju gzip. Časi so podani v milisekundah:

  1. index.html (predstavljen z /tecmint/ na vrhu seznama): 15/4
  2. Creative.min.css : 18/8
  3. jquery.min.js : 17/7

Ali zaradi tega še bolj ljubiš Nginx? Kar zadeva mene, to počne!

Povzetek

V tem članku smo dokazali, da lahko z modulom Nginx gzip pospešite prenos datotek. Uradna dokumentacija za modul gzip navaja druge konfiguracijske smernice, ki jih boste morda želeli pogledati.

Poleg tega ima spletno mesto Mozilla Developer Network vnos o Network Monitorju, ki pojasnjuje, kako uporabiti to orodje za razumevanje dogajanja v zakulisju omrežne zahteve.

Kot vedno, če imate kakršna koli vprašanja o tem članku, uporabite spodnji obrazec za komentar. Vedno se veselimo vaših odzivov!