UX & Coding

Compressione Gzip per aumentare la velocità di caricamento

"Gzip permette al server di comprimere le pagine web, i fogli stile e i JavaScript riducendo drasticamente i tempi di trasferimento"

Gzip è un formato di file e un’applicazione software utilizzata per la compressione e decompressione di file.

Viene attivata dai server web, come ad esempio Apache, IIS e nginx e consente una riduzione del peso delle risorse (HTML, CSS, JavaScript, ecc…) durante lo scambio di dati. Non funziona sulle immagini perché queste sono di solito compresse in un modo diverso.

Compressione Gzip

Il browser del visitatore riceve le risorse compresse e le decomprime automaticamente in una frazione di secondo; se non supporta Gzip, i file vengono inviati nel loro stato originale (non compresso).

Gzip oggi è molto diffuso ed è difficile trovare casi in cui non viene supportato, infatti le versioni dei browser che integrano il supporto sono molto datate:

  • Netscape 6+
  • Internet Explorer 5.5+ (dal 2000)
  • Opera 5+ (dal 2000)
  • Lynx 2.6+ (dal 1999)
  • Firefox 0.9.5+ (dal 2001)
  • Chrome (da sempre)
  • Safari (da sempre)

Verificare se la compressione Gzip è attiva

Il modo più veloce e semplice è quello di utilizzare uno dei tanti servizi gratuiti come checkgzipcompression.com che attraverso l’inserimento della url controlla se la compressione è abilitata e a quanto corrisponde la quantità di dati risparmiata.

Controllare Gzip Tool

Il secondo metodo per verificare se la compressione Gzip è attiva è controllare se nell’intestazione della risposta HTTP il campo “content-encoding: gzip” è presente.

Controllare Gzip Network
Attraverso strumenti come il Devtools integrato a Google Chrome è possibile effettuare il controllo

Questo è l’header che il browser cerca quando invia una richiesta al server.

Abilitare la compressione Gzip

Ci sono diversi modi di attivare la compressione a seconda della versione del web server o dell’hosting che si utilizza.

Tramite il cPanel

Tutti gli hosting più avanzati e moderni come l’ottimo SiteGround consentono di gestire le impostazione dal cPanel (un pannello utilizzato per facilitare la gestione di account su server/hosting).

Da qui è possibile attivare su tutte le risorse la compressione o scegliere su quali deve essere avviata.

Abilitare Gzip cPanel
Abilitare Gzip cPanel

Con Apache e .htaccess

La modalità più diffusa di abilitazione della compressione Gzip è attraverso la modifica del file .htaccess: la maggior parte degli hosting condivisi, come quelli per WordPress, utilizza Apache e basterà quindi aggiungere queste semplici istruzioni e salvare il file.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Su web server NGINX con nginx.conf

Per abilitare la compressione in nginx è necessario aggiungere il seguente codice al file di configurazione:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Abilitare Gzip su IIS

Se il web server è IIS, caso più raro, ci sono due diversi tipi di compressione: statica e dinamica. La documentazione ufficiale spiega come abilitare la compressione.

Quando non ha senso comprimere tutte le risorse

Ogni volta che una risorsa viene compressa sul server, il processore deve eseguire delle operazioni per applicare la compressione.

Consumo CPU Gzip

Sono operazioni molto piccole, ma se il sito riceve moltissime visite ed il server sfrutta prestazioni condivise (come nella maggior parte dei casi) è possibile utilizzare meglio l’hardware a disposizione.

Ci principalmente sono due casi che è opportuno prendere in considerazione:

  • Immagini e PDF: se queste risorse sono numerose, non andrebbe abilitata la compressione per questi file dato che sono già compressi e comprimendoli di nuovo non si sprecano solo risorse, ma si può incorrere in un output di peso maggiore
  • Risorse molto piccole: dato che la dimensione MTU di un pacchetto TCP è di 1500 byte, comprimere un file che pesa ad esempio 1300 byte è inutile dato che verrà indipendentemente trasmesso nello stesso pacchetto (1500 byte) e si avrà quindi un consumo di risorse inutile

Questo tipo di attenzione rientra in attività o casi dove le risorse hardware sono estremamente sensibili ed importanti, ma nella stragrande maggioranza delle situazioni comprimere tutte le risorse non crea nessun tipo di problema.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.