Naučite kako ubrzati web stranice pomoću Nginxa i Gzip modula

Čak i u vrijeme kada su značajne brzine interneta dostupne širom svijeta, svaki napor na optimizaciji vremena učitavanja web stranica dobrodošao je raširenih ruku.

U ovom ćemo članku razgovarati o metodi za povećanje brzine prijenosa smanjenjem veličina datoteke kompresijom. Ovaj pristup donosi dodatnu korist jer također smanjuje količinu propusnosti koja se koristi u procesu, a vlasnika web mjesta koji ga plaća čini jeftinijim.

Da bismo postigli cilj naveden u gornjem odlomku, u ovom ćemo članku koristiti Nginx i njegov ugrađeni gzip modul. Kao što navodi službena dokumentacija, ovaj je modul filtar koji komprimira odgovore koristeći dobro poznatu gzip metodu kompresije. To osigurava da će veličina prenesenih podataka biti komprimirana za pola ili čak više.

Dok dođete do dna ovog posta, imat ćete još jedan razlog da razmislite o korištenju Nginxa za posluživanje vaših web stranica i aplikacija.

Instaliranje Nginx web poslužitelja

Nginx je dostupan za sve glavne moderne distribucije. Iako ćemo za ovaj članak koristiti virtualni stroj CentOS 7 (IP 192.168.0.29).

Upute navedene u nastavku radit će s malo (ako ih uopće bude) modifikacija i u drugim distribucijama. Pretpostavlja se da je vaš VM svježa instalacija; u suprotnom, morat ćete se pobrinuti da na vašem računalu ne rade drugi web poslužitelji (poput Apache).

Da biste instalirali Nginx zajedno sa potrebnim ovisnostima, upotrijebite sljedeću naredbu:

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

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

Da biste provjerili je li instalacija uspješno dovršena i da li Nginx može posluživati datoteke, pokrenite web poslužitelj:

# systemctl start nginx
# systemctl enable nginx

a zatim otvorite web preglednik i idite na http://192.168.0.29 (ne zaboravite 192.168.0.29 zamijeniti IP adresom ili imenom hosta svog poslužitelja). Trebali biste vidjeti stranicu dobrodošlice:

Moramo imati na umu da se neke vrste datoteka mogu komprimirati bolje od drugih. Obične tekstualne datoteke (poput HTML, CSS i JavaScript datoteka) komprimiraju se vrlo dobro, dok se druge (.iso datoteke, tarballs i slike, da nabrojimo samo neke) ne, jer su u prirodi već komprimirane.

Stoga je za očekivati da će nam kombinacija Nginxa i gzipa omogućiti da povećamo brzine prijenosa prvih, dok drugi mogu pokazati malo ili nimalo poboljšanja.

Također je važno imati na umu da se kada je gzip modul omogućen, HTML datoteke UVIJEK komprimiraju, ali druge vrste datoteka koje se često nalaze na web mjestima i u aplikacijama (naime, CSS i JavaScript) nisu.

Testiranje brzine web stranice Nginx BEZ gzip modula

Za početak preuzmimo cjeloviti predložak Bootstrap, izvrsnu kombinaciju HTML, CSS i JavaScript datoteka.

Nakon preuzimanja komprimirane datoteke, raspakirat ćemo je u korijenski direktorij našeg poslužiteljskog bloka (imajte na umu da je ovo Nginx ekvivalent DocumentRoot direktive u Apache virtualnoj deklaraciji hosta):

# 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

U /var/www/html/tecmint trebali biste imati sljedeću strukturu direktorija:

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

Sada idite na http://192.168.0.29/tecmint i provjerite je li stranica pravilno učitana. Većina modernih preglednika uključuje niz alata za programere. U Firefoxu ga možete otvoriti putem izbornika Tools> Web Developer .

Posebno smo zainteresirani za podizbornik Network koji će nam omogućiti praćenje svih mrežnih zahtjeva koji se događaju između našeg računala i lokalne mreže i Interneta.

Prečac do otvaranja izbornika Network u alatima za programere je Ctrl + Shift + Q . Pritisnite tu kombinaciju tipki ili je otvorite pomoću trake izbornika.

Budući da smo zainteresirani za ispitivanje prijenosa HTML, CSS i JavaScript datoteka, kliknite gumbe na dnu i osvježite stranicu. Na glavnom zaslonu vidjet ćete detalje prijenosa svih HTML, CSS i JavaScript datoteka:

Desno od stupca Veličina (koji prikazuje pojedinačne veličine datoteka) vidjet ćete pojedinačna vremena prijenosa. Također možete dvaput kliknuti bilo koju datoteku da biste vidjeli više pojedinosti na kartici Timings .

Obavezno bilježite vremena prikazana na gornjoj slici kako biste ih mogli usporediti s istim prijenosom nakon što omogućimo gzip modul.

Omogućavanje i konfiguriranje gzip modula u Nginxu

Da biste omogućili i konfigurirali gzip modul, otvorite /etc/nginx/nginx.conf , pronađite glavni blok poslužitelja kao što je prikazano na donjoj slici i dodajte ili izmijenite sljedeće retke (ne zaboravite na zarez na kraju ili će Nginx vratiti poruku o pogrešci tijekom ponovnog pokretanja kasnije!)

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

Gzip direktiva uključuje ili isključuje gzip modul, dok se gzip_types koristi za popis svih MIME vrsta koje bi modul trebao obraditi.

Da biste saznali više o MIME vrstama i pogledali dostupne tipove, idite na Basics_of_HTTP_MIME_types.

Testiranje brzine web stranice Nginx s modulom za kompresiju Gzip

Nakon što dovršimo gornje korake, ponovo pokrenimo Nginx i ponovno učitajmo stranicu pritiskom na Ctrl + F5 (opet, ovo funkcionira u Firefoxu, pa ako koristite drugi preglednik, prvo pregledajte odgovarajuću dokumentaciju) da poništimo predmemoriju i promatramo vremena prijenosa:

# systemctl restart nginx

Kartica mrežnih zahtjeva prikazuje neka značajna poboljšanja. Usporedite vremena kako biste se uvjerili, imajući na umu da su to prijenosi između našeg računala i 192.168.0.29 (prijenosi između Googleovih poslužitelja i CDN-ova izvan su našeg dohvata):

Na primjer, razmotrimo sljedeće primjere prijenosa datoteka prije/nakon omogućavanja gzip-a. Vremena su dana u milisekundama:

index.html (predstavljen s /tecmint/ na vrhu popisa): 15/4
Creative.min.css : 18/8
jquery.min.js : 17/7

Zar vas ovo ne tjera da još više volite Nginx? Što se mene tiče, ima!

Sažetak

U ovom smo članku pokazali da možete koristiti Nginx gzip modul za ubrzavanje prijenosa datoteka. Službena dokumentacija za gzip modul navodi druge konfiguracijske smjernice koje biste mogli pogledati.

Uz to, web mjesto Mozilla Developer Network sadrži unos o Network Monitoru koji objašnjava kako koristiti ovaj alat da biste razumjeli što se događa iza kulisa u mrežnom zahtjevu.

Kao i uvijek, slobodno upotrijebite obrazac za komentare u nastavku ako imate pitanja o ovom članku. Uvijek se radujemo vašem javljanju!