Aflați cum să accelerați site-urile web folosind modulul Nginx și Gzip

Chiar și într-o perioadă în care viteze semnificative de internet sunt disponibile pe tot globul, orice efort de a optimiza timpii de încărcare a site-ului web este binevenit cu brațele deschise.

În acest articol vom discuta despre o metodă de a crește vitezele de transfer prin reducerea dimensiunilor fișierelor prin compresie. Această abordare aduce un avantaj suplimentar prin faptul că reduce, de asemenea, cantitatea de lățime de bandă utilizată în proces și o face mai ieftină pentru proprietarul site-ului care plătește pentru aceasta.

Pentru a îndeplini scopul menționat în paragraful de mai sus, vom folosi Nginx și modulul său încorporat gzip în acest articol. După cum se arată în documentația oficială, acest modul este un filtru care comprimă răspunsurile folosind binecunoscuta metodă de compresie gzip. Acest lucru asigură că dimensiunea datelor transmise va fi comprimată la jumătate sau chiar mai mult.

Lectură recomandată: Ghidul suprem pentru a securiza, a consolida și a crește performanța site-urilor web Nginx

Până când ajungeți la capătul acestei postări, veți avea încă un motiv să luați în considerare utilizarea Nginx pentru a vă servi site-urile și aplicațiile.

Instalarea serverului web Nginx

Nginx este disponibil pentru toate distribuțiile moderne majore. Deși vom folosi o mașină virtuală CentOS 7 (IP 192.168.0.29) pentru acest articol.

Instrucțiunile furnizate mai jos vor funcționa cu mici modificări (dacă există) și în alte distribuții. Se presupune că VM dvs. este o instalare nouă; în caz contrar, va trebui să vă asigurați că nu există alte servere web (cum ar fi Apache) care rulează pe computer.

Pentru a instala Nginx împreună cu dependențele necesare, utilizați următoarea comandă:


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

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

Pentru a verifica dacă instalarea s-a finalizat cu succes și că Nginx poate servi fișiere, porniți serverul web:


systemctl start nginx
systemctl enable nginx

apoi deschideți un browser web și accesați http://192.168.0.29 (nu uitați să înlocuiți 192.168.0.29 cu adresa IP sau numele de gazdă al serverului dvs.) . Ar trebui să vedeți pagina de bun venit:

Trebuie să reținem că unele tipuri de fișiere pot fi comprimate mai bine decât altele. Fișierele text simplu (cum ar fi fișierele HTML, CSS și JavaScript) se comprimă foarte bine, în timp ce altele (.iso fișierele, tarball-urile și imaginile, pentru a numi câteva), nu, deoarece sunt deja comprimate prin natura lor.

Astfel, este de așteptat ca combinația dintre Nginx și gzip ne va permite să creștem vitezele de transfer ale primului, în timp ce cel din urmă poate prezenta o îmbunătățire mică sau deloc la toate.

De asemenea, este important să rețineți că, atunci când modulul gzip este activat, fișierele HTML sunt ÎNTOTDEAUNA comprimate, dar alte tipuri de fișiere întâlnite frecvent în site-urile web și aplicațiile (și anume, CSS și JavaScript) nu sunt.

Testarea vitezei site-ului Nginx FĂRĂ modulul gzip

Pentru început, să descarcăm un șablon complet Bootstrap, o combinație excelentă de fișiere HTML, CSS și JavaScript.

După descărcarea fișierului comprimat, îl vom dezarhiva în directorul rădăcină al blocului nostru de server (rețineți că acesta este echivalentul Nginx al directivei DocumentRoot într-o declarație de gazdă virtuală 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

Ar trebui să aveți următoarea structură de directoare în /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Acum accesați http://192.168.0.29/tecmint și asigurați-vă că pagina se încarcă corect. Cele mai moderne browsere includ un set de instrumente pentru dezvoltatori. În Firefox, îl puteți deschide prin meniul Instrumente → Dezvoltator web.

Suntem interesați în special de submeniul Rețea, care ne va permite să monitorizăm toate solicitările de rețea care se desfășoară între computerul nostru și rețeaua locală și Internet.

Lectură recomandată: Instalați Mod_Pagespeed pentru a accelera performanța Nginx de până la 10 ori

O comandă rapidă pentru deschiderea meniului Rețea din instrumentele pentru dezvoltatori este Ctrl + Shift + Q. Apăsați acea combinație de taste sau utilizați bara de meniu pentru a o deschide.

Deoarece suntem interesați să examinăm transferul fișierelor HTML, CSS și JavaScript, faceți clic pe butoanele din partea de jos și reîmprospătați pagina. În ecranul principal, veți vedea detaliile transferului tuturor fișierelor HTML, CSS și JavaScript:

În dreapta coloanei Dimensiune (care arată dimensiunile individuale ale fișierelor), veți vedea intervalele de transfer individuale. De asemenea, puteți face dublu clic pe orice fișier pentru a vedea mai multe detalii în fila Timings.

Asigurați-vă că luați notițe despre momentele afișate în imaginea de mai sus, astfel încât să le puteți compara cu același transfer după ce am activat modulul gzip.

Activarea și configurarea modulului gzip în Nginx

Pentru a activa și configura modulul gzip, deschideți /etc/nginx/nginx.conf, localizați blocul serverului principal așa cum se arată în imaginea de mai jos și adăugați sau modificați următoarele linii (nu uitați punctul și virgulă de la sfârșit sau Nginx va returna un mesaj de eroare în timp ce reporniți mai târziu!)


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

Directiva gzip activează sau dezactivează modulul gzip, în timp ce gzip_types este folosit pentru a enumera toate tipurile MIME pe care trebuie să le gestioneze modulul.

Pentru a afla mai multe despre tipurile MIME și pentru a vedea tipurile disponibile, accesați Basics_of_HTTP_MIME_types.

Testarea vitezei site-ului Nginx cu modulul de compresie Gzip

După ce am finalizat pașii de mai sus, să repornim Nginx și să reîncărcăm pagina apăsând pe Ctrl + F5 (din nou, aceasta funcționează în Firefox, deci dacă utilizați un browser diferit, consultați mai întâi documentația corespunzătoare) pentru a suprascrie memoria cache și să observăm timpii de transfer:


systemctl restart nginx

Fila de solicitări de rețea prezintă câteva îmbunătățiri semnificative. Comparați momentele pentru a vedea singur, ținând cont de faptul că este vorba despre transferurile dintre computerul nostru și 192.168.0.29 (transferurile între serverele Google și CDN-uri sunt dincolo de înțelegerea noastră):

De exemplu, să luăm în considerare următoarele exemple de transfer de fișiere înainte/după activarea gzip. Timpurile sunt date în milisecunde:

index.html (reprezentat prin /tecmint/ în partea de sus a listei): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Asta nu te face să iubești și mai mult Nginx? În ceea ce mă privește, așa este!

Lectură sugerată: 5 sfaturi pentru a crește performanța serverului dvs. web Apache

rezumat

În acest articol, am demonstrat că puteți utiliza modulul Nginx gzip pentru a accelera transferurile de fișiere. Documentația oficială pentru modulul gzip listează alte directive de configurare la care poate doriți să le aruncați o privire.

În plus, site-ul web Mozilla Developer Network are o intrare despre Network Monitor care explică cum să utilizați acest instrument pentru a înțelege ce se întâmplă în culise într-o solicitare de rețea.

Ca întotdeauna, nu ezitați să utilizați formularul de comentarii de mai jos dacă aveți întrebări despre acest articol. Așteptăm mereu cu nerăbdare vești de la tine!