Como incentivar o navegador a baixar imagens do arquivo CSS mais rapidamente?

13

Eu uso CSS para colocar muitas das minhas imagens (como pano de fundo <div>) e muitas vezes acho que elas carregam muito lentamente dessa maneira. Eles parecem ser a última coisa a carregar. Mesmo pequenas imagens de ícones demoram um pouco para aparecer dessa maneira. Existe uma maneira de dizer ao navegador uma prioridade para imagens? Ou faça o download das imagens no arquivo CSS mais cedo e as renderize mais cedo?

Daniel Bingham
fonte
Os sprites CSS respondem à sua outra pergunta provavelmente também ajudarão a resolver esta.
usar o seguinte

Respostas:

10

CSS é para estilizar, não para conteúdo. Os navegadores (com razão) tentam exibir o conteúdo antes de adicionar estilo, daí o motivo pelo qual as imagens nas folhas de estilo geralmente são baixadas por último. Se as imagens são importantes para o seu conteúdo , adicione-as por meio de <IMG>tags HTML padrão .

Dan Diplo
fonte
2
Ótimos conselhos, principalmente a última frase. Imagem para decoração: CSS; Imagens para o conteúdo: HTML.
usar o seguinte
1
A descrição de Daniel das imagens às quais ele está se referindo ("planos de fundo", "ícones") faz com que pareçam muito mais com decoração do que com conteúdo. Eu acho que eles estão certos em estar no CSS.
Bobby Jack
5

Use URIs absolutos da sua folha de estilo e adicione as imagens das tags IMG a um oculto <div>na página (isso pressupõe que você esteja usando as mesmas imagens em todas as páginas; idealmente no rodapé, para que todos sejam carregados e armazenados em cache em qualquer chamada de página )

As imagens na página têm prioridade e, depois que as imagens são armazenadas em cache, elas são renderizadas imediatamente nas solicitações de página subsequentes.

danlefree
fonte
2

Para navegadores que suportam o tipo de URI de dados (consulte http://en.wikipedia.org/wiki/Data_Uri para obter informações), inclua a imagem no próprio CSS.

Isso tem algumas desvantagens:

  • Os dados são recarregados quando o CSS é, em vez de serem armazenados em cache separadamente, embora, a menos que seu CSS seja alterado regularmente, isso não será um problema.
  • A falta de herança do CSS e, portanto, pode haver momentos (desperdiçando largura de banda) em que você deve incluir o mesmo gráfico várias vezes ou alterar as classes usadas no seu documento.
  • As imagens são codificadas em base64 quando usadas dessa maneira, o que significa que elas ocupam mais largura de banda (embora o problema da largura de banda seja muito menos significativo se você estiver enviando os dados compactados).
  • Você precisará fornecer estilos alternativos para navegadores que não suportam os URIs de dados, alguns dos quais estão longe de ser incomuns (IE6 e IE7, por exemplo).
David Spillett
fonte
1

No momento, não há como especificar quais arquivos serão baixados primeiro. Para sua informação, as imagens especificadas nos arquivos CSS como imagens de plano de fundo são transferidas por último, provavelmente porque o navegador as vê sem conteúdo e, portanto, com uma prioridade mais baixa, portanto, evite usá-las para imagens importantes que você deseja carregar rapidamente.

John Conde
fonte
1

Faça as suas imagens tão pequenas quanto possível. Você pode usar o smush.it para remover bytes desnecessários.

Emily
fonte