A velocidade de um site depende muito da percepção dos seus usuários. Existem muitos pequenos truques para melhorar o tempo gasto pelo browser para desenhar suas páginas e assim dar a impressão de que o seu site está mais rápido. No Internet Explorer (não sei se a regra se aplica aos demais), todos os recursos existentes na seção <head> são carregados em memória antes de o browser começar a desenhar a página. Se você transferir as solicitações para a seção <body>, os recursos serão carregados simultaneamente com o desenho da página.
Outra forma de melhorar a velocidade é carregar corretamente as imagens. Para isso, alguns truques podem melhorar consideravelmente a velocidade da página:
1) Sempre que possível, indique o tamanho da imagem na tag <img>. Com isso o browser pode reservar o tamanho da imagem na tela antes mesmo de transferi-la do servidor. O código
<img src=”photo1.jpg” width=”100” height=”100” />
Irá carregar muito mais rápido que o abaixo
<img src=”photo2.jpg” />
2) Use rotinas javascript dentro da seção <body> para carregar as imagens. O código abaixo reserva a área na tela para as imagens enquanto transfere-as do servidor:
<img id=”img1” width=”100” height=”100” />
<img id=”img2” width=”80” height=”50” />
…
<script type=”text/javascript”>
document.getElementById(“img1”).src = “photo1.jpg”;
document.getElementById(“img2”).src = “photo2.jpg”
</script>
Existem situações inversas, onde é preciso carregar (e mostrar) uma imagem antes do restante da página. Nesse caso a solução é forçar o carregamento da mesma via javascript:
<script type=”text/javascript”>
var img1 = new Image();
img1.src = “photo1.jpg”;
var img2 = new Image();
img2.src = “photo2.jpg”;
</script>
…
<img src=”photo1” width=”100” height=”100” />
<img src=”photo2” width=”80” height=”50” />
Alocar um objeto Image e definer seu atributo src para o nome do arquivo irá fazer com que o browser enfileire a imagem para download. Ao encontrar a tag <img> dentro da página o browser irá mostra-la imediatamente, antes mesmo do restante do conteúdo da página. Novamente, o uso das propriedades <width> e <height> reduzirá o tempo necessário para renderizar a tela.
Outras dicas:
- Reduza o número de arquivos de script combinando-os sempre que possível;
- Evite usar o comando “document.write()” quando puder escrever o código já em HTML;
- Use comentários nas páginas aspx no formato abaixo:
<% // Isso é um comentário que não será enviado ao browser %>
- Compacte o javascript usando um utilitário como o jsmin;
- Compacte previamente todas as imagens com ferramentas como o Image Resizer (é gratuito e faz um trabalho de compactação fantástico);
- Sempre disponibilize uma cópia do arquivo favicon.ico em todos os diretórios de seu site que possuem páginas html ou aspx. Quando o IIS não encontra o arquivo no diretório corrente ele sai a procura do arquivo em todos os diretórios da aplicação;
- Remova todas as tags de CSS não usadas;
- Remova comentários e espaços em branco sempre que possível;
- Nas tags, use a sintaxe <tag /> ao invés de <tag></tag>. Uma exceção importante: não faça isso com a tag <script> ou irá ter alguns problemas realmente estranhos de javascript;
- Valide seu código HTML em validator.w3.org;
