Usare gli sprites CSS per velocizzare il tempo di caricamento di un sito web

Velocizzare un sito web è molto importante, e lo sarà sempre di più, per cui conviene mettersi subito al lavoro 🙂

Prima di tutto devi sapere che una pagina web è composta da molto oggetti, come immagini, fogli di stile, javascript, ecc… quando visiti la pagina web, il tuo browser deve caricare tutti questi elementi, e cosa fa? Li chiede al server che ospita gli elementi tramite diverse richieste HTTP. Ogni richiesta ovviamente impiega un certo periodo di tempo per ricevere una risposta (l’oggetto), che si traduce in un ritardo nel tempo di caricamento complessivo della pagina web.

Quindi, più oggetti ci sono, più richieste vengono eseguite, più si incrementa il tempo di caricamento.

Solitamente le immagini sono gli oggetti che vanno ad effettuare il maggior numero di richieste all’interno di una pagina web (ma dipende da quante immagini ci sono effettivamente), per cui ridurre il numero di queste tipologie di richieste può portare ad un bell’incremento del tempo di caricamento dell’intera pagina.

Come?

Utilizzando gli sprites.

Cosa sono gli sprites

Il concetto è quello di accorpare più immagini in una sola immagine e poi tramite CSS, selezionare e mostrare solamente l’immagine desiderata. Le dimensioni in Byte saranno più o meno uguali, mentre il numero di richieste HTTP passerà da N a 1.

Da 3 immagini con peso totale pari a 11.6+17.6+18.2 = 47.4 KB che generano 3 richieste HTTP, sono passato ad avere un’unica immagine di dimensione 46.8 KB (è addirittura diminuita) che genera una sola richiesta HTTP.

Come si utilizzano

È come avere due fogli uno sopra l’altro. Quello sotto contiene tutte le immagini, quello sopra ha un buco rettangolare che permette di vedere una sola immagine del foglio sotto, funziona da maschera. Per mostrare un’immagine diversa, basta muovere il foglio sopra e ingrandire/rimpicciolire il buco rettangolare.

Ad esempio, partendo dall’immagine di prima che contiene 3 immagini:

Applica sopra il foglio di carta (nero e semi-trasparente in questo caso). Poi creo il buco proprio sopra la prima immagine e l’utente finale vedrà solamente il logo di robertoiacono.it. Dopodichè, sposto il foglio di carta verso destra, adatto il rettangolo alla nuova immagine e l’utente vedrà solamente il mio avatar.

Nella pratica, questo è il risultato:

Come vedi, ho mostrato le tre immagini utilizzandone solo una!

L’idea

Il codice CSS da utilizzare è molto semplice.

L’idea è quella di creare più contenitori <div> a cui assegnare un identificatore univoco id ciascuno. Per ognuno di essi, tramite CSS, dovrai dire che vuoi utilizzare lo sprite come sfondo del contenitore, indicare la coordinata esatta del punto in alto a sinistra in cui comincia l’immagine da mostrare e le dimensioni del contenitore (solitamente uguali a quelle dell’immagine da mostrare).

Nella pratica

Creo tre contenitori con identificatori sprite-homepage-logo, sprite-homepage-avatar e sprite-homepage-newsletter  all’interno del file index.php (file che solitamente genera la homepage, ma puoi farlo in qualsiasi altro file):

[php]
<div id="sprite-homepage-logo"></div>
<div id="sprite-homepage-avatar"></div>
<div id="sprite-homepage-newsletter"></div>
[/php]

Per associare lo stile a ciascun contenitore, devo conoscere le dimensioni dell’immagine e le coordinate esatte del punto in alto a sinistra dell’immagine stessa all’interno dello sprite. Come trovare queste informazioni? Le dimensioni le puoi trovare nelle proprietà dell’immagine originale (semplicemente cliccando col tasto destro > Proprietà); per le coordinate, utilizzo un programma di foto editing.

Se usi programmi gratuiti che generano automaticamente gli sprites, questi forniscono anche le coordinate (vedi paragrafo successivo).

Ora devo aggiungere il codice CSS all’interno del file style.css, dove indicherò lo sfondo, la coordinata e le dimensioni dell’immagine.

[css]
#sprite-homepage-logo {background: url(images/test-sprites.png) 0 0 no-repeat; width: 95px; height: 100px;}
#sprite-homepage-avatar {background: url(images/test-sprites.png) -97px 0 no-repeat; width: 100px; height: 95px;}
#sprite-homepage-newsletter {background: url(images/test-sprites.png) -197px 0 no-repeat; width: 100px; height: 100px;}
[/css]

Per lo sfondo, utilizzo la proprietà background, dove indicherò l’URL dell’immagine sprite che voglio utilizzare, e la coordinata -x e -y del punto in alto a sinistra dell’immagine all’interno dello sprite. Presta bene attenzione a mettere il segno meno (gli assi sono -x e -y)!

La larghezza viene indicata con la proprietà width, mentre l’altezza con height.

Prendi in considerazione la seconda immagine, quindi il contenitore con identificatore sprite-homepage-avatar, l’immagine è larga 100px (quindi width:100px;), alta 95px (quindi height:95px;) ed inizia alla coordinata (-97,0).

Chi utilizza gli sprites?

Sicuramente chi pone molta attenzione alla velocità di caricamento del proprio sito, un esempio?

Forse questi li hai già sentiti nominare, Google, Facebook e Twitter …

Come si creano

Il metodo migliore è crearseli da solo con programmi di foto editing, come Photoshop, così da avere il file originale da modificare in ogni momento.

Crea un’immagine con sfondo trasparente (ad esempio con formato .png) ed aggiungi le immagini in spazi rettangolari/quadrati. Devi fare attenzione a non sovrapporre questi spazi!

Il mio consiglio è creare un livello per ogni immagine ed assegnare un nome univoco al livello stesso. In questo modo sarà molto più semplice trovare l’immagine all’interno dello sprite e trovare la coordinata in alto a sinistra. Per le dimensioni, utilizzo quelle dell’immagine originale.

Se non vuoi utilizzare programmi sofisticati, prova a dare un’occhiata a SpriteMe e Spritebox.

Altro consiglio, crea più sprites per suddividere il sito in moduli. Ad esempio uno sprite per la struttura del sito (logo, simboli, parti del tema principali), uno per i pulsanti, uno per i banner pubblicitari e così via, migliorando la gestione futura degli sprites.

Fai attenzione a non creare un unico sprite di dimensioni elevate, altrimenti corri il rischio che l’utente (soprattutto mobile) non riesca a scaricare (o impiegherà molto tempo) lo sprite e non visualizzerà correttamente il sito. A volte è meglio avere due sprite da 150kb ciascuno piuttosto che uno da 300kb.

Dati reali

Ho (insanamente) deciso di utilizzare gli sprites sul mio blog, sostituendo le immagini statiche (come i banner pubblicitari) ma soprattutto modificando interamente il tema!

Cosa vuol dire?

Ho preso ogni immagine utilizzata dal mio tema o che ho aggiunto io ma che rimane sempre uguale (come l’immagine della newsletter) e ho creato degli sprites che le raggruppassero, così da ridurre notevolmente le richieste HTTP al server.

Ho effettuato un po’ di test con il servizio gratuito di Pingdom, sia per l’homepage che per un articolo. Sicuramente è possibile che ci siano state diverse variazioni delle variabili principali, come la risposta del server, DNS, plugin di Facebook e degli altri Social, quindi non è corretto attribuire le variazioni unicamente al processo di ottimizzazione delle immagini. Per ridurre questo problema ho effettuato più test e ho utilizzato un valore medio dei risultati ottenuti per fare dei paragoni con e senza ottimizzazione. Non prendere questi risultati per corretti al 100%, ma usali piuttosto per farti un’idea approssimativa di quanto può influire l’utilizzo degli sprites in un blog WordPress attivo.

Risultato?

Dopo circa 12 ore di lavoro (e tante parole) ho ottenuto:

HOMEPAGE

• riduzione del tempo di caricamento medio da 4.48 sec a 3.67 sec, un miglioramento del 19%
• riduzione delle richieste HTTP da 111 a 77, un risparmio del 31%
• aumento della valutazione di Pingdom sull’ottimizzazione della pagina da 78 a 85
• il sito è più veloce di altri siti testati con pingdom, passando dal 35% iniziale al 44% dopo l’ottimizzazione

Come mostro nell’immagine successiva, la diminuzioni delle richieste HTTP è dovuta unicamente alla riduzione delle immagini utilizzate!

Ti vorrei far notare che la dimensione delle immagini caricate è leggermente superiore rispetto a quelle precedenti, ma nonostante ciò, il tempo di caricamento è inferiore:

Ecco il peso delle immagini sul tempo di caricamento della homepage rispetto a tutti gli altri componenti della pagina stessa:

Sono passato dal 91% al 78%, non male vero?

ARTICOLO

• riduzione del tempo di caricamento medio da 5.04 sec a 3.90 sec, un miglioramento del 23%
• riduzione delle richieste HTTP da 182 a 150, un risparmio del 18%
• aumento della valutazione di Pingdom sull’ottimizzazione della pagina da 71 a 79
• la pagina è più veloce di altri siti testati con pingdom, passando dal 31% iniziale al 41% dopo l’ottimizzazione

Che aspetti?

Come hai visto il miglioramento del tempo di caricamento può essere davvero notevole (attorno al 20%), senza considerare che il server è molto meno stressato (sempre attorno al 20% in meno).

Certo, il tempo speso per modificare il tema (e soprattutto la poca voglia) non gioca a tuo favore, ma i guadagni (anche monetari) ne valgono sicuramente lo sforzo!

Che aspetti? Corri subito ad applicare le prime modifiche! 🙂