No artigo 6 mini-pixel fonts grátis para o seu design o Celso Azevedo deixou um comentário onde perguntava como criar um subdomínios para servir imagens. E porque as imagens desse subdomínio eram carregadas mais rápido.
E deu-me como exemplo o site ImageShack [http://img.site.com/imagem.png].
As perguntas são pertinentes e já em alguns artigos andei em torno da resposta a estas mesmas perguntas
Porque as imagens num subdomínio carregam mais rapidamente?
Na verdade estas não carregam mais rápido. Isto é, se não estiverem numa CDN.
Este é um ponto onde podem existir varias camadas de otimização. A imagem pode estar no mesmo servidor do site em que esta vai aparecer, ou pode-se encontrar numa CDN ou ainda num outro servidor.
As imagens ao encontrarem-se em subdomínios dão a possiblidade aos browsers de realizarem mais downloads paralelos.
O que são downloads paralelos?
Downloads paralelos são o número de elementos num website de que o browser consegue realizar download paralelamente. Ou seja ao mesmo tempo.
Por exemplo o Firefox realiza 4 downloads paralelos por "servidor" sendo que os browsers interpretam "servidores" como por exemplo um subdomínio.
weblouca.com
d1.weblouca.com
d2.weblouca.com
Estes 3 dominios difrentes, são interpretados pelos browsers como "locais diferentes" na web no entanto os subdomínios d1 e d2 podem apontar para pastas no interior da raiz do domínio weblouca.com.
Ao distribuir as imagens por estes 3 domínios permito ao Firefox realizar o download simultâneo de 12 elementos da página. No entanto um website que realize pedidos a mais de 3 domínios diferentes começa a sofrer do efeito contrário, lentidão...
Exemplo 1:
No exemplo anterior o Browser realiza dois downloads em paralelo. Ou seja, vai realizar o download dos 9 elementos do site, a partir do dominio 1. Neste exemplo demora aproximadamente 2.5 segundos a realizar o download dos 9 elementos.
Exemplo 2:
No exemplo 2 o browser continua apenas a conseguir realizar o download de 2 elementos por dominio, no entanto desta vez os elementos do website estão distribuidos entre os dominios d1 e d2. Possibilitando ao browser realizar o download de 4 elementos em paralelo. Desta forma os 9 elementos são carregados e cerca de 1.7 segundos. Quase 1 segundo mais rápido que no exemplo 1.
Como implementar um sistema deste género num website?
Para implementar algo do género que expliquei no ponto anterior, num website, é necessário possuir alguns conhecimentos da linguagem de programação em que o seu website está construído. No entanto nada de mais.
Vamos supor que o seu site grava as imagens dentro da pasta /blog/imagens/. E que são servidas para o visitante com o seguinte url:
http://site.com/blog/imagens/foto.jpg
Porque não criar um subdomínio no CPanel ou outro painel de gestão que tenha como raiz a pasta /blog/imagens/?
Vamos considerar um novo subdomínio de nome D1, sendo que o novo URL para a imagem será:
http://d1.site.com/foto.jpg
Todo o método de funcionamento do website mantém-se intacto. Simplesmente têm que mudar os URL que servem o conteúdo de http://site.com/blog/imagens/ para http://s1.site.com/.
Desta forma aumenta o numero de downloads paralelos no seu website. E consequentemente a velocidade de carregamento deste.
Aconselho tambem a leitura dos artigos especiais sobre desemprenho de websites que tenho vindo a escrever aqui no weblouca.
Julho 01, 2009