GTmetrix: Minimize HTTP Requests, CSS Sprites
Pubblicato il 27/5/2011 • Blog css, gtmetrix, http, Minimize, Requests, sito, Sprites, velocizzare
Innauguriamo dopo l’articolo su il file di .htaccess e quello sulle prestazioni di un sito secondo GTmetrix, una serie di articoli che vanno ad integrare le pratiche per migliorare le prestazioni di un sito.
Qui forniamo una traduzione ed esemplificazione delle informazione raccolte sul web e principalmente dalle Best Praticies di Yahoo.
L’80% del tempo di attesa quando si va su un sito è front-end. La maggior parte di questo tempo è impiegato per effettuare il download di immagini, fogli di stile (css), script, Flash, ecc.. Ridurre il numero di componenti riduce a sua volta il numero di richieste http necessarie per il caricamento delle pagine. Tenendo bene a mente questo fatto dobbiamo limitare, accorpare e ove possibile eliminare funzioni, file, script o pagine di stile poco utili.
Un modo per ridurre il numero dei componenti della pagina è quello di semplificare la progettazione della pagina. Ma c’è un modo per costruire le pagine con contenuti più accattivanti ottenendo anche tempi di risposta veloci? Ecco alcune tecniche per ridurre il numero di richieste http:
Combinare tutti gli script in un singolo script, e allo stesso modo tutti i CSS in un foglio di stile unico foglio di stile. L’unione di file è difficile soprattutto quando gli script e fogli di stile sono in pagine differenti e quindi in sottocartelle. Questo però diminuisce i tempi di caricamento.
Sprites CSS Usare gli sprites equivale a combinare insieme più immagini in una unica evitando di far caricare invece tutte le immagini separate. Così si riduce il numero di richieste HTTP al server. Ora vedremo come vedremo come crearli.
Vediamo come realizzare il nostro esempio.
Immaginiamo di voler creare un’immagine di 400×200 che sia composta da 4 settori che rimandano con un link a 4 zone del nostro sito. Qui potete vedere l’immagine che ho creato.
Se non lavorassimo pensando a finalizzare il lavoro con gli Sprites andremmo a creare 4 immagini separate che presenteranno i nostri link.
Noi invece costruiremo un’unica immagine in cui poi andremo ad inserire i link utilizzando dei quadranti trasparenti.
Immaginiamo poi che al passaggio del mouse su uno dei quattro quadranti ci sia un cambio di immagine. Ad esempio il primo inverta i colori e passi da sfondo rosso a bianco (stessa cosa per il numero).
Quando lavoriamo con gli sprites dobbiamo pensare già a quello che vorremo rendere alla fine del nostro lavoro.
Per avere una pagina un po’ più dinamica dovremmo ripensare questa immagine creando sia la base che la variazione al passaggio del mouse. Ecco come dobbiamo impostare tutto in una unica immagine:
L’immagine ora è di 400×400 px. Nei 200 px sopra vediamo come apparirà la nostra immagina sul sito. Nei 200 px sotto inseriremo la modalità con cui vogliamo che la nostra immagine cambi al passaggio del mouse.
Il resto lo fanno i css.
[learn_more caption=”Clicca qui per leggere il codice CSS”]| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html>
<head> <title>CSS Sprites: 1234</title> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <style media=”screen”>
#img { width: 400px; height: 200px; background: url(1234.jpg); margin: 10px auto; padding: 0; position: relative; } #img li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#img li, #img a {height: 200px; display: block;} #pannello1 {left: 0; width: 100px;} #pannello2 {left: 100px; width: 100px;} #pannello3 {left: 200px; width: 100px;} #pannello4 {left: 300px; width: 100px;}
#pannello1 a:hover {background: transparent url(1234.jpg) 0 -200px no-repeat;} #pannello2 a:hover {background: transparent url(1234.jpg) -100px -200px no-repeat;} #pannello3 a:hover {background: transparent url(1234.jpg) -200px -200px no-repeat;} #pannello4 a:hover {background: transparent url(1234.jpg) -300px -200px no-repeat;}
</style> </head>
<body> <ul id=”img”>
<li id=”pannello1″><a href=”#”></a></li> <li id=”pannello2″><a href=”#”></a></li> <li id=”pannello3″><a href=”#”></a></li> <li id=”pannello4″><a href=”#”></a></li> </ul></body> </html> |
Analizziamo ora il codice:
1-9: definiamo la nostra pagina, la codifica, il charset e il titolo.
10-18: definiamo la nostra immagine di sfondo che conterrà i link. L’immagine è di 400×200 e il richiamo è all’imm 1234.jpg (che ha dimensione 400×400, ma che verrà visualizzata solo nella prima metà avendo definito il parametro height: 200px).
19-24: definiamo i nostri 4 pannelli in cui specifichiamo il punto di partenza (left) e la larghezza (width). Abbiamo già definito l’altezza nella linea 19. Ora non resta che definire icosa visualizzeranno i nostri 4 pannelli al passaggio del mouse per il link.
25-29: richiamiamo i nostri 4 pannelli e con il parametro transparent url rimandiamo alla nostra immagine iniziale (di 400×400 px) definendo la posizione (o porzione) di immagine che andremo a caricare. La cosa è abbastanza intuitiva perché manterremo fisso il -200 che si riferisce all’altezza ma della seconda metà dall’immagine. Il parametro che varierà è la larghezza, (da 0 a -300).
Così non facciamo altro che dare le coordinate della porzione di immagine da caricare al passaggio del mouse.
Non è complicato.
Le mappe immagine combinano più immagini in un’unica immagine. La dimensione complessiva non varia, ma riducendo il numero di richieste HTTP la pagina va più veloce. Definire le coordinate della mappe immagine può essere noioso e non è difficile commettere errori, e in ogni caso utilizzarle per un intero sito web è consigliabile fino ad un certo punto.
Se volete saperne di più potete leggere anche un ottimo articolo sull’uso della Cache.
