3nastri, realizzazione sitiweb, grafica a Roma.

Creare blog aziendale, locandine, carta intestata, biglietti da visita personalizzati.

GTmetrix: Minimize HTTP Requests, CSS Sprites

3nastri, realizzazione sitiweb, grafica a Roma.

Creare blog aziendale, locandine, carta intestata, biglietti da visita personalizzati.

Home » GTmetrix: Minimize HTTP Requests, CSS Sprites

GTmetrix: Minimize HTTP Requests, CSS Sprites

3Nastri Tag: Vedi tutti i 6 commenti

 

 

 

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

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>

[/learn_more]

 

 

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.

 

[box type=”download”]SCARICATE L’ESEMPIO QUI[/box]

 

 

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.

 

 

 

  • Apache 72

    ho utilizzato css generator ed ho ottenuto i codici per un’unica immagine css spriter.
    Come faccio ora ad inserirla nel sito?
    ho caricato la nuova immagine ottenuta con css spriter in …/miotema/images, dove ci sono anche le altre.
    ora nel foglio di stile mi dice css generator di inserire

    #container li { background: url(csg-50289151dcb6a.png) no-repeat top left; }

    e le css rules per le immagini.

    la domanda è:
    nel mio foglio css ci sono varie sezioni di background che richiamano le varie immagini (che io ho assemblato), su righe diverse e non in un solo richicamo , quindi come devo fare?

  • Non ho ben capito la situazione.
    Cerco di risponderti.
    Per inserirlo nel sito dovrai inserire la parte in html nella sezione in cui vuoi che appaia e i css caricati nel file di css che usi per il sito.

    Spiegami cosa vuoi fare.
    È una piccola galleria di immagini?
    Dovrei vedere qualcosa per capire meglio.
    Ci sono più richiami in base a quante immagini hai assemblato.
    Ma non capisco cosa vuoi sapere.

    Ciao!

  • Apache 72

    ok cerco di spiegarmi meglio:
    Ho assemblato le immagini che fanno parte della mia home in unica immagine sprite. ho ottenuto i codici online

    #container li { background: url(csg-50289151dcb6a.png) no-repeat top left; }

    e una serie di regole css delle immagini tipo:

    .sprite-bg_repeat{ background-position: 0 -1852px; width: 1600px; height: 223px; }
    .sprite…………..

    Bene. Ora come le inserisco nel mio tema wordpress?
    Vado nel foglio di stile del mio tema e vedo diversi richiami alle immagini come appunto quella citata bg_repeat in una riga come questa:

    background:#000 url(images/bg_repeat.jpg) repeat-y center top}

    e come questa altre stringhe contenenti i richiami alle altre immagini riferentesi ai background in varie posizioni del foglio css, cioè sono tutte sparpagliate.
    Quindi come inserisco la nuova immagine cumulativa sprite e dove?
    E poi devo rimuovere quelle esistenti nel css attualmente?

  • è un lavoro complicato.
    Soprattutto se il tema non lo hai fatto tu da zero (come mi viene da pensare) ma lo hai scaricato.
    Può essere un percorso lento e complicato perchè devi andare a sostituire i riferimenti a tutte le immagini.
    Il problema è che alcune imm avranno un repeat differente da altro.
    Devi assemblare insieme immagini vicine (come per esempio possono essere i bottoni di condivisione social).
    In ogni caso i css puoi copiarli nei css del tema (in genere style.css) e sostituirli dove serve.
    La parte in html va nella index in genere.
    Se vedi la home di questo sito la parte centrale è fatta con gli sprite, ma solo quella.
    Non puoi fare un’unica immmagine del tuo sito con gli sprite.
    Diventerebbe un lavoro complicato soprattutto se gli oggetti non rimangono fissi.
    Qual’è il sito in questione?

  • Apache 72

    temevo fosse complicato, pensavo di “spriteare” almeno le due-tre immagini principali che fanno fatica a comporsi nel caricamento. mi potresti aiutare?
    http://psicologaonlinesalerno.it

    • Ho dato un’occhiata ma così non è facile aiutarti.
      Dovrei avere accesso al sito.
      In ogni caso ho visto che le immagini sono compresse e mai scalate.
      Il sito si carica bene e velocemente.
      Quello che ti manca è sistemare il file di .htaccess.
      Il sito mi sembra ben messo.

      In realtà i 3 pezzi grossi di immagine che fanno da sfondo non li puoi unire. Perchè il corpo centrale del sito nn ha lunghezza fissa.
      Puoi unire per esempio la foglia con il loghino degli rss.