O uso de CSS’s (Cascading Style Sheets) no desenvolvimento web dos dias de hoje, é imprescindível, para mantermos o estilo separado da lógica. Uma das formas de aumentar a performance de uma página web, é diminuir o tamanho destes ficheiros de estilo. Neste artigo vou explicar uma "dieta" milagrosa para os nossos CSS’s, que vai permitir reduzir o seu tamanho consideravelmente.
Os ficheiros CSS estão muitas vezes repletos de informação repetida, espaços em branco, informação desnecessária, etc… Nas próximas linhas vou explicar como podemos eliminar toda esta informação redundante de forma a que os ficheiros CSSs fiquem mais "magros" (com menos bytes).
Converter cores em hexadecimal
As cores que são utilizadas nos CSSs utilizam muitas vezes nomes (por ex.: orange, yellow), outra vezes códigos hexadecimais do tipo #FFFFFF, #FF0000, outras vezes valores rgb(0,0,0). Todas estas definições de cores, devem ser convertidas sempre que possível para o formato mais curto:
#FFFFFF => #FFF
yellow => #FF0
red => red ou #F00
rgb(0,0,0) => #000
Remover Comentários
Todos os comentários que utilizamos nos ficheiros CSS enquanto desenvolvemos determinado website deverão também ser removidos, pois num site em produção eles não têm qualquer utilidade.
<!– Isto é um comentário e deve ser removido –>
//Isto é outro comentário que também deve ser removido
Comprimir a utilização de números
A utilização de números nos CSSs pode ser optimizada, removendo os caractéres desnecessários, como por exemplo, zeros à direita, e o zero antes do ponto, como podemos ver nos exemplos seguintes:
1.200 => 1.2
0.1 => .1
1.0 => 1
Juntar propriedades de 4 valores
A utilização de 4 valores na definição por exemplo de um padding também é desnecessária, e pode convertida para apenas um valor:
padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;
=> padding: 10px
Remover unidades dos valores zero
Quando temos uma propriedade com o valor zero, podemos remover as unidades de medida, por ex.: px, %, etc…, pois zero é sempre 0:
0.0px => 0
0% => 0
0em => 0
Juntar propriedades do Background
Também as propriedades do background podem ser transformadas numa única, da mesma forma que demonstrado anteriormente com o padding.
Remover espaços em branco desnecessários
Todos os espaços em branco desnecessários deverão ser removidos.
color: #FFF => color:#FFF
image( ‘ teste.gif ‘ ) => image(’teste.gif’)
Remover os últimos ponto e vírgula
Os últimos ponto e vírgula das propriedades dos CSSs são desnecessários e podem ser removidos:
.estilo1{ color:#FFF; margin-bottom:10px; }
=>
.estilo1{ color:#FFF; margin-bottom:10px }
Remover estilos repetidos
Quando declaramos estilos encadeados, muitas vezes voltamos a repetir propriedades nos estilos dos últimos níveis. Estas redeclarações podem e devem ser removidas.
.estilo1{ color:#FFF; margin-bottom:10px; }
.estilo1 h3{ color:#FFF; text-decoration: underline;}
=>
.estilo1{ color:#FFF; margin-bottom:10px }
.estilo1 h3{ text-decoration: underline }
Reaproveitar estilos
Muitas vezes temos necessidade de ter dois estilos diferentes com as mesmas propriedades, apenas por uma questão de organização. Nestes casos, as propriedades deverão ser aproveitadas e a declaração ser feita toda a na mesma linha:
#header h2 { font-size: 2em; }
#sidebar h3 { font-size: 2em; }
=>
#header h2, #sidebar h3 { font-size: 2em; }
Se tiverem mais dicas de optimização deixem um comentário, serão muito bem vindas. 
Todas estas optimizações são muito interessantes, mas ter de optimizar os nossos CSSs manualmente não é coisa que dê muita vontade, e também não é preciso, felizmente :). Existe na internet um grande conjunto de aplicativos que permitem optimizar ficheiros CSS, utilizando muitas das dicas enunciadas anteriormente.
De seguida podem ver uma lista dos principais optimizadores de CSSs.
Optimizadores de CSSs
- CSS Optimizer
- RobSon CSS Compressor
- Flumpcakes CSS Optimizer
- Clean CSS (baseado no CSSTidy)
- Codebeautifier (baseado no CSSTidy)
Para testar estes optimizadores, peguei em dois sites portugueses (www.meteo.pt e www.iol.pt ), e optimizei os seus CSSs principais. Os resultados são apresentados no quadro seguinte:
| Optimizador | www.meteo.pt | www.iol.pt |
| CSS Optimizer | - 34.91% | -15.31% |
| RobSon CSS Compressor | -15.79% | -15.38% |
| Flumpcakes CSS Optimizer | -12% | + 7% |
| Clean CSS | -5.9% | -4.6% |
| Codebeautifier | -6% | -4.4% |
Através da análise da tabela anterior, podemos ver que nalguns casos, conseguimos ter optimizações na ordem dos 30%. Mas também existem casos, em que o resultado é pior que o ficheiro inicial (caso do + 7%). Convém notar que estes testes foram superficiais, pois não sei se os ficheiros resultantes ficaram com problemas. Num próximo artigo, espero analisar mais profundamente estes optimizadores de CSSs, bem como alguns optimizadores de javascript.
As vossas contribuições são muito importantes para a evolução deste artigo, por isso não se inibam, deixem as vossas sugestões ou críticas através de comentário.
Se gostaram deste artigo subscrevam a feed RSS do istomesmo, para ficarem actualizados sobre os últimos artigos.
» Subscrevam aqui a fedd RSS «
Obtenha mais informações sobre a fedd RSS aqui
Artigos que também lhe podem interessar:
