Otimizar CSS

É extremamente necessário que você reduza o peso de qualquer arquivo de inclusão nas páginas do seu site ou blog, sejam eles arquivos de imagens, arquivos com funções javascript, arquivos de vídeo, folhas de estilos(arquivos css) etc. E é sobre esse último que iremos falar hoje.

Há diversas possibilidades para uma boa otimização dos arquivos css que você usa no site ou blog e a ideia principal é de dispensar códigos que não são usados em determinada página assim como reaproveitar códigos que se repetem, mas não é só isso. Então vamos começar do mais simples de se fazer, porém essas duas primeiras etapas que citarei adiante na verdade serão as últimas a serem feitas e no decorrer do artigo você mesmo perceberá por que.

Retirar as linhas em branco da CSS

Linhas em branco são excelentes para manter um código organizado e mais fácil de entender. Infelizmente para a otimização do seu blog ou site, não é uma boa ideia porque cada linha, mesmo em branco será uma linha a mais a ser lida.

Antes de mais nada preciso dar uma dica importante que evitará problemas futuros.

Guarde sempre uma cópia da sua folha de estilos antes desse processo e do processo que citarei adiante, e que como já dito serão os últimos, pois depois deles a sua folha de estilos ficará bem mais confusa e se precisar fazer modificações terá uma cópia mais organizada para se guiar.

Observe o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* Texto Principal */
.texto1{

color: #ff0000;

font-size: 12px;

font-style:italic;

}

/* Texto Secundário */
.texto2{

color: #ffff00;

font-size: 11px;

font-style:normal;

}

Veja quantas linhas em branco desnecessárias para a leitura do código!

Deixa o código bem mais organizado é verdade, inclusive com tags de comentários explicando cada bloco, o que aliás eu recomendo para a cópia que você guardará de backup, mas para o arquivo que será usado efetivamente no seu site, uma opção melhor seria esta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.texto1{
color: #ff0000;
font-size: 12px;
font-style:italic;
}
.texto2{
color: #ffff00;
font-size: 11px;
font-style:normal;
}

Veja quantas linhas desnecessárias foram retiradas e imagine essa ação agora em uma folha de estilos muito grande. Certamente fará muita diferença.

Então não se esqueça de sempre retirar todas as linhas em branco e comentários dos seus arquivos CSS que serão usados no site/blog sem no entanto esquecer de criar uma cópia anterior a esse processo.

Escreva o mais horizontalmente possível

Bom, no passo anterior nos já demos uma boa otimizada compactando o nosso código. Mas porque não compacta-lo mais ainda?

As propriedades css não precisam necessariamente serem escritas uma abaixo da outra como no exemplo anterior, você pode colocar uma após a outra desde que mantenha o separador “;” observe:

1
2
3

.texto1{color: #ff0000;font-size: 12px;font-style:italic;}
.texto2{color: #ffff00;font-size: 11px;font-style:normal;}

Agora imagine o grau de otimização conseguido. Na versão original nós tínhamos 21 linhas, depois da retirada das linhas em branco e comentários ficamos com apenas 10 linhas e agora depois de uma escrita mais horizontal, reduzimos para apenas 2 linhas.

Agora o quanto de redução não se consegue aplicando essa técnica  no arquivo css como um todo?

Planeje a sua css antes de criá-la

Isso é algo que a maioria não faz. Um planejamento prévio da folha de estilos, porém é importante principalmente porque você poderá usa-la como padrão para todos os seu sites, inclusive facilitando a atribuição das classes sem ter que ficar olhando o nome da classe na css para ter certeza de que está escrevendo corretamente pois com pouco tempo já terá gravado a maioria delas.

Vamos a um exemplo:

Você pode atribuir nomes de classes a três tipos de textos de tamanhos diferentes como: .texto_pequeno,  .texto_medio, .texto_grande. E poderá fazer a mesma coisa com os títulos: .titulo_pequeno,  .titulo_medio, .titulo_grande, o mesmo para os links. Ainda poderá criar uma classe de destaque para cada um deles por exemplo “.titulo_destaque”.

Veja como seguindo um padrão como esse será fácil você trabalhar no código html de maneira mais rápida e ganhar dinheiro fazendo sites também tem tudo a ver com a capacidade de produção, que por sua vez está relacionada ao tempo disponível.

Você poderá montar uma folha de estilos seguindo esse padrão então para os outros elementos como background principal, background secundário, background destaque e por aí vai.

Depois de pronta você poderá aplicar a novos sites mudando as configurações de cores e eventualmente criando alguma classe extra específica para aquele site, mas isto seria o mínimo se criar uma css padrão bem organizada.

Simplifique códigos repetidos

Em uma folha de estilos de um site ou blog com certeza você usará a mesma cor para diversos elementos ou background entre outras propriedades.

Procura não repetir propriedades que são atribuídas igualmente para diversas classes, simplifique, isso economizará muitas linhas de código.

Compare os dois exemplos abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.texto1{
color: #ff0000;
font-size: 12px;
font-style:italic;
font-weight:bold;
font-family:verdana,helvetica,arial;
}
.texto2{
color: #ff0000;
font-size: 11px;
font-style:normal;
font-weight:bold;
font-family:verdana,helvetica,arial;
}

Agora a versão simplificada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.texto1,.texto2{
color: #ff0000;
font-weight:bold;
font-family:verdana,helvetica,arial;
}
.texto1{
font-size: 12px;
font-style:italic;
}
.texto2{
font-size: 11px;
font-style:normal;
}

Veja como eu uni as duas classes “texto1″ e “texto2″ para aplicar ao mesmo tempo as propriedades coincidentes.

Se você contar a quantidade de linhas que foram reduzidas vai encontrar um valor baixo, de 14 para 13 linhas, mas aqui não se trata apenas de redução no número de linhas, acontece que as propriedades coincidentes são todas aplicadas de uma vez só e isso economiza tempo.

Agora vamos ao nosso código totalmente otimizado:

1
2
3
4
5

.texto1,.texto2{color: #ff0000;font-weight:bold;font-family:verdana,helvetica,arial;}
.texto1{font-size: 12px;font-style:italic;}
.texto2{font-size: 11px;font-style:normal;}

Uau! apenas três linhas; tá bom pra você?

Sub divida a sua CSS

É muito mais simples criar uma folha de estilo unica com todas as classes que serão usadas no site ou blog inteiro, isso é bem cômodo mas se tratando de SEO não é a melhor solução.

Imagine que você tem na sua folha de estilo a configuração de um menu css drop down por exemplo, mas que só estará presente na página index. Então por que você deixará que as outras páginas leiam esse código gastando assim mais tempo?

Outro exemplo seria aqueles sites que tem configurações de cores diferentes para cada página de categoria, na minha lojinha vocês podem ter um exemplo claro disso http://lojasonline.colmeiaweb.com.

Agora imagine ter 4, 5, 6 blocos de códigos onde cada um só será aplicada a uma única página apenas e você força cada página a ler todos eles!

Uma opção mais inteligente seria criar uma folha de estilos base, com todas as propriedades pertinentes a todas as páginas e as classes restritas a cada página ficariam em uma folha de estilos que só será lida por ela mesma.

E aqui também é bom usar a técnica mostrada anteriormente.

Se em uma classe chamada “.cabecalho” por exemplo, só irá mudar a imagem de fundo para cada página de categoria, por que repetir as outras propriedades nas folhas de estilo exclusivas?

Vamos imagina essa classe:

1
2
3
4
5
6
7
8
9

.cabecalho{
background:url(imagem_categoria.gif);
color:#000000;
font-size:12px;
}

Onde o que iria mudar de uma página para a outra será só o nome da imagem de fundo (imagem_categoria.gif), então porque reescrever esse código todo em cada folha de estilo individual?

A melhor solução seria: na folha de estilo principal colocar o código abaixo:

1
2
3
4
5
6
7

.cabecalho{
color:#000000;
font-size:12px;
}

E nas folhas de estilo individuais:

1
2
3
4
5

.cabecalho{
background:url(imagem_categoria.gif);
}

Você só precisaria atribuir o nome de cada imagem de fundo individualmente nas CSS secundárias pois é só o que mudaria, lebre-se que chamamos “folha de estilos em cascata” exatamente porque obedece uma hierarquia então é de boa prática incluir na página primeiro a CSS principal e depois a secundária.

Para esse exemplo apenas com esse pequeno código não faria diferença, mas imagine que na folha de estilo principal você tivesse atribuído uma imagem padrão de fundo do cabeçalho, caso a folha de estilo secundária falhasse por algum motivo.

Se você incluísse a CSS principal por último na página, então a imagem de fundo padrão é que seria sempre apresentada para todas as páginas, pois seria a última a ser lida e iria se sobrepor a imagem relativa  aquela categoria. Portanto tome cuidado com isso.

Elimine códigos com valores padrão

Essa é uma questão delicada. Dependendo do navegador algumas propriedades quando não atribuído um valor, assume o seu valor padrão e que pode não coincidir com o valor padrão de outro navegador, portanto será importante atribuir um valor. Porém isso significa mais código a ser lido.

Poderá ser bom para otimização que se retire as propriedades as quais o valor é padrão para todos os navegadores se você os estiver usando, pois definindo ou não esse valor o resultado na tela seria igual para todos os navegadores.

Bom, para fazer isso com segurança, antes de mais nada você precisa ter pelo menos os principais navegadores instalados e testar em todos eles.

Eu recomendaria que todo Web design, Webmaster ou mesmo Blogueiro tivesse instalado em seu computador versões atualizadas dos navegadores: Google Chrome, Fire Fox, Internet Explore, Safári e Opera.

Retire propriedades de bordas com valor zero

Muitos costumam  (inclusive eu) na etapa de desenvolvimento de us site, atribuir uma borda temporária a alguns elementos quando se quer ter certeza do espaço que eles estão ocupando.

Acontece que depois de conferir, ao invés de retira o código que cria a borda, acabamos setando para zero, para caso precisemos conferir novamente caso os valores sejam mudados. O que é uma atitude coerente pois poupa tempo.

O problema é que no final, depois do site pronto esquecemos de retirar essas linhas de código que não iram servir para nada.

Então não se esqueçam que depois da folha de estilo pronta, é necessário retirar essas linhas de códigos se deixou alguma lá. Não faz sentido deixar qualquer linha de código que não irá ser usada no site.

Relembrando

Eu falei que os dois primeiros passos ensinados deveriam ser aplicados por último, acho que fica fácil de entender não é?

Imagine fazer todos esse processos já com o código compactado!! você ia sair do computador direto para um sanatório!!

Conclusão

Deixar a sua folha de estilos bem otimizada exige planejamento, paciência e organização. Mas se quer criar sites profissionais isso passa também pelas técnicas de SEO e a otimização das folhas de estilos é uma delas e irá valer cada segundo gasto nesse processo.

Como complemento desse artigo recomendo a leitura de Como fazer um site abrir mais rápido que irá mostrar também outras técnicas de otimização para o seu site ou blog.

Até a próxima.