Come posso incoraggiare il browser a scaricare più velocemente le immagini dal file CSS?

Uso i CSS per posizionare molte delle mie immagini (come sfondi per <div>) e spesso trovo che si caricino molto lentamente in questo modo. Sembrano essere l'ultima cosa da caricare. Anche le piccole icone delle icone richiedono un po 'di tempo per essere visualizzate in questo modo. C'è un modo per dire al browser una priorità per le immagini? O farlo scaricare le immagini nel file CSS prima e renderle prima?

CSS è per lo stile, non per il contenuto. I browser (giustamente) cercano di visualizzare il contenuto prima di aggiungere uno stile, quindi il motivo per cui le immagini nei fogli di stile vengono generalmente scaricate per ultime. Se le immagini sono importanti per i tuoi contenuti, aggiungile tramite <IMG>tag HTML standard .

Usa gli URI assoluti dal tuo foglio di stile e aggiungi le immagini dai tag IMG a un nascosto <div>sulla pagina (questo presuppone che tu stia usando le stesse immagini su ogni pagina; idealmente nel piè di pagina in modo che siano tutte caricate e memorizzate nella cache in una determinata chiamata di pagina ).

Le immagini sulla pagina hanno la priorità e, una volta memorizzate nella cache, verranno visualizzate immediatamente nelle successive richieste di pagina.

Per i browser che supportano il tipo di URI dei dati (consultare http://en.wikipedia.org/wiki/Data_Uri per informazioni) per includere l'immagine nel CSS stesso.

Ciò presenta alcuni svantaggi:

• I dati vengono ricaricati quando il CSS è, piuttosto che essere memorizzati separatamente nella cache, anche se a meno che il CSS non cambi regolarmente questo non è un grosso problema.
• La mancanza di ereditarietà di CSS e tali mezzi potrebbero esserci momenti (spreco di larghezza di banda) in cui è necessario includere la stessa grafica più volte o modificare le classi utilizzate nel documento.
• Le immagini sono codificate in base64 quando utilizzate in questo modo, il che significa che richiedono più larghezza di banda (sebbene il problema della larghezza di banda sia molto meno significativo se si inviano i dati compressi).
• Dovrai fornire stili alternativi per i browser che non supportano gli URI dei dati, alcuni dei quali sono tutt'altro che rari (IE6 e IE7 per esempio).

A partire da ora non c'è modo di specificare quali file scaricare prima. Cordiali saluti, le immagini specificate nei file CSS come download di immagini di sfondo durano probabilmente perché il browser le vede senza contenuto e quindi una priorità inferiore, quindi evita di usarle per immagini importanti che desideri caricare rapidamente.

Usa gli sprite CSS , specialmente per le icone.

Rendi le tue immagini più piccole possibili. Puoi usare smush.it per rimuovere byte non necessari.