Naučite kako ubrzati web stranice koristeći Nginx i Gzip modul
Čak iu vremenu kada su velike brzine interneta dostupne širom svijeta, svaki napor da se optimizira vrijeme učitavanja web stranice dobrodošao je raširenih ruku.
U ovom članku ćemo raspravljati o metodi za povećanje brzine prijenosa smanjenjem veličine datoteke kroz kompresiju. Ovaj pristup donosi dodatnu korist jer također smanjuje količinu propusnog opsega koji se koristi u procesu i čini ga jeftinijim za vlasnika web stranice koji to plaća.
Da bismo postigli cilj naveden u gornjem pasusu, koristićemo Nginx i njegov ugrađeni gzip modul u ovom članku. Kao što zvanična dokumentacija navodi, ovaj modul je filter koji komprimira odgovore koristeći dobro poznatu metodu gzip kompresije. Ovo osigurava da će veličina prenesenih podataka biti komprimirana za polovicu ili čak više.
Preporučeno čitanje: Ultimativni vodič za sigurne, ojačane i poboljšane performanse Nginx web stranica
Dok dođete do dna ove objave, imat ćete još jedan razlog da razmislite o korištenju Nginxa za posluživanje vaših web stranica i aplikacija.
Instalacija Nginx web servera
Nginx je dostupan za sve glavne moderne distribucije. Iako ćemo koristiti CentOS 7 virtuelnu mašinu (IP 192.168.0.29) za ovaj članak.
Uputstva date u nastavku će raditi sa malim (ako ih ima) modifikacijama iu drugim distribucijama. Pretpostavlja se da je vaš VM nova instalacija; u suprotnom, moraćete da se uverite da ne postoje drugi veb serveri (kao što je Apache) koji rade na vašem računaru.
Da instalirate Nginx zajedno sa njegovim potrebnim zavisnostima, koristite 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 potvrdili da je instalacija uspješno završena i da Nginx može posluživati datoteke, pokrenite web server:
systemctl start nginx
systemctl enable nginx
a zatim otvorite web pretraživač i idite na http://192.168.0.29 (ne zaboravite zamijeniti 192.168.0.29 sa IP adresom ili imenom hosta vašeg servera) . Trebali biste vidjeti stranicu dobrodošlice:
Moramo imati na umu da se neke vrste datoteka mogu komprimirati bolje od drugih. Obični tekstualni fajlovi (kao što su HTML, CSS i JavaScript fajlovi) se kompresuju veoma dobro dok se ostali (.iso) datoteke, tarball-ovi i slike, da spomenemo samo neke) ne, jer su po prirodi već komprimirani.
Stoga je za očekivati da će nam kombinacija Nginx i gzip omogućiti da povećamo brzinu prijenosa prvog, dok drugi može pokazati malo ili nikakvo poboljšanje na sve.
Također je važno imati na umu da kada je modul gzip omogućen, HTML datoteke su UVIJEK komprimirane, ali druge vrste datoteka koje se obično nalaze u web stranice i aplikacije (naime, CSS i JavaScript) nisu.
Testiranje brzine Nginx web stranice BEZ gzip modula
Za početak, preuzmimo kompletan Bootstrap predložak, sjajnu kombinaciju HTML, CSS i JavaScript datoteka.
Nakon preuzimanja komprimirane datoteke, raspakiraćemo je u korijenski direktorij našeg serverskog bloka (zapamtite da je ovo Nginx ekvivalent DocumentRoot direktive u Apache deklaraciji virtualnog 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
Trebali biste imati sljedeću strukturu direktorija unutar /var/www/html/tecmint:
ls -l /var/www/html/tecmint
Sada idite na http://192.168.0.29/tecmint i uvjerite se da se stranica ispravno učitava. Većina modernih pretraživača uključuje skup alata za programere. U Firefox-u možete ga otvoriti putem Alati → Web Developer menija.
Posebno nas zanima podmeni Mreža, koji će nam omogućiti da pratimo sve mrežne zahtjeve koji se odvijaju između našeg računara i lokalne mreže i Interneta.
Preporučeno za čitanje: Instalirajte Mod_Pagespeed da ubrzate Nginx performanse do 10x
Prečica za otvaranje menija Mreža u alatima za programere je Ctrl + Shift + Q. Pritisnite tu kombinaciju tastera ili koristite traku menija da je otvorite.
Pošto smo zainteresovani da ispitamo prenos datoteka HTML, CSS i JavaScript, kliknite na dugmad u dnu i osvježite stranicu. Na glavnom ekranu ćete vidjeti detalje prijenosa svih HTML, CSS i JavaScript datoteka:
Desno od kolone Veličina (koja prikazuje pojedinačne veličine datoteka) vidjet ćete pojedinačna vremena prijenosa. Također možete dvaput kliknuti na bilo koju datoteku da vidite više detalja na kartici Timings.
Obavezno zabilježite vrijeme prikazano na gornjoj slici kako biste ih mogli uporediti sa istim prijenosom nakon što omogućimo gzip modul.
Omogućavanje i konfigurisanje gzip modula u Nginxu
Da biste omogućili i konfigurirali gzip modul, otvorite /etc/nginx/nginx.conf, locirajte glavni blok servera kao što je prikazano na donjoj slici i dodajte ili izmijenite sljedeće linije (ne zaboravite tačku i zarez na kraju ili će Nginx vratiti poruku o grešci prilikom 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 uključuje ili isključuje gzip modul, dok se gzip_types koristi za popis svih MIME tipova koje modul treba da obrađuje.
Da saznate više o MIME tipovima i pregledate dostupne tipove, idite na Basics_of_HTTP_MIME_types.
Testiranje brzine Nginx web stranice sa Gzip modulom kompresije
Kada završimo gore navedene korake, hajde da ponovo pokrenemo Nginx i ponovo učitamo stranicu pritiskom na Ctrl + F5 (opet, ovo radi u Firefoxu, tako da ako koristite drugi pretraživač, prvo pogledajte odgovarajuću dokumentaciju) da biste nadjačali keš memoriju i pogledajmo vremena prijenosa:
systemctl restart nginx
Kartica mrežnih zahtjeva pokazuje neka značajna poboljšanja. Uporedite tajminge da se sami uvjerite, imajući na umu da se radi o prijenosima između našeg računara i 192.168.0.29 (prijenosi između Google servera i CDN-ova su izvan našeg dosega):
Na primjer, razmotrimo sljedeće primjere prijenosa datoteka prije/nakon omogućavanja gzip-a. Tajming je dat u milisekundama:
index.html(predstavljen sa/tecmint/na vrhu liste): 15/4Creative.min.css: 18/8jquery.min.js: 17/7
Zar zbog toga ne volite Nginx još više? Što se mene tiče, jeste!
Preporučeno čitanje: 5 savjeta za poboljšanje performansi vašeg Apache web servera
Sažetak
U ovom članku smo pokazali da možete koristiti Nginx gzip modul za ubrzanje prijenosa datoteka. Zvanična dokumentacija za gzip modul navodi druge konfiguracijske direktive koje biste možda željeli pogledati.
Osim toga, web stranica Mozilla Developer Network ima unos o Network Monitoru koji objašnjava kako koristiti ovaj alat za razumijevanje onoga što se događa iza kulisa u mrežnom zahtjevu.
Kao i uvijek, slobodno koristite formular za komentare u nastavku ako imate bilo kakvih pitanja o ovom članku. Uvijek se radujemo Vašem odgovoru!