Apreneu a accelerar els llocs web amb el mòdul Nginx i Gzip

Fins i tot en un moment en què hi ha disponibles velocitats d'Internet importants a tot el món, tots els esforços per optimitzar els temps de càrrega del lloc web són benvinguts amb els braços oberts.

En aquest article parlarem d'un mètode per augmentar la velocitat de transferència reduint la mida dels fitxers mitjançant la compressió. Aquest enfocament aporta un avantatge addicional, ja que també redueix la quantitat d'ample de banda utilitzat en el procés i fa que sigui més barat per al propietari del lloc web que ho paga.

Per assolir l'objectiu indicat al paràgraf anterior, utilitzarem Nginx i el seu mòdul gzip integrat en aquest article. Tal com indica la documentació oficial, aquest mòdul és un filtre que comprimeix les respostes mitjançant el conegut mètode de compressió gzip. Això garanteix que la mida de les dades transmeses es comprimirà a la meitat o fins i tot més.

Quan arribeu al final d'aquesta publicació, tindreu un motiu més per considerar utilitzar Nginx per servir els vostres llocs web i aplicacions.

Instal·lació del servidor web Nginx

Nginx està disponible per a totes les distribucions modernes principals. Tot i que utilitzarem una màquina virtual CentOS 7 (IP 192.168.0.29) per a aquest article.

Les instruccions que es proporcionen a continuació funcionaran amb petites modificacions (si n'hi ha) també en altres distribucions. Se suposa que la vostra VM és una instal·lació nova; en cas contrari, haureu d'assegurar-vos que no hi hagi cap altre servidor web (com ara Apache) en funcionament a la vostra màquina.

Per instal·lar Nginx juntament amb les seves dependències necessàries, utilitzeu l'ordre següent:

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

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

Per verificar que la instal·lació s'ha completat correctament i que Nginx pot servir fitxers, inicieu el servidor web:

# systemctl start nginx
# systemctl enable nginx

i després obriu un navegador web i aneu a http://192.168.0.29 (no oblideu substituir 192.168.0.29 per l'adreça IP o el nom d'amfitrió del vostre servidor). Hauríeu de veure la pàgina de benvinguda:

Hem de tenir en compte que alguns tipus de fitxers es poden comprimir millor que altres. Els fitxers de text senzill (com els fitxers HTML, CSS i JavaScript) es comprimeixen molt bé mentre que altres (fitxers .iso, fitxers tarball i imatges, per citar-ne alguns) no, ja que ja estan comprimits per naturalesa.

Per tant, és d'esperar que la combinació de Nginx i gzip ens permeti augmentar les velocitats de transferència del primer, mentre que el segon pot mostrar poca o cap millora.

També és important tenir en compte que quan el mòdul gzip està habilitat, els fitxers HTML SEMPRE es comprimeixen, però altres tipus de fitxers que es troben habitualment en llocs web i aplicacions (és a dir, CSS i JavaScript) no.

Provant la velocitat del lloc web de Nginx SENSE el mòdul gzip

Per començar, baixem una plantilla Bootstrap completa, una gran combinació de fitxers HTML, CSS i JavaScript.

Després de descarregar el fitxer comprimit, el descomprimirem al directori arrel del nostre bloc de servidors (recordeu que aquest és l'equivalent Nginx de la directiva DocumentRoot en una declaració d'amfitrió virtual d'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

Hauríeu de tenir la següent estructura de directoris dins de /var/www/html/tecmint:

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

Ara aneu a http://192.168.0.29/tecmint i assegureu-vos que la pàgina es carregui correctament. La majoria dels navegadors moderns inclouen un conjunt d'eines per a desenvolupadors. Al Firefox, podeu obrir-lo mitjançant el menú Eines → Desenvolupador web.

Estem especialment interessats en el submenú Xarxa, que ens permetrà supervisar totes les sol·licituds de xarxa que passen entre el nostre ordinador i la xarxa local i Internet.

Una drecera per obrir el menú Xarxa a les eines de desenvolupament és Ctrl + Maj + Q. Premeu aquesta combinació de tecles o utilitzeu la barra de menú per obrir-la.

Com que estem interessats a examinar la transferència de fitxers HTML, CSS i JavaScript, feu clic als botons de la part inferior i actualitzeu la pàgina. A la pantalla principal veureu el detall de la transferència de tots els fitxers HTML, CSS i JavaScript:

A la dreta de la columna Mida (que mostra les mides dels fitxers individuals), veureu els temps de transferència individuals. També podeu fer doble clic a qualsevol fitxer per veure més detalls a la pestanya Horaris.

Assegureu-vos de prendre notes dels horaris que es mostren a la imatge anterior per poder comparar-los amb la mateixa transferència un cop hàgim habilitat el mòdul gzip.

Habilitació i configuració del mòdul gzip a Nginx

Per habilitar i configurar el mòdul gzip, obriu /etc/nginx/nginx.conf, localitzeu el bloc del servidor principal tal com es mostra a la imatge següent i afegiu o modifiqueu les línies següents (no oblideu el punt i coma al final o Nginx retornarà un missatge d'error mentre es reinicia més tard!)

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

La directiva gzip activa o desactiva el mòdul gzip, mentre que gzip_types s'utilitza per llistar tots els tipus MIME que ha de gestionar el mòdul.

Per obtenir més informació sobre els tipus MIME i veure els tipus disponibles, aneu a Basics_of_HTTP_MIME_types.

Prova la velocitat del lloc web de Nginx amb el mòdul de compressió Gzip

Un cop hem completat els passos anteriors, reiniciem Nginx i tornem a carregar la pàgina prement Ctrl + F5 (de nou, això funciona a Firefox, així que si utilitzeu un navegador diferent, consulteu primer la documentació corresponent) per anul·lar la memòria cau i observem els temps de transferència:

# systemctl restart nginx

La pestanya de sol·licituds de xarxa mostra algunes millores significatives. Compareu els horaris per comprovar-ho vosaltres mateixos, tenint en compte que es tracta de les transferències entre el nostre ordinador i 192.168.0.29 (les transferències entre els servidors de Google i els CDN estan fora del nostre abast):

Per exemple, considerem els següents exemples de transferència de fitxers abans/després d'habilitar gzip. Els temps es donen en mil·lisegons:

1. index.html (representat per /tecmint/ a la part superior de la llista): 15/4
2. Creative.min.css: 18/8
3. jquery.min.js: 17/7

Això no et fa estimar encara més Nginx? Pel que fa a mi, sí!

Resum

En aquest article hem demostrat que podeu utilitzar el mòdul Nginx gzip per accelerar les transferències de fitxers. La documentació oficial del mòdul gzip enumera altres directives de configuració que potser voldreu fer una ullada.

A més, el lloc web de Mozilla Developer Network té una entrada sobre Network Monitor que explica com utilitzar aquesta eina per entendre què passa darrere de les escenes d'una sol·licitud de xarxa.

Com sempre, no dubteu a utilitzar el formulari de comentaris a continuació si teniu cap pregunta sobre aquest article. Sempre estem desitjant saber de vostè!