Scopri come velocizzare i siti web utilizzando il modulo Nginx e Gzip

Anche in un momento in cui sono disponibili velocità Internet significative in tutto il mondo, ogni sforzo per ottimizzare i tempi di caricamento del sito Web è accolto a braccia aperte.

In questo articolo discuteremo di un metodo per aumentare la velocità di trasferimento riducendo le dimensioni dei file tramite la compressione. Questo approccio apporta un ulteriore vantaggio in quanto riduce anche la quantità di larghezza di banda utilizzata nel processo e lo rende più economico per il proprietario del sito web che paga per questo.

Per raggiungere l'obiettivo indicato nel paragrafo precedente, utilizzeremo Nginx e il suo modulo gzip integrato in questo articolo. Come afferma la documentazione ufficiale, questo modulo è un filtro che comprime le risposte utilizzando il noto metodo di compressione gzip. Ciò garantisce che la dimensione dei dati trasmessi verrà compressa della metà o anche di più.

Lettura consigliata: la guida definitiva per proteggere, rafforzare e migliorare le prestazioni dei siti Web Nginx

Quando arriverai alla fine di questo post, avrai ancora un altro motivo per considerare l'utilizzo di Nginx per servire i tuoi siti Web e le tue applicazioni.

Installazione del server Web Nginx

Nginx è disponibile per tutte le principali distribuzioni moderne. Sebbene utilizzeremo una macchina virtuale CentOS 7 (IP 192.168.0.29) per questo articolo.

Le istruzioni fornite di seguito funzioneranno con poche (se non nessuna) modifica anche in altre distribuzioni. Si presuppone che la tua VM sia una nuova installazione; in caso contrario, dovrai assicurarti che non ci siano altri server web (come Apache) in esecuzione sul tuo computer.

Per installare Nginx insieme alle dipendenze richieste, utilizza il seguente comando:


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

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

Per verificare che l'installazione sia andata a buon fine e che Nginx possa servire i file, avvia il server web:


systemctl start nginx
systemctl enable nginx

quindi apri un browser web e vai su http://192.168.0.29 (non dimenticare di sostituire 192.168.0.29 con l'indirizzo IP o il nome host del tuo server) . Dovresti vedere la pagina di benvenuto:

Dobbiamo tenere presente che alcuni tipi di file possono essere compressi meglio di altri. I file di testo normale (come i file HTML, CSS e JavaScript) si comprimono molto bene mentre altri (.iso file, tarball e immagini, per citarne alcuni) no, poiché sono già compressi per natura.

Pertanto, è prevedibile che la combinazione di Nginx e gzip ci consentirà di aumentare la velocità di trasferimento del primo, mentre il secondo potrebbe mostrare poco o nessun miglioramento a livello Tutto.

È anche importante tenere presente che quando il modulo gzip è abilitato, i file HTML vengono compressi SEMPRE, ma altri tipi di file comunemente presenti in i siti web e le applicazioni (vale a dire CSS e JavaScript) non lo sono.

Testare la velocità del sito web Nginx SENZA il modulo gzip

Per iniziare, scarichiamo un modello Bootstrap completo, un'ottima combinazione di file HTML, CSS e JavaScript.

Dopo aver scaricato il file compresso, lo decomprimeremo nella directory root del nostro blocco server (ricorda che questo è l'equivalente Nginx della direttiva DocumentRoot in una dichiarazione di host virtuale 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

Dovresti avere la seguente struttura di directory all'interno di /var/www/html/tecmint:


ls -l /var/www/html/tecmint

Ora vai su http://192.168.0.29/tecmint e assicurati che la pagina venga caricata correttamente. La maggior parte dei browser moderni include una serie di strumenti per sviluppatori. In Firefox, puoi aprirlo tramite il menu Strumenti → Sviluppatore web.

Ciò che ci interessa particolarmente è il sottomenu Rete, che ci permetterà di monitorare tutte le richieste di rete in corso tra il nostro computer e la rete locale e Internet.

Lettura consigliata: installa Mod_Pagespeed per accelerare le prestazioni Nginx fino a 10 volte

Una scorciatoia per aprire il menu Rete negli strumenti per sviluppatori è Ctrl + Shift + Q. Premi la combinazione di tasti o utilizza la barra dei menu per aprirla.

Poiché siamo interessati ad esaminare il trasferimento di file HTML, CSS e JavaScript, clicca sui pulsanti in basso e aggiorna la pagina. Nella schermata principale vedrai i dettagli del trasferimento di tutti i file HTML, CSS e JavaScript:

A destra della colonna Dimensione (che mostra le dimensioni dei singoli file) vedrai i tempi di trasferimento individuali. Puoi anche fare doppio clic su un determinato file per visualizzare maggiori dettagli nella scheda Tempi.

Assicurati di prendere nota dei tempi mostrati nell'immagine sopra in modo da poterli confrontare con lo stesso trasferimento una volta che avremo abilitato il modulo gzip.

Abilitazione e configurazione del modulo gzip in Nginx

Per abilitare e configurare il modulo gzip, apri /etc/nginx/nginx.conf, individua il blocco del server principale come mostrato nell'immagine seguente e aggiungi o modifica quanto segue righe (non dimenticare il punto e virgola alla fine o Nginx restituirà un messaggio di errore durante il riavvio successivo!)


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

La direttiva gzip attiva o disattiva il modulo gzip, mentre gzip_types viene utilizzato per elencare tutti i tipi MIME che il modulo deve gestire.

Per ulteriori informazioni sui tipi MIME e visualizzare i tipi disponibili, vai a Basics_of_HTTP_MIME_types.

Testare la velocità del sito Web Nginx con il modulo di compressione Gzip

Una volta completati i passaggi precedenti, riavviamo Nginx e ricaricamo la pagina premendo Ctrl + F5 (di nuovo, funziona in Firefox, quindi se utilizzi un browser diverso consulta prima la documentazione corrispondente) per sovrascrivere la cache e osserviamo i tempi di trasferimento:


systemctl restart nginx

La scheda Richieste di rete mostra alcuni miglioramenti significativi. Confronta i tempi per verificare tu stesso, tenendo presente che si tratta dei trasferimenti tra il nostro computer e 192.168.0.29 (i trasferimenti tra i server di Google e i CDN sono fuori dalla nostra portata):

Ad esempio, consideriamo i seguenti esempi di trasferimento file prima/dopo aver abilitato gzip. I tempi sono espressi in millisecondi:

index.html (rappresentato da /tecmint/ in cima all'elenco): 15/4
Creative.min.css: 18/8
jquery.min.js: 17/7

Questo non ti fa amare ancora di più Nginx? Per quanto mi riguarda, lo fa!

Lettura consigliata: 5 suggerimenti per migliorare le prestazioni del tuo server Web Apache

Riepilogo

In questo articolo abbiamo dimostrato che è possibile utilizzare il modulo gzip di Nginx per velocizzare i trasferimenti di file. La documentazione ufficiale del modulo gzip elenca altre direttive di configurazione a cui potresti voler dare un'occhiata.

Inoltre, il sito Web Mozilla Developer Network contiene una voce sul Network Monitor che spiega come utilizzare questo strumento per capire cosa sta succedendo dietro le quinte in una richiesta di rete.

Come sempre, non esitate a utilizzare il modulo di commento qui sotto se avete domande su questo articolo. Non vediamo l'ora di sentire la tua opinione!