Non avere troppi background-image in css influisce sulle prestazioni?

Question

Alcuni utenti stanno segnalando che il mio sito è troppo lento E penso che le immagini di sfondo in css potrebbe essere un possibile colpevole

Ho un sito che utilizza un sistema di generazione personalizzata per concatenare tutti css, loro (compressore yui) comprimere, fare sprite CSS automaticamente (smartsprites) e io alla fine con un CSS per il 9kb intera pagina, questo include tutti i css per sfondo-immagini finalmente è d essi sono stati circa 60 (diversi a un medesimo sprite non sicuro di come molti)

Mi chiedevo se il comportamento predefinito dei browser è quello di scaricare le immagini in base alle esigenze (quando corrispondono un selettore) o tutti scaricare.

In questo momento Firebug in Firefox sembra suggerire che essi sono stati tutti scaricati. Quali tecniche suggeriresti userei per evitare il problema, e o mitigarlo.

modifica: Ho letto male Firebug, le immagini che vengono scaricati appartengono a una LightView che è nascosto ma lo sfondo-immagini sono abbinati alla dom.

Answer 1

No, in realtà è meglio metterli in CSS che nel markup.

Le chiamate di immagine non bloccherà la pagina e le immagini vengono caricate saranno rese sulla pagina in modo nel complesso è una buona idea per caricarli tramite CSS. Senza contare che questo disegno è anche più flessibile.

(Va da sé che ciascuno di tali immagini potrebbero occupare larghezza di banda e le richieste HTTP extra)

Answer 2

il comportamento del browser predefinito è quello di scaricare due elementi alla volta (cioè 2 richieste http), se pensi di avere un sacco di immagini creano un sottodominio per le vostre immagini come images.yoursite.com e si inizierà a vedere i browser fare richiesta in parallelo, e si può vedere qualche miglioramento in termini di prestazioni

Answer 3

(argomento laterale. Non proprio rispondere alla tua domanda. Ma potrebbe essere interessante o anche rilevanti.)

Penso che un altro possibile colpevole è che "alcuni utenti" sarà sempre la sensazione che il sito è "troppo lento". (Forse è più di un crollo mentale di Stack Overflow cosa? Che cosa fanno questi utenti considerano essere un sito veloce? Possono fornire esempi? Quanto è veloce la loro connessione e computer? Dove sono, e dove si trova il server? Cosa esattamente è lento? il processo di iscrizione? guardare i video in HD? scorrimento della finestra? Caricamento Firefox? Dopo tutto, è l'uomo .. n'est pas?)

Answer 4

Forse dare un'occhiata più da vicino l'immagine (s) si sta inviando, in particolare se ci sono un sacco di loro di essere compilato in una singola immagine "sprite".

Che cosa potrebbe accadere è che l'immagine che si sta indicando è molto grande. Certo, deve essere caricato solo una volta (il beneficio del metodo sprite), ma se si tratta di diverse centinaia di KB potrebbe sicuramente causare alcuni problemi di prestazioni.

Answer 5

C'è un bel plugin per Firefox chiamato Yslow che fornisce alcune informazioni utili circa l'ottimizzazione delle prestazioni. Esso mostra i problemi di prestazioni che ha rilevato, e ti dà collegamenti ad articoli che suggeriscono un miglioramento. http://developer.yahoo.com/yslow/

Alcune informazioni sulle migliori pratiche http://developer.yahoo.com/performance/rules.html