Come migliorare i tempi di caricamento su Nginx

Introduzione

Nginx è un ottimo software web server, la configurazione di base che si ritrova dopo la sua installazione può essere tuttavia ottimizzata. Esistono alcune funzioni di Nginx che, quando attivate, permettono di massimizzare la velocità di trasferimento dei file tra server e client e ridurre al massimo i tempi di caricamento delle pagine.

In questo tutorial ti mostro come ho configurato il web server di EVE Milano ed, in genere, i server Nginx dei miei clienti.

Innanzitutto, ti mostrerò come abilitare la compressione Gzip per tipi specifici di file. Quindi configureremo il caching del browser per una spinta extra. Questi metodi miglioreranno la velocità di qualsiasi sito in esecuzione su Nginx, indipendentemente dal software o dal CMS (WordPress, Joomla, Drupal, …) con cui è stato creato.

Ad esempio, un’installazione di WordPress lenta e poco performante vedrebbe guadagni immediati senza che il webmaster debba toccare una linea di codice del CMS, o pagare per costosi servizi e plugin di prestazioni. Questo approccio funziona anche se il sito è in esecuzione su hosting condiviso a bassa potenza, a condizione che il server sia Nginx e sia possibile modificare il file di configurazione del blocco (il Virtual Host).

Prerequisiti

Per completare questo tutorial, avrai bisogno di:

• Un server Ubuntu 16.04, incluso un utente non root sudo.
• Nginx installato sul tuo server.

Prima di iniziare

Prima di partire con le ottimizzazioni del web server Nginx fai una fotografia della situazione iniziale. Esegui un test di velocità con i principali tool (Page Speed, Nginx, Pingdom e WebPageTest) e salva i report. In seguito potrai confrontare i miglioramenti ottenuti.

Configura Nginx

Invece che modificare il file di configurazione generale di Nginx (dentro /etc/nginx/) preferisco modificare il file di configurazione del singolo blocco del sito, questo mi permette di gestire le funzionalità dei vari siti in modo più personalizzato.

Apri il file di configurazione del tuo sito via shell SSH:
sudo nano /etc/nginx/sites-available/[tuo_blocco]

oppure scaricalo in locale via (S)FTP.

Identifica il blocco server dentro al quale devi inserire i nuovi comandi:

server {
listen 80 default_server;
listen [::]:80 default_server;
...
}

Questa è la lista completa dei comandi e delle configurazioni da inserire. In seguito ti spiego la funzione di ciascun comando.

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    gzip on;
    gzip_comp_level    5;
    gzip_min_length    256;
    gzip_proxied       any;
    gzip_vary          on;

    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
    # text/html is always compressed by gzip module

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
        expires 7d;
    }
}

Abilita la compressione Gzip

File CSS, JavaScript e immagini possono occupare diverso spazio, aumentando i dati che gli utenti devono scaricare. La compressione Gzip, sia su Apache che su Nginx, permette di ridurre le dimensioni di tutti questi asset senza comprometterne la qualità ed i contenuti.

Questa funzione è disponibile nella maggior parte delle distribuzioni Linux e basta solo attivarla e configurarla correttamente. Con Gzip abilitato, i browser possono scaricare gli asset statici più rapidamente dato che pesano di meno e si trasferiscono in meno tempo da server a client.

I comandi, relativi a Gzip, inseriti nel file di configurazione sono:

• gzip on: è il primo comando, abilita la funziona gzip.
• gzip_comp_level 5: definisce il livello di compressione (hai presente RAR?). Puoi inserire un valore da 1 a 9. Secondo gli esperti 5 è il compromesso perfetto tra dimensione e carico alla CPU. A questo livello Gzip offre una compressione del 75% per la maggior parte dei file ASCII, che è un valore quasi identico a quello ottenibile con un livello di compressione pari a 9.
• gzip_min_length 256: comando per dire a Nginx di non comprimere alcun file che sia già piccolo. Il valore di default è 20 byte che, sempre secondo gli esperti, è troppo basso. Comprimere file molto piccoli spesso genera file di dimensioni maggiori. Per questo motivo si consiglia di usare un valore di 256, che è un ottimo compromesso.
• gzip_proxied any: comando per dire a Nginx di comprimere anche per i client connessi via proxy.
• gzip_vary on: comando collegato a quello precedente: vary serve per chiedere ai proxy di tenere in cache sia la versione compressa che quella non compressa, nel caso in cui gli “Accept-Encoding” del client cambiassero. La funzione permette di evitare il problema dove ad un client non in grado di interpretare contenuto compresso con Gzip (caso ad oggi sia molto raro) venga inviato un file Gzip.
• gzip_types: questo comando elenca in successione tutte le tipologie di file (MIME-types) che devono essere compresse in uscita con Gzip. Nella mia configurazione comprimo i formati più comuni. Se modifichi la lista attento a rispettare il “;” in chiusura.

Abilita il browser caching

Attraverso il browser caching è possibile chiedere al browser di salvare in cache i file del sito quando lo visita per la prima volta.

Nelle visite successive, il browser servirà le varie versioni dei file locali invece di scaricare nuovamente gli stessi file. Questo metodo permette al browser di caricare la pagina molto più velocemente dato che è servito scaricare solo una piccola parte dei file, quelli che sono cambiati rispetto all’ultima visita.

Come puoi immaginare l’esperienza utente migliora molto all’aumentare della velocità di caricamento.

Il comando “location” viene appunto utilizzato per dire ai browser quali file tenere in cache. Il comando “expires” indica la durata della cache. Come durata puoi scegliere il valore che meglio rispetta i cambiamenti che tu fai al sito. Quando i cambiamenti sul sito sono rari allungo la durata fino a 30 giorni. Quando invece i cambiamenti sono frequenti imposto la durata a 23 ore. Una media ragionevole potrebbe essere 7 giorni.

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 7d;
}

Testa il file di configurazione

Dopo aver modificato il file di configurazione del blocco Nginx, salvalo e chiudi. Prima di riavviare il web server è opportuno testare il file di configurazione per verificare che non ci siano problemi ed errori.

Apri la shell SSH e digita questo comando per avviare il test:
sudo nginx -t

Se hai fatto tutto correttamente (a me non capita mai la prima volta) non dovresti ricevere messaggi di errore. Ora puoi riavviare il web server per abilitare la nuova configurazione:
sudo systemctl restart nginx oppure sudo service nginx restart

A questo punto non ti resta che ripetere i test di velocità e confrontare i risultati. I lettori più bravi e attenti lasceranno come commento qui sotto il punteggio iniziale e quello finale di PageSpeed Insights :D