Sto cercando di capire in che modo gli sprites CSS migliorano le prestazioni di un sito?In che modo gli sprite CSS velocizzano un sito web?
Perché il download di più immagini di piccole dimensioni è più lento del download di una singola immagine contenente le immagini più piccole se la dimensione totale della singola immagine è la somma delle immagini più piccole?
È importante capire perché il sovraccarico di una richiesta HTTP ha un tale impatto.
Nella sua forma più semplice, una richiesta HTTP consiste nell'aprire un socket, inviare la richiesta sul socket aperto e leggere la risposta.
Per aprire un socket, lo stack TCP/IP del client invia un pacchetto TCP SYN al server. Il server risponde con un SYN-ACK e il client risponde con un ACK.
Quindi, prima di inviare un singolo byte di dati dell'applicazione, è necessario attendere un intero giro di un giro e mezzo al server, almeno.
Quindi il client deve inviare la richiesta, attendere che il server analizzi la richiesta, trovare i dati richiesti, rispedirli indietro - questo è un altro round trip più un po 'di overhead del server (si spera un piccolo overhead, anche se ho visto alcuni server lenti) più il tempo di trasmettere i dati effettivi, e questo è il caso migliore, supponendo che non ci sia congestione di rete che provocherebbe la caduta e il ritrasmissione dei pacchetti.
Ogni volta che devi evitare questo, dovresti.
I browser moderni generano più richieste in parallelo nel tentativo di ridurre parte dell'overhead coinvolto. Le richieste HTTP possono essere fatte teoricamente sullo stesso socket, rendendo le cose un po 'migliori. Ma in generale, i viaggi di andata e ritorno della rete fanno male alle prestazioni e dovrebbero essere evitati.
Un numero inferiore di viaggi di andata e ritorno verso il server. Invece di 6 (diciamo) richieste di 6 immagini diverse, ottieni una richiesta e 6 usi della stessa immagine. Se il server sta per rispondere "non è cambiato dall'ultima volta che hai chiesto" il più delle volte, ciò può essere una significativa riduzione della quantità di traffico di rete.
Perché più immagini richiedono più richieste HTTP. Vedi la regola delle prestazioni di Yahoo n. 1: Minimize HTTP Requests.
Oltre a ridurre il numero di richieste, a seconda delle immagini, è possibile che le dimensioni del file siano inferiori rispetto a quelle che sarebbero se fossero separate (a causa, penso, della quantità ridotta di metadati, tra le altre cose). Un altro vantaggio aggiunto all'uso degli sprites è che non si ha l'effetto di sfarfallio quando si passa il mouse su un elemento con uno stato di hover, che può migliorare la percezione dell'utente del rendimento della pagina. Una risorsa interessante sull'ottimizzazione delle immagini che potresti voler leggere è questa series dei post sul blog di Yahoo User Interface. Sulla rilettura delle pratiche raccomandate da Yahoo per le prestazioni, sono stato sorpreso nel vedere che anche suggested che organizzare le immagini orizzontalmente anziché verticalmente può anche ridurre le dimensioni del file.
A parte le ragioni precedenti, trovo che sia più facile lavorare con. Hai solo un file da modificare e caricare e un URL da modificare nel codice, se aggiorni l'immagine.
In realtà non è così - le immagini spritte sono molto più difficili da gestire, dal momento che è necessario tenere traccia delle coordinate di immagine secondaria nell'immagine principale. – levik
Ricorda che "sopra" può cambiare: se la tua risposta è votata, o altri entrano dopo di te, potresti finire sopra gli altri. Usa il nome utente o il nome utente dell'utente quando fai riferimento ad altri commenti qui e avrà senso, qualunque cosa accada. –
Ho fatto alcuni numeri alcuni anni fa: per un 43 byte 1x1 gif, l'overhead HTTP (non incluso un sovraccarico del pacchetto TCP) era superiore a 240 byte. –
È possibile aggiungere che, a seconda dell'immagine, la compressione può essere più efficiente. –
Inoltre, TCP/IP è più efficiente quando si tratta di trasferire file più grandi. – David