desenv-web-rp.com

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

Eu uso CSS para colocar muitas das minhas imagens (como pano de fundo para <div>) e geralmente 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?

13
Daniel Bingham

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 forem importantes para o seu conteúdo, adicione-as por meio das tags HTML <IMG> padrão.

10
Dan Diplo

Use URIs absolutos da sua folha de estilo e adicione as imagens das tags IMG a um <div> oculto na página (isso pressupõe que você esteja usando as mesmas imagens em todas as páginas; idealmente no rodapé para todos estão 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.

5
danlefree

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).
2
David Spillett

Use sprites CSS , especialmente para ícones.

1
Bobby Jack

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

1
Emily

No momento, não há como especificar quais arquivos serão baixados primeiro. Para sua informação, imagens especificadas em arquivos CSS como imagens de plano de fundo são baixadas 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.

1
John Conde