Será que ter muitos imagem de fundo em CSS afeta o desempenho?

Question

Alguns usuários estão relatando que o meu site é muito lento E eu acho que imagens de fundo em css pode ser um possível culpado

Eu tenho um site que usa um sistema de compilação personalizada para concatenar todos css, comprimi-los (yui compressor), sprites make css automaticamente (smartsprites) e eu acabar com uma CSS 9kb para o página inteira, isso inclui tudo css para o fundo-imagens nas últimas é D eles eram cerca de 60 (vários ir para o mesmo Sprite não sei quantos)

Eu queria saber se o comportamento padrão dos navegadores é baixar as imagens conforme necessário (quando eles combinam um seletor) ou baixá-los todos.

Agora o Firebug no Firefox parece sugerir que eles estão todos foi baixado. Quais as técnicas que você sugere que eu uso para evitar o problema, e ou mitigá-la.

edit: Eu descaracterizou Firebug, as imagens que estão sendo baixados pertencem a uma lightview que está escondido, mas o fundo-imagens são combinadas ao dom.

Answer 1

Não, na verdade, é melhor colocá-los no CSS do que na marcação.

As chamadas de imagem não irá bloquear a página e como as imagens são carregadas que será processado na página de modo geral, é uma boa idéia para carregá-los via CSS. Para não mencionar que este projeto também é mais flexível.

(Escusado será dizer que cada uma dessas imagens vai ocupar largura de banda e solicitações HTTP extras)

Answer 2

o comportamento navegador padrão é o download de dois itens de uma vez (ou seja, 2 solicitações HTTP), se você acha que tem muitas imagens criar um sub-domínio para suas imagens como images.yoursite.com e você vai começar a ver os navegadores fazer pedido paralelo, e você pode ver alguma melhoria no desempenho

Answer 3

(tema Side. Na verdade, não respondendo à sua pergunta. Mas pode ser interessante ou mesmo relevante.)

Eu acho que outro possível culpado é que "alguns usuários" sempre vai se sentir que seu site é "muito lento". (Talvez seja mais de um colapso mental de uma coisa Stack Overflow? O que esses usuários consideram ser um site rápido? Pode dão exemplos? Qual é a velocidade sua conexão e computador? Onde eles estão, e onde é o seu servidor localizado? O exatamente é lenta? o processo de inscrição? Assistir a vídeos em HD? Rolagem da janela? Carregando Firefox? Afinal de contas, de seres humanos .. n'est pas?)

Answer 4

Talvez dar uma olhada na imagem (s) que você está enviando, especialmente se há um monte deles que estão sendo compilados em uma única imagem de "duende".

O que pode estar acontecendo é que a imagem que você está apontando para é muito grande. Claro, isso só deve ser carregado uma vez (o benefício do método Sprite), mas se é várias centenas de KB certamente poderia causar alguns problemas de desempenho.

Answer 5

Há uma boa firefox plugin chamado Yslow que lhe dá algumas informações úteis sobre otimização de desempenho. Ela mostra-lhe problemas de desempenho que detectados, e dá-lhe links para artigos que sugerem uma melhoria. http://developer.yahoo.com/yslow/

Algumas informações sobre as melhores práticas http://developer.yahoo.com/performance/rules.html