Otimização de arquivos CSS

Uma coisa legal para fazer em arquivos css que estão em sites de produção e que precisam de uma boa performance é usar as ferramentas que enxugam o código CSS, retirando comentários, linhas em branco, melhorando algumas declarações, etc. O drupal já possui esse recurso no core do sistema, inclusive para arquivos js também, porém em outros projetos devemos fazer isso manualmente.

No linux existe uma ferramenta opensource chamada csstidy ( http://csstidy.sourceforge.net/ ) que faz isso pra nós, para instalar no ubuntu é fácil: apt-get install csstidy, apartir dai vc já pode utilizar da seguinte forma:

nei@host:~/projetos/xxx/css$ csstidy original.css --template=high comprimido.css

ele vai gerar uma saída do tipo:

troca todoas as declarações do tipo:

Selectors: 74 | Properties: 238
Input size: 6.115KiB Output size: 5.095KiB Compression ratio: 16.69%
-----------------------------------
Optimised number: Changed "0px" to "0"
Optimised number: Changed "0.5em" to ".5em"
Optimised number: Changed "0px" to "0"
Optimised color: Changed "#000000" to "#000"
Optimised font-weight: Changed "normal" to "400"
Optimised shorthand notation (margin): Changed "20px 0 1.5em 0" to "20px 0 1.5em"

Existem outras que fazem esse trabalho também via web, em todos os casos você pode configurar como o arquivo vai ser optimizado, retirando comentários, linhas em branco, tabs troca por espaço e diversas outras opções..

veja algumas ferramentas via web:

http://www.cleancss.com/
http://iceyboard.no-ip.org/projects/css_compressor

isso ajuda o desempenho do seu site, principalmente o fato de deixar o arquivo menor e fazer com que o css seja baixado mais rapidamente.

Comentar

O conteúdo deste campo é privado não será exibido ao público. If you have a Gravatar account, used to display your avatar.
  • Quebras de linhas e parágrafos são feitos automaticamente.

Mais informações sobre as opções de formatação

CAPTCHA
Esta questão é utilizada apenas para prevenir envio automático por robôs.
Image CAPTCHA
Digite os caracteres mostrados na imagem.