Otimizando Velocidade de Carregamento

Postado em 2 dez , 2010 em SEO | 5 comentários

Uma das coisas que mais me irrita quando navego na internet é quando entro em um site e ele demora lá seus 2 minutos para carregar.
”
Para quem trabalha com SEO sabe que a velocidade de carregamento também passou a ser considerado como um fator de rankeamento, o que não é nada mais lógico, pois impacta diretamente numa experiência positiva do usuário em seu site.

Existem diversas ferramentas para identificar problemas de velocidade em seu site, você pode usar um plugin para FireFox desenvolvido pelo Google, o PageSpeed. Ele lhe dá um relatório bem detalhado de pontos a serem corrigidos no seu site que irão melhorar significativamente o seu desempenho.

Eu gosto bastante desde relatório do Page Speed, pois ele vai direto ao ponto, você consegue identificar rapidamente CSS desnecessários, códigos JavaScripts que podem ser compactados e imagens com resolução maior do que é realmente exibido na página do site. Além do PageSpeed temos também outro plugin que vale a pena ser estudado, o YSlow do Yahoo.

Essas ferramentas dão lhe uma direção sobre erros que podem ser facilmente corrigidos para melhorar a velocidade de carregamento do seu site. Outro local onde você deve verificar é a ferramenta para WebMaster do Google, na seção Desempenho do site, ela te mostra um gráfico bem interessante sobre o tempo de carregamento do seu site com o decorrer do tempo; neste gráfico o site analisado está demorando cerca de 6,1 segundos para carregar.

Mas o que influência o tempo de carregamento do site?

De maneira bem resumida, podemos dividir em três itens:

• Tamanho dos Arquivos
• Número de Requisições feitas no Servidor
• Servidor de Hospedagem

Ainda poderia separar um quarto item, que seria a programação do site, pois uma programação mal feita com certeza irá consumir mais processamento do servidor e influenciar diretamente no tempo de carregamento do site.

Como reduzir a velocidade de carregamento?

Agora eu vou dar algumas dicas simples, mas que muitas vezes passam despercebidas e quando empregadas podem melhorar bastante a velocidade do seu site.

Minificando os arquivos CSS

Para conseguirmos diminuir o tamanho do arquivo CSS do seu site precisamos basicamente retirar os caracteres desnecessários.
Se você utiliza DreamWeaver você pode habilitar a opção “Hidden Characters”, assim fica muito mais fácil para deletar espaços, tabs e quebra de linhas extras.
Outra maneira de reduzir o tamanho do seu CSS é a maneira como você escreve seu código, segue algumas dicas

• Evite aninhar diversas classes, ID e tags; faça o uso somente se necessário.
• Escreva seu código em uma única linha, evite múltiplas linhas para uma única regra.
• Escreva seu CSS na forma resumida sempre que possível, ao invés de escrever:
  
margin-left:20px;
margin-top:35px;
margin-right:24px;

  Faça algo assim: margin: 35px 24px 0 20px;

Minificando os arquivos JavaScript

Se você usa bibliotecas prontas, como Jquery e outras, e tem seus próprios scripts, uma dica que dou é sempre compactar esses arquivos e deixá-los com o menor tamanho possível. Ou seja, tenha duas versões destes arquivos, uma compactada e outra para edição, assim ficará muito mais fácil para uma possível atualização.

Otimizando as Imagens

É aqui que conseguirmos reduzir significativamente o tamanho e consequentemente o tempo de carregamento, porque apesar das minificações feitas nos CSS e JavaScript, ainda sim não representam um percentual tão grande em quesito de redução quanto as imagens.

O que acontece é que muitas vezes quando requisitamos uma imagem o navegador carrega, por exemplo, uma com uma resolução de 800×600, quando o que é redimensionado no site é uma imagem de 300×225. Utilizando o plugin PageSpeed fica muito fácil identificar esse tipo de problema.

Outra dica importante é usar o formato correto das imagens. Deixe o JPG para imagens realistas, com diversos tons e gradientes. Geralmente ficarão com um tamanho bem reduzido quando comparada a uma imagem no formato GIF ou PNG.

Para ajudar a identificar os arquivos mais pesados em seu site, uma ferramenta bem interessante é o Inspetor de Elementos, que vem por padrão no Google Chrome. Veja na aba “Resources” e depois no Gráfico por “Size”.

Com esta ferramenta fica muito fácil identificar quais arquivos devem ser focados no trabalho de minificação e também torna possível identificar arquivos desnecessários que estão sendo carregados junto com a página.

Reduzindo o número de requisições da página

Outro fator importante para que seu site carregue mais rápido é o número de requisições feitas no servidor. Agora vamos às dicas:

• Inclua se possível todos os arquivos javascripts num mesmo arquivo externo; em vez de termos 5 scripts carregando diferentes funções reduzimos para um único arquivo.
• O mesmo vale também para as folhas de estilo, junte todas elas em um único arquivo.
• Use CSS Sprite. Ou seja, junte todas as imagens comuns do site como backgrounds, image replacement em um único arquivo e manipule-as através do background-position no CSS. Dessa maneira além de diminuir o tamanho da imagem você também consegue diminuir o número de requisições feitas pelo servidor.

Outra dica importante e bastante útil para quem utiliza compartilhadores de notícias incorporados a página: sempre que possível verifique o código deles, e veja se é realmente necessário utilizar eles para o seu nicho. Veja se seus leitores ou clientes realmente os utilizam para divulgar suas informações, pois muito deles roubam bastante tempo de carregamento da página, principalmente aqueles que são instalados com uso de iframe.

Bem, espero que tenha ajudado vocês com este artigo, e que essas dicas possam ter sido úteis. Qualquer dúvida só comentar ali em baixo.