Otimização extrema: Otimizando e reduzindo o seu CSS

Continuando com a série de artigos relacionados a otimização extrema de sua aplicação, hoje vamos continuar falando sobre os arquivos CSS. Algumas das técnicas abaixo podem parecer besteira, mas vão lhe poupar grandes problemas relacionados a performance de sua aplicação. Então vamos lá!


Use CSS Sprites

Como já disse no artigos sobre CSS Sprites, eles podem ser bastante úteis e economizar banda com a baixa quantidade de requisições que serão feitas por seu documento requisitando objetos para sua aplicação.

Não utilize a regra @import!

Existem duas formas de básicas de se anexar um documento CSS a um documento

A primeira é usando a tag link, para anexar os documentos, um por um, utilizamos o atributo href para anexar cada um dos documentos css.

A segunda, é utilizando a regra import do CSS.

Pode parecer interessante utilizar a opção @import, por diversos motivos, desde utilizar somente um arquivo css para linkar todos os seus outros documentos, até diminuir o número de caracteres para anexá-los. Segundo um artigo de 2009, utilizar @import é incrivelmente ineficiente se comparador com o a tag link. Então não a use! Não se deixe enganar por qualquer outra coisa.

Usar a regra imports pode fazer com que a ordem dos elementos da página seja alterada, fazendo com que o CSS tenha alguma demora para carregar, e assim fazendo a página ter uma demora significativa de renderização. Além disso, se você utilizar a tag link e regras import na mesma página, o que deve ser carregado por imports, só aconteçam quando o que tiver que ser carregado pelo link terminar, aniquilando seu paralelismo.

USE A TAG link

Combine todos os seus estilos em apenas um arquivo

Temos a ideia de separar as CSS em diversos arquivos com a intenção de organizá-los por objetivo. Por exemplo, existirá um arquivo para a disposição dos elementos na tela, outro para a tipografia, outro para cores e outro para hacks. Isso é só um exemplo, já coisas mais absurdas, onde cada página do site tinha um css diferente, causando mais de 20 requisições de arquivos desnecessariamente.

SEMPRE agrupe todos os seus arquivos CSS em apenas um, assim você vai economizar nas requisições http feitas ao servidor, além disso lhe economizará tempo debugando seus estilos se algum não estiver de acordo com o esperado.

Caso ainda assim você ache interessante utilizar os arquivos separados por motivo de organização, existe um recurso do Apache que pode lhe auxiliar. Esse recurso é um módulo include, comumente chamados de SSI(Server Side Includes). Em suma, o que o módulo fará por nós é concatenar todos os arquivos que quisermos em apenas um, em tempo de processamento.

Para que o módulo funcione, primeiramente precisamos ativá-lo! Se você estiver usando o ubuntu, o comando abaixo fará a ativação e restart do apache.

Com o módulo ativado, iremos colocar todos os arquivos css likados, como o exemplo abaixo, dentro de um outro arquivo css. Para o exemplo abaixo, peguei todos os arquivos do framework CSS Blueprint e os coloquei em um diretório chamado css.

Com o documento CSS preparado, nosso próximo passo é criar ou editar o arquivo .htaccess. Explicando a grosso modo, se ele casar o arquivo screen.css em alguma requisição, o módulo includes é ativado e é passado por um filtro, chamado INCLUDE.

Se você tiver feito tudo correto, quando linkar o screen.css ao seu documento html, você não verá os includes, mas sim um arquivo contendo todos os arquivos css que você gostaria de incluir. Caso contrário, vá ao arquivo de logs do seu apache e veja qual o erro está acontecendo.

Essa técnica gera um problema de performance, se você tiver prestado bastante atenção. Todas as vezes que o arquivo screen.css for chamado, haverá uma ativação do módulo includes e o arquivo será construido. Isso pode ser bastante estressante para o servidor, ainda mais se houver uma grande quantidade de arquivos a serem incluídos.

Como alternativa para esse módulo, usando o linux, o simples comando abaixo fará o arquivo css estaticamente, cabe a você toda vez que modificar algum arquivo dentro do diretório css rodá-lo novamente.

Externalize seus arquivos CSS

Com externalizar, quero dizer colocar em um arquivo independente! De modo algum incorpore seus estilos ao documento HTML. Colocando em um arquivo independente, e um bom controle de cache, asseguramos que o arquivo não vai ser requisitado toda vez que a página for carregada, assim economizando uma grande quantidade de banda. Mais uma vez digo: USE A TAG link

Sempre coloque seus arquivos CSS no topo(header)

Colocando seus documentos de estilo dentro da tag header(no topo, é claro) você garante que a página carregue progressivamente, dando a sensação que a página está sendo carregada com mais rapidez. Além disso, você evita que seja mostrada uma página branca ou pior, partes do sistema sendo carregados sem estilo e deformando toda a página, até que o documento de estilo é carregado e tudo é corrigido.

Lembre-se: A experiência do usuário em sua aplicação é muito importante.

Use a forma contraídas das regras CSS

Algumas regras CSS possuem formas contraídas. Segue exemplos:

Agrupe estilos similares

Quando você está há algum tempo desenvolvendo uma aplicação, ou mesmo dando manutenção em uma aplicação legada, é fácil encontrar em um documento de estilo elementos que tem as mesmas regras aplicadas repetidas vezes, ou mesmo parte das regras iguais. Agrupe-os e use a maravilha das regras em cascata a seu favor!

O exemplo abaixo descreve claramente o agrupamento quando todas as regras são idênticas!

O exemplo acima pode ser reescrito da seguinte forma:

No exemplo abaixo, usamos a herança para configurar o botão e adicionamos cores ao texto dos elementos

Omita o desnecessário!

Existe uma série de recursos que você pode usar para diminuir ainda mais o tamanho do seu arquivo CSS.

Reduza o número de quebras de linha

Como dito no artigo sobre CSS Sprites, existe uma ferramenta chamada yumcompressor, que faz uma série de otimizações em seu código CSS. Uma dessas é a remoção de todos os espaços e quebras de linhas do código. Como o browser ignora completamente os espaços e quebras de linha você removê-los sem nenhuma dó!

Remova o último ponto e vírgula

O último ponto e vírgula das regras aplicado a qualquer elemento pode ser eliminado. Veja o exemplo abaixo para esclarecer:

Use comentários simples

Não utilize comentários gigantescos como o abaixo! Além de não trazer nenhum tipo de ajuda real ao que está sendo feito pelo arquivo, faz com que o arquivo cresça desnecessariamente! Pessoas “letradas” em CSS não precisarão de nenhum tipo de auxílio explicativo para suas regras. CSS é auto-explicativo. Seria como documentar a expressão ‘1+1=2’.

Simplifique a forma hexadecimal das cores

Além da forma contraída de expressar regras, como visto anteriormente, existe uma forma de expressar cores em hexadecimal contraidamente.

O código abaixo pode tranquilamente ser trocado pelo seu posterior.

Remova a medida usada!

Quando você estiver escrevendo alguma regra que tenha o valor 0(zero), não há necessidade de explicitar qual a medida que está sendo usada, afinal px, pc, em, não terão sentido se você está utilizando ZERO. Por que afinal, zero será zero em qualquer uma dessas medidas.

Assim termino as técnicas de otimização extrema relacionadas a CSS. Espero que o que foi informado nesses dois artigos lhe ajude na construção de sua aplicação. Se vocẽ ainda não leu o artigo anterior falando sobre CSS Sprites, aconselho a ler.