Carregamento do site

[kinho! 7]

Ola amigos,

 

Bom comecei o desenvolvimento de um classificado online, e criei a categoria e achei legal adicionar uns icones na frente de cada menu... mais indo direto ao assunto, eu quero o site o mais 'rapido' possivel por isso nao uso imagens, é 99% em Css.

 

Minha duvida é o seguinte, essas imagens, obvio que vai deixar o site um pouco mais lento, o que voces achan, rola larga a imagens ou retirar-las ?

 

Imagens 24 x 24 -

 

[Rogério Santana 172]

Rapaz .... um site somente com texto é para leitor de tela para deficiente visual.

 

A imagem tem um poder de atração visual.

 

O que você pode é ver em qual extensão png, jpg ela fica em menor tamanho.

[Gabriel Heming 766]

um site somente com texto é para leitor de tela para deficiente visual.

Não necessariamente. O HTML 5 e CSS 3 estão ai para mostrar o que pode-se fazer com a linguagem. Sem imagens, não quer dizer visual ruim, isso é passado.

 

Mesma coisa que falar que site sem animação é feio e precisa de Flash. Com jQuery, por exemplo, você consegue usufruir de muitas técnicas que no passado eram exclusivas do Flash.

 

Voltando ao tópico, existem N formas de um site ser rápido ou lento, imagens contribuem, mas não é somente isso. Uma ferramenta como adobe flash, por exemplo, possui funções para processar uma imagem para a internet, diminuindo consideravelmente o seu tamanho.

 

Ícones pequenos, costumam possuir entre 0,5 - 1kb. Coloque 90 imagens, e aumentará em 90kb o site. A jQuery compactada possui 90kb. Isso é apenas uma situação.

 

Você vai encontrar algumas técnicas bem interessante neste link:

Por uma Web mais rápida: 26 técnicas de otimização de Sites/url]

[Ricardo Saraiva 84]

Concordo com o que o Gabriel disse.

Dei uma olhada neste link que ele passou muito interessante.

E Umas coisas que é citada no link em que ele passou que seria interessante de você utilizar Sprites, ou seja juntar todos os icones em um imagem só.

[Gabriel Heming 766]

[...]seria interessante de você utilizar Sprites, ou seja juntar todos os icones em um imagem só.

É uma excelente tática, mas deve-se cuidar com o propósito. Por exemplo, em um menu, você pode aninhar todos os ícones que se adequem ao layout. Entretanto, caso você for utilizar alguma animação, como troca de background do ícone, a forma que os ícones foram aninhados, não dará mais certo, pois existe a necessidade de outro aninhamento de ícones, que seria este tipo:

 

 

As imagens seriam a seguinte:

- normal;

- hover;

- selecionado.

 

Tudo na mesma imagem e com css e javascript (opcional), pode-se definir o "estado/exibição" da imagem. Nesse exemplo, não daria para ter todos os ícones do menu aninhado, mas eu posso ter o estado de cada um em apenas uma imagem (por ícone).

 

As vezes, se torna tão dispendioso definir todos os ícones em uma imagem só, que o custo é extremamente maior que o benefício. Assim, então, é melhor focar em pequenas otimizações com menor custo.

[Alaerte Gabriel 662]

Pode-se fazer um cachê, de arquivos que supostamente seriam estáticos em seu site, ajudaria bastante no carregamento... em seu htaccess teria que colocar o seguinte:

 

 

 

# 1 ANO
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 SEMANA
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DIAS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MINUTO
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

[Vinicius Rangel 208]

Trabalho com incoes se usa um técnica chamada css-sprite, é simplesmente deixar um monte de pequenas imagens consolidadas em uma imagem.

 

o google usa uma técnica para carregamento das imagens que consiste em utilzar o caminho em bytes que é um caminho enormeeeee.

 

basta dar uma pesquisada

[Gabriel Heming 766]

Vinicius Rangel, Data URI Scheme.

[Vinicius Rangel 208]

\o

Vinicius Rangel, Data URI Scheme.

[kinho! 7]

 

Pode-se fazer um cachê, de arquivos que supostamente seriam estáticos em seu site, ajudaria bastante no carregamento... em seu htaccess teria que colocar o seguinte:

 

 

 

# 1 ANO
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 SEMANA
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DIAS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MINUTO
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

 

Ola, voce poderia me explicar melhor qual a funçao disso ?

 

@ALL,

 

Agradeço a todos pela 'ajuda', e resumindo, é uma boa larga essas imagens ou é melhor eu retira-la ? si eu retirar vai da muita diferencia ?

 

So pra lembrar, eu vim akelas dicas , e adorei, muito obrigado!