Reduzindo o tempo de carregamento do blog

Porque tempo pode ser Dinheiro!

Qual o tamanho, em KB (Kilobytes), da página inicial do seu blog? Quanto tempo um novo visitante espera para ver o conteúdo do seu blog? No post “Medindo o tempo de carregamento do seu blog” eu já ensinei como saber as respostas dessas perguntas, só que não ensinei como otimizar o template do blog. E é isso que iremos aprender agora.

Seu blog precisa ser otimizado? Você ainda acha que seu blog carrega rápido?
Ao analisar o tamanho do seu blog e o tempo de carregamento em várias velocidades de conexão, lembre-se que não são todos que usam conexões de 12Mbps, muitos ainda usam conexões inferiores a 150Kbps. Sendo assim, se seu blog demora mais de 1 minuto para carregar em uma velocidade de conexão razoável, seu blog é muito pesado.

Outro ponto importante que deve ser lembrado é que, mesmo que seu blog carregue rápido em seu navegador, poderá não carregar tão rápido no navegador do visitante: as imagens do seu blog já estão salvas nos arquivos temporários (cache) do seu navegador, mas não estão no do visitante do blog. Experimente abrir seu blog em outro navegador (que você nunca tenha visitado seu blog) ou limpar os arquivos temporários do seu navegador e depois visitar o seu blog: se demorou, precisa urgentemente de otimização!

Depois de muita explicação, vamos às dicas!

1 - Exclua os scripts em excesso

Widgets personalizados, efeitos em páginas, hacks, novas funcionalidades: Tudo isso aumenta o tempo de carregamento do seu blog. Em alguns computadores menos ‘potentes’, podem chegar a travar o navegador.

Para resolver, analise o que é realmente necessário para o seu blog e exclua os scripts/widgets que não têm quase nenhuma utilidade. Não é necessário excluir todos os scripts. Exclua apenas os que não representam nenhum nível de importância para o seu blog.

2 - Utilize menos imagens no template

Se o seu template utiliza muitas imagens de fundo, tente remover algumas e preencher com cores sólidas, pois as cores não precisam ser baixadas: as imagens, sim.
Prefira o fundo da página (‘background do body’, para quem preferir) com uma cor só, ou com imagens pequenas que se repitam.
Caso você não possa fazer isso, tente escolher (ou fazer) outro template para seu blog. Ou então tente a próxima dica.

3 - Troque as imagens PNG por GIF

As imagens PNG são melhores de trabalhar, pois a transparência é total; os GIFs têm transparência, mas esta não é total: uma sobreposição entre cor e transparência não aparecerá, será preenchida uma cor nesse local (Matte).
O formato GIF é mais rápido de carregar, por ser mais leve. E se dá muito bem com fundos de cores sólidas (da mesma cor do Matte). Então, quando for aplicável, utilize imagens GIF ao invés de PNG ou JPEG.

4 - Otimize seu CSS

Você pode reduzir o CSS do seu blog excluindo as quebras de linha em excesso, transformando, por exemplo:

body{
text-align:center;
background:#000000;
margin:0;
}
.post-body{
color:#000000;
background:#FFFFFF;
text-align:left;
}

Em:

body{text-align:center;background:#000000;margin:0;}
.post-body{color:#000000;background:#FFFFFF;text-align:left;}

Isso reduziria um pouco do tempo de carregamento do blog. Siga outra dica no artigo do Compulsivo: Otimização e compressão do CSS no Blogger

5 - Hospede seu CSS em outro local

Quando alguém visita seu blog, o navegador carrega todo o conteúdo do HTML e os arquivos externos. O HTML é carregado toda vez que se entra no blog; os arquivos hospedados externamente (imagens,CSS e scripts) são carregados apenas na primeira visita.

 No Blogger, o CSS fica dentro do código HTML e é carregado toda vez que o visitante entra. Em um arquivo externo, o CSS só será baixado uma vez e, toda vez que o visitante entrar novamente, o CSS já estará carregado, ou seja: seu blog aparecerá mais rápido.

Veja como Hospedar CSS e colocar no Blogger.

Bem, essas foram as dicas de hoje. Então, mãos à obra e reduza o tempo de carregamento de seu blog!