2 de janeiro de 2008

Melhorar o tempo de carregamento de uma página!


Uma das grandes preocupações no acesso de uma página é o tempo de acesso.

Quanto mais "pesada" é a página, mais lenta ela se torna. As causas poderão ser várias, um template mal estruturado, um código CCS não optimizado, muitos widgets na sidebar (botões gráficos na barra lateral), imagens não optimizadas em tamanho ou em definição, javascript, flash...Uma coisa é certa, ou a página é relativamente rápida ou então corre-se o risco de perder utilizadores dessa mesma página.Assim, existem muitas ferramentas para testar o carregamento de páginas, uma dessas ferramentas encontra-se no site SpeedTester.
A sua utilização é bastante simples, basta digitar o endereço do seu site/blog (URL), o código de confirmação e clicar em CHECK! Este site irá criar um relatório para o tempo de abertura da página analizada. O ideal é que a página abra em menos de 6 seg. para uma ligação telefónica (56k).
Para melhorar o tempo de acesso de um determinado podemos verificar o seguinte:

1-Optimizar as METATAGS
Utilize apenas as METATAGS importantes para a indexação do seu Site/Blog. As METATAGS mais importantes são as Metatag Title (nome do site), Description (descrição do site, conteúdo para as buscas) e Keywords (palavras-chave).Outras metatags importantes são a verificação de motores de busca (ex. Google e Yahoo!) e a metatag robots.

2-Eliminar os espaços em branco no código do template
É verdade! os espaços em branco do template ocupam espaço no ficheiro!

3-Optimizar o código CSS (style) do template
Nos sites CleanCSS e/ou CSSTweaks é possível optimizar o código CSS online. Há opções para optimização simples (somente abreviatura dos parâmetros), optimização normal (deixa cada classe numa única linha) e optimização profunda (deixa tudo numa única linha).

4-Deixar os códigos em javascript em arquivos externos (fora do template)
Em vez de adicionar os códigos javascript na secção HEAD do template, adicione páginas externas. Isto contribui para que o Site/Blog carregue mais rápidamente.Exemplo disso faça o seguinte: pegue no código javascript e coloque no bloco de notas. Salve o ficheiro com o nome de javascript.js e coloque esse arquivo na directoria do site. Por fim adicione o seguinte código na secção HEAD:
script language=”JavaScript” src=”http://seu-site-grátis.com/seu-javascript.js” type=”text/javascript”

5-Deixar o arquivo CSS em arquivo Externo
Faz-se igualmente como no tópico anterior e coloca-se o código CSS no bloco de notas. De seguida grava-se o ficheiro "seu_estilo.css" e coloca-se na directoria do seu site. Por fim coloque na secção HEAD o seguinte código:
link rel=”stylesheet” type=”text/css” href=”http://seu-site-grátis.com/seu-estilo.css” /

6-TABLELESS
Tabeless significa sem tabelas num template. As Tags TABLE, TR, TD não serã mais utilizadas pois geram um enorme espaço branco no HTML e provocam o carregamento de um site mais lento. Utiliza sempre de preferência o trabalho com CSS

7-Diminuir os comentários do código do template
O template que possui vários comentários do tipo :/****início do cabeçalho***/, /***início do código***/, ???Se sabe o que cada código do template faz, não serão necessários esses comentários. Apague-os deixando o código mais leve.

8-Usar a barra "/" no fim dos directórios em endereços URL
Esta dica parece simples mas faz muita diferença! Abrir um Site/Blog com http://teublog.blogspot.com/ abre de forma mais rápida que http://teublog.blogspot.com/

9-Definir sempre a altura e largura das Imagens
Inserir uma imagem no Site/Blog sem os atributos de WIDTH e HEIGHT (largura e altura) obriga a quem navega "calcular" essas medidas, deixando o carregamento de páginas mais lento. Defina sempre esses parâmetros dentro da tag IMG SRV e veja o seu Site/Blog carregar de forma mais rápida!

10-Usar miniaturas nas imagens
Utilizar imagens em miniaturas deixa o Site/Blog com um look mais profissional e permite que a abertura das páginas se faça de um modo mais rápido. Se o leitor quiser visualizar a imagem no seu tamanho real, basta clicar sobre a miniatura. Tanto o Blogger como o WordPress têm suporte para o uso de miniaturas. Se pretende mostrar a imagem com o seu tamanho real utiliza a função "Resize" num editor de imagens do tipo Photoshop, GIMP, PSP...

11-Não usar Flash
Um efeito flash é muito engraçado mas será mesmo necesário? Lembre-se que a utilização deste tipo de animações "Consomem" espaço tornando o site mais "pesado"


Existem outras dicas para optimizar um Site/Blog, entretanto estas 11 são suficientes para melhorar o seu desempenho.
Boas Optimizações!
Pedro Santos

Sem comentários: