Perché utilizzare la compressione gzip
Se il costante sviluppo degli algoritmi di Google e rende ad oggi la Search Engine Optimization un processo sempre più articolato e ricco di sfumature e variabili, l’ottimizzazione della velocità di un sito web rappresenta sempre più una delle strategie on-site più efficaci e immediate per migliorarne la visibilità (oltre che ad un ottimo punto di partenza per ulteriori strategie SEO). In questo senso la compressione gzip può essere uno strumento rapido ed efficace per ridurre drasticamente i tempi di caricamento del vostro sito ed ottenere un risultato rapido in termini di usabilità e posizionamento.
Cos’è la compressione gzip
Si tratta di un metodo di compressione estremamente efficace, oltre che tra i più diffusi. A un livello più basico può essere descritto come uno strumento che accorpa stringhe di testo simili o identiche all’interno dei file richiesti al server, riducendone notevolmente le dimensioni (fino al 70%).
Come controllare se sul mio sito la compressione è abilitata
Sebbene la sua diffusione ne determini l’attivazione automatica da parte di molti server, sono altrettanti i casi in cui è necessario per il gestore di un sito attivare la compressione gzip manualmente. Si deve quindi prima di tutto controllare se è già stata attivata. Ci sono diverse soluzioni possibili:
- Chiedere direttamente al proprio servizio di hosting aprendo un ticket dell’assistenza.
- Più semplicemente analizzare il sito con degli strumenti di audit dedicati alla velocità e quindi necessariamente attenti a controllare la presenza della di questo metodo di compressione. Sia Google PageSpeed Insights che GTmetrix hanno un controllo dedicato.
Per quanti hanno più familiarità con gli strumenti di sviluppo dei browser più utilizzati, è possibile controllare la presenza della compressione gzip negli header di risposta del sito (visualizzabili alla voce networks), verificando se includono la voce:
Content-encoding : gzip
Come abilitare la compressione gzip
Ancora una volta è possibile richiedere direttamente al proprio servizio di hosting l’attivazione del servizio se prevista dalla sua offerta. Ma ci sono anche delle alternative più immediate.
Siti in WordPress
Per i siti in Worpdress la compressione gzip può essere abilitata tramite strumenti dedicati specificamente al miglioramento della velocità del sito, tra cui il popolare W3 Total Cache. L’impostazione si trova alla voce Browser Cache Settings:
Tra gli altri plugin che ne permettono l’attivazione ci sono Wp Rocket (premium) e Wp Super cache Wp Super cache. L’utilizzo di questi plugin richiede permessi di scrittura per determinati file del server. Questo ci porta al secondo metodo per abilitare la compressione gzip, utile per chi non volesse ricorrere a plugin o in generale per siti internet non realizzati in WordPress, ovvero la modifica diretta dei file del server.
Server Apache
Sarà sufficiente aggiungere questo codice in fondo al file .htaccess del vostro sito (Per le modifiche del file .htaccess valgono le solite precauzioni: si tratta di un file cruciale – modificatelo prima su una copia di sviluppo del sito e mantenete sempre una copia dell’originale antecedente alle modifiche. Testate il funzionamento del sito una volta caricato il nuovo file e in generale evitate di modificarlo se avete dubbi su quanto state facendo).
<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>
Didascalia: Il modulo deflate è specificamente dedicato alla compressione – Si tratta dell’equivalente per le versioni da Apache 2.x del modulo mod_gzip.
Server IIS
Per server IIS le istruzioni sono fornite dalla documentazione Microsoft TechNet disponibile qui.
Una volta attivata la compressione potrete fare dei test con gli strumenti elencati sopra per verificare l’attivazione del compressione gzip.
Come sfruttare al meglio la compressione gzip con CSS e HTML
Se si capisce il meccanismo fondamentale di questo metodo di compressione ci sono dei piccoli accorgimenti che permettono di sfruttarne a pieno i vantaggi. Anche se si tratta spesso di miglioramenti marginali e non di grande impatto, non c’è motivo per rinunciarvi: nell’ottimizzazione di un sito tanti piccoli dettagli possono determinare un impatto misurabile e in generale seguire buone pratiche è un fattore che fa la differenza a lungo termine, soprattutto per progetti complessi o di grandi dimensioni.
Di base la compressione gzip è efficace nel ridurre stringhe di testo ripetute nel codice delle vostre pagine o dei file utilizzati dal vostro sito. Di conseguenza, per trarne il massimo beneficio, è opportuno utilizzare quante più ripetizioni possibili nel codice.
Ad esempio, immaginiamo di dover aggiungere dei <div> nidificati all’interno di una pagina, ciascuno con la sua classe per aggiungere le istruzioni di stile. In apparenza una scrittura come la seguente è valida come qualsiasi altra:
<div class= “main-container”>
<div class= “portfolio-object”>
<div class=“single-picture”>
<div>
</div>
</div>
Tuttavia volendo ottimizzare per la compressione gzip, possiamo osservare come nel testo ci sia una diversificazione delle stringhe non necessaria. Una scrittura più adeguata sarebbe a seguente:
<div class= “portfolio-container”>
<div class= “portfolio-object”>
<div class=”portfolio-picture”>
<div>
</div>
</div>
Nonostante il maggior numero di caratteri impiegati la seconda scrittura sarebbe più economica e corretta, considerando il vantaggio che la compressione gzip trae dalla ripetizione di stringhe identiche (in questo caso la stringa “portfolio”).
Più semplicemente spiegato, il meccanismo è il seguente:
Tutto ciò viene ripetuto può essere facilmente compresso. Quindi non è c’è motivo di inserire nel codice distinzioni non necessarie, per una questione sia di chiarezza che di economicità nella compressione. In definitiva la compressione gzip premia un codice che sia ben scritto e ben strutturato e orientato su criteri di ottimizzazione e logica. Per chi è abituato ad ragionare in questi termini e a seguire buone pratiche questo non sarà certamente una sorpresa. Per chi invece approccia questo genere di problemi per le prime volte, lo sfruttamento della compressione gzip può essere un buon criterio per porsi problemi nuovi sulla scrittura corretta di codice in generale.