Otimização de site. parte I

Existem várias técnicas de otimização de sites e alguns fatores primordiais devem ser observados.

- Tamanho total dos arquivos.
- Tipo de conexão.
- Número de conexões necessárias ( HTTP ). Hyper text transfer protocol ( Protocolo de transferência de hipêr texto).
- Servidor onde o site está hospedado.

O tamanho total de arquivos, é o que tem a maior influência no carregamento da página pois quanto mais arquivos você tiver para carregar (imagens, arquivos css, arquivos javascript etc…). maior será o tempo de carregamento.

Para você entender melhor precisamos saber o que o nosso navegador faz quando entramos em um site, Primeiro ele ira realizar uma consulta ao servidor DNS, para saber qual é o endereço que estamos tentando acessar, após essa primeira consulta o navegador irá guarda esta informação em cache (normalmente).

Feito isso temos uma primeira conexão feita por protocolo HTTP, que irá baixar a página, depois ele irá analisar a estrutura da nossa página para saber se temos mais arquivos para serem buscados (css, javascript, imagens).

Cada arquivo que você indicou na sua estrutura (arquivos externos) terão que fazer mais uma conexão HTTP, é importante você saber que a conexão exige algum tempo para ser estabelecida, ( você irá notar bem isso com uma conexão de 56K :) ).

Existe uma regra que o navegador só pode abrir no máximo 2 conexões simultâneas por host. Sabendo isso podemos concluir que se uma página tem 3 arquivos javascript, 1 css, e 15 imagens ( somando 19 arquivos). Teremos que as conexões serão estabelecidas de duas a duas, até que os arquivos sejam baixados por completo.

Agora que sabemos como o navegador se comporta ao fazermos o pedido de uma página, e sabemos que ele só pode abrir duas conexões simultâneas, podemos começar a nossa otimização :D .

Normalmente utilizamos vários arquivos Javascript, um exemplo disso é a utilização de bibliotéca Jquery, também alguns arquivos css ( eu normalmente utilizo 1 arquivo css ). e cada arquivo, como sabemos estabelece uma conexão HTTP.

ex:

<link type=”text/css” rel=”stylesheet” href=”css/css.css” />
<link type=”text/css” rel=”stylesheet” href=”css/style.css” />
<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”js/slider.js”></script>

Ao invés de utilizar várias tags de Javascript e cia, podemos utilizar apenas uma tag, e ai entra o minify, ele é um script em PHP que junta todos nossos arquivos (CSS, Javascript), em um só ( atenção ele irá juntar todos os arquivos css em um só e o Javascript em outro arquivo contendo todos os arquivos js). Para instalá-lo é muito simples basta você baixar o arquivo e jogar na sua pasta raiz (algumas tags devem ser mudadas) mais tudo isso irá aparecer para você ( caso saiba o básico do inglês isso facilitará as coisas). (Visite o FAQ do site irá lhe ajudar) Utilizando o Minify teremos apenas o seguinte código:

<link type="text/css" rel="stylesheet" href="/min/b=css&amp;f=css.css,style.css" />
<script type="text/javascript" src="/min/b=js&amp;f=jquery-1.3.1.min.js,slider.js"></script>

Com isso conseguimos diminuir o número de conexões, fazendo com que ele baixe todos esses arquivos de uma vez e não estabeleça várias conexões apenas para arquivos css e javascript, e consequentemente o nosso site fica mais rápido no carregamento.

É importante ressaltar que talvez o Google de mais importância para sites com o carregamento mais rápido, então porque não dar mais importância para o desenvolvimento de códigos mais limpos e eficazes, deixar de ser apenas boas práticas e passar a ser uma grande ferramenta de SEO .

UPDATE

Veja o que matt cuts falo em uma entrevista:

O segundo tema  que Matt discutiu é o da velocidade do site.  A velocidade vai ser um enorme fator de SEO que se deslocam para 2010. Ele diz que um número de pessoas dentro do Google consideram a velocidade ser muito importante para a Web, e estão considerando que se deve desempenhar um papel nos rankings dos sites nos resultados de pesquisa.

Segundo Cutts, a velocidade não tem desempenhado um papel no ranking, no passado, mas que pode muito bem mudar.

link: http://videos.webpronews.com/2009/11/13/matt-cutts-interview/

Veja a segunda parte: Otimização de site parte II

http://www.jsddesigner.com.br/blog/otimizacao-de-site-parte-ii/

Recomendo que leia também



  1. Linkadão on quinta-feira 14, 2010

    Boa!

    [Responder]

  2. Jonathan on quinta-feira 14, 2010


    Linkadão:

    Boa!

    Obrigado, espero que tenha te ajudado :)

    [Responder]

  3. João Seixas on quinta-feira 14, 2010

    Belo post.

    Trabalho com desenvolvimento de software e já tive que aplicar muitas otimizações para diminuir tempo de resposta de sites com muitas views simultaneas…

    Vale lembrar que em alguns casos como de empresas hospedagem em massa(UOL, Locaweb, etc…) O DNS lookup pode demorar uma fração considerável do carregamento do site.

    Outra pratica muito comum é colocar arquivos de imagens, css e js, em hosts separados do HTML. Dessa forma o browser consegue abrir conexões paralelas, então você não terá apenas 2 conexões simultâneas fazendo downloads…

    [Responder]

  4. Jonathan on quinta-feira 14, 2010

    @João Seixas, muito obrigado pelo seu comentário, valeu pela dica, espero ver sua opnião aqui mais vezes :) abraço’

    [Responder]

  5. fABIANA on quinta-feira 14, 2010

    adorei o site . parabens

    [Responder]

  6. Jonathan on quinta-feira 14, 2010

    Olá fabiana, muito obrigado, espero que tenha te ajudado :) .

    [Responder]

  7. Barbara on quinta-feira 14, 2010

    Muito bom o blog.

    [Responder]

    Jonathan Resposta:

    Obrigado @Barbara espero ter ajudado você de alguma forma.

    [Responder]

  8. Dark Panda on quinta-feira 14, 2010

    Onde esta o FAQ para a dica do uso do minify? Isso é muito interessante…

    [Responder]

    Jonathan Resposta:

    Olá @Dark Panda o FAQ do minify esta ao lado direito do menu, segue o link para o mesmo code.google.com/p/minify/wiki/FAQ

    [Responder]