Velocizzare Sito Web – La Compressione Gzip

Home | Blog | Velocizzare Sito Web – La Compressione Gzip

Questa volta si parla di una tecnica meno immediata e scontata della diminuzione del peso delle immagini; l’argomento di oggi è infatti la compressione gzip, di cui avete probabilmente sentito parlare. Tramite la compressione gzip è possibile migliorare notevolmente le prestazioni di un sito web e ridurre il peso complessivo delle pagine. Vediamo come.

Come Funziona Gzip

Vediamo brevemente cosa succede quando il browser richiede una pagina o un file al server. Per comodità l’ho rappresentato tramite un diagramma e una sorta di dialogo fra browser e server “umani”.
Richiesta HTTP
Browser: Hey, dammi la pagina index.html
Server: OK, ora la cerco
Server: Trovata(codice di risposta 200 OK), te la mando
Browser: 100KB? Cavolo è tantino, aspetta che la carico… … fatto!
Come fare a mettere a dieta la pagina? Si dovrebbe comprimerla tramite zip, ma sul web.. c’è gzip. Con Gzip il Browser può ricevere il file zippato, e poi decomprimerlo e mostrarlo all’utente, risparmiando un sacco di tempo!
Richiesta HTTP Compressa
Browser: Hey, dammi la pagina index.html, se hai la versione compressa prendo quella
Server: OK, ora la cerco
Server: Trovata(codice di risposta 200 OK), la zippo e te la mando!
Browser: Ottimo, solo 10Kb! La decomprimo e la invio all’utente!
La cosa è comodissima, non ci si perde nulla, e basta che il browser la supporti per rendere felici utenti e motori di ricerca; una svolta insomma!

Impostazione tramite .htaccess o PHP


Per attivare la compressione dei file è possibile usare, su Apache 2.x, la MOD_Deflate, tramite il file .htaccess:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Se invece non avete accesso al file .htaccess potete usare questo codice da inserire nei file PHP, nella testata, prima dell’apertura del tag <html>. Prima di inserire tale codice controllate tramite PHPInfo se è installato il supporto a zlib

<?php ob_start( 'ob_gzhandler' ); ?>

Controllare la Compressione


Una volta configurato il server bisogna controllare se la compressione gzip è funzionante:

  • Online: Utilizzate il test gzip online per verificare se la pagina è compressa.
  • Nel browser: Utilizzate Web Developer Toolbar > Informazioni> Visualizza Dimensioni documento per vedere se la pagina è compresso.
  • Tramite gli HTTP Headers: Utilizzate Live HTTP Headers. Cercate una riga che dice “Content-encoding: gzip”.

Siete pronti a velocizzare ulteriormente le vostre pagine? Non perdete la prossima puntata di Velocizzare Sito Web!

Velocizzare un Sito Web - Le Immagini

Come prima cosa mi sembra doveroso parlare del punto più evidente e importante che va ad influenzare le dimensioni delle pagine web: le immagini. Probabilmente vi sarete accorti che generalmente gli elementi più lenti da caricare in una pagina web sono proprio le immagini, stupende parti di grafica senza le quali probabilmente la metà dei siti web perderebbe senso.
In alcuni siti il problema sta semplicemente nel numero eccessivo di immagini, inserite senza senso ma ci sono anche portali che non possono vivere o perdono senso senza un giusto numero di foto: ad esempio i portali turistici e quelli di alberghi e ristoranti nei quali è fondamentale mostrare qualche immagine della struttura per stupire sin dalle prime occhiate il possibile cliente. Lo stesso problema si ripropone però anche in portali che non hanno a che fare così strettamente con le foto ma nei quali le immagini danno un tocco grafico fondamentale.
Parliamo quindi sin da subito non della rimozione di immagini superflue, per la quale non ci vuole alcuna guida, ma della diminuzione del “peso” di queste parti grafiche. Facendo una prima analisi tramite dei tools che si possono trovare in rete(e dei quali si parlerà nelle prossime puntate di questa rubrica) si può vedere quanto a volte le immagini possono incidere sul peso complessivo di una pagina:
Grafici Immagini
Per diminuire le dimensioni di queste immagini ci sono vari modi, vediamone due:

Salvataggio per il Web tramite Photoshop

Photoshop, il noto software della Adobe, permette il salvataggio delle immagini ottimizzate per il web, scegliendo il giusto formato di compressione ogni volta. Scegliendo questo tipo di salvataggio è possibile andare a modificare diverse opzioni di salvataggio e scegliere quale formato e qualità dell’immagine fa per noi, cercando un compromesso fra estetica e peso dell’immagine.Usando questo tipo di salvataggio è possibile ridurre drasticamente il peso delle immagini.
Dopo aver aperto Photoshop e caricato l’immagine cliccare prima di tutto su File>Save for Web & Devices per far aprire la finestra di salvataggio.
Ora bisogna impostare tutti i parametri per riuscire ad ottenere il compromesso ideale fra qualità e leggerezza. Generalmente per le immagini abbastanza grandi che non richiedono la proprietà di trasparenza io uso il formato JPEG, scegliendo di volta in volta la qualità dal menu a tendina in alto:

  • Low
  • Medium
  • High
  • Very High
  • Maximum

Si può poi andare ad operare sulla qualità tramite la scala numerica a lato da 0 a 100. In basso a sinistra, sotto l’immagine appaiono i dati che ci interessano: il peso ed il tempo di caricamento in base alla connessione, che può essere cambiata: di default è 56Kb.
Non avendo Photoshop è possibile comunque utilizzare programmi freeware come The Gimp, abbinato al plugin Save for Web.

SmushIt

Yahoo offre un ottimo servizio, Smush.it, tramite il quale è possibile ottimizzare le immagini senza perdere qualità. Per ottimizzare un’immagine non bisogna fare altro che recarsi sul sito SmushIt e scegliere in che modo inviare le immagini al tool: è possibile inserire diversi URLs, uno per linea o caricare le immagini direttamente dal proprio computer.
Alla fine del processo SmushIt restituirà le immagini ottimizzate e le renderà scaricabili sul proprio computer, indicando quanti byte sono stati salvati e qual’è la percentuale di byte risparmiati sul totale. A volte può succedere anche di ritrovarsi con immagini dalle dimensioni dimezzate grazie a questo tool, senza perdere qualità.
Screenshot di Smushit

CSS Sprites

Un modo per ridurre il numero di immagini e quindi di richieste HTTP, e diminuire in questo modo il tempo di caricamento delle pagine, è l’uso delle CSS Sprites: in pratica si crea una sola grande immagine contenente più immagini e tramite la proprietà background position dei CSS si seleziona ogni volta una sola determinata porzione di tale immagine. In questo modo il risultato è identico ma le richieste HTTP diminuiscono.
E’ particolarmente usata per gli effetti di rollover: se avete un pulsante che cambia con il passaggio del mouse potete tenere le due immagini in un’unica immagine; un’operazione del genere è abbastanza semplice rispetto alle sprite fatte su una grande immagine e prelevando porzioni all’interno di essa ma se ci pensate dimezza le richieste HTTP relative alle immagini con il rollover.
Su HTML.it c’è un’ottima guida all’uso delle CSS Sprite per chi ha tempo e voglia di farlo manualmente(è ovviamente la cosa migliore in quanto vi da la possibilità di gestire totalmente la cosa). Ci sono invece alcuni tools per la creazione automatica delle CSS Sprite, ecco una piccola lista contente alcuni di questi tool, cercando nel web ce ne sono comunque altri:


Stai cercando un'agenzia per approfondire gli argomenti di questo articolo?
Clicca qui per andare alla nostra pagina contatti.

Paolo Dello Vicario

Paolo Dello Vicario, classe 1993, si occupa di Digital Marketing e Search Marketing dal 2008, prima come freelance e poi in alcune realtà del settore, con focus su settori estremamente competitivi. Alla fine del 2014 ha fondato ByTek Marketing, società di inbound marketing con approccio ingegneristico, che sviluppa attività di digital marketing e search marketing data driven.

Parlaci del tuo Progetto
Condividi con noi i tuoi obiettivi e la tua idea di business