Optimiza o teu blog: Parte 1 - CSS

Parte 1

Como estou no meio de um projecto que envolve redesenhar completamente este blog decidi deixar-vos aqui umas dicas que uso enquanto estou a desenvolver o novo tema.

O CSS (Cascading Style Sheets) torna os Websites muito mais eficientes porque permite aos browsers guardarem na cache informações sobre o estilo dos sites disponíveis nos ficheiros .css, eliminando assim a necessidade de os browsers carregarem essa informação sempre que uma página é actualizada. Ainda que os ficheiros CSS sejam mais eficientes do que as tabelas em HTML podes sempre optimizar o código CSS para tornar o teu blog mais rápido e limpo.

Primeiro tenta localizar código CSS que esteja disperso no ficheiro e junta-o. Aqui fica um exemplo:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

deves usar:

margin: 10px 20px 10px 20px;

Em vês de:

<p class="Vermelho">Parágrafo com texto em vermelho</p>
<p class="Vermelho">Segundo parágrafo</p>
<p class="Vermelho">Terceiro parágrafo</p>
<p class="Vermelho">Quarto parágrafo</p>

deves usar:

<div class="Vermelho">
<p>Parágrafo com texto em vermelho</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
<p>Quarto parágrafo</p>
</div>

Podes também utilizar o CleanCSS. Esta ferramenta online permite juntar informação similar, remover propriedades inúteis, remover o espaço em branco, etc..

Só tens que introduzir o teu código CSS, escolher as opções e depois copiar o código CSS já optimizado.

Conheces mais algum site tipo o CleanCSS? Se sim deixa um comentário, pois eu só conheço este, mas deve haver muitos mais na Internet.

Segue-me no Twitter e no Plurk
Recebe as actualizações do blog através do RSS feed ou se preferires recebe as actualizações do blog no teu Email. Obrigado pela visita!