Semana passada, o Digital Paper bateu um recorde de acessos. Torramos 10Gb de banda em 11 dias. Felizmente, a Powersites na sua eterna rapidez no atendimento, liberou mais banda pro site em poucos minutos. Foi aí que me surgiu a necessidade de começar a comprimir arquivos do site.
Meu primeiro passo foi comprimir o CSS. Tudo bem que um arquivo de 10Kb não pesa muito, mas multiplique isto por 2.000 visitas únicas e 5.000 pageviews por dia.
Como gosto de manter meu código limpo, meu arquivo CSS é todo indentado, separado por blocos e comentado. Jogando o arquivo em um compressor online de CSS, consigui diminuir em até 30% o tamanho do arquivo. Algumas pessoas conseguem compressões de até 80%!
Como comprimir seu CSS
Eis uma lista de compressores online, juntamente com o tanto que comprimiram meu arquivo (tamanho final – porcentagem de compressão). A lista vai da menor para maior compressão.
- Arquivo original – 10.297 bytes – 100%
- Flumpcakes - 9.040 bytes – 8%
- Creativyst CSS Compressor – 8.705 bytes – 11,38%
- CSS Drive – 7.984 bytes – 22%
- CSS Optimizer – 7.350 bytes – 26,87%
- Clean CSS – 7.491 bytes – 27,3%
- Robson CSS Compressor – 7.283 bytes – 29,27%
Todos os testes foram rodados para que o máximo de compressão fosse feito, quando houvesse a opção disponível.
Precisa levar-se em conta que eu já simplifico meu código ao máximo sempre que possível, então a diferença não é gigantesca, mas até 30% a menos ajuda muito no fim do mês.
Comprimi meu arquivo, agora dá erro no site
Devido aos hacks para outros navegadores (geralmente, Internet Explorer 6), alguns arquivos de CSS compressos podem resultar em algum tipo de erro. Neste caso, recomenda-se fazer a compressão manual. Lógicamente, o trabalho é mais demorado. Outra solução seria parar de dar suporte ao Internet Explorer 6, mas aí depende de cada desenvolvedor e de cada projeto.
Comprimi o arquivo mas quero alterar algo. E agora?
Eu sempre guardo dois arquivos CSS: um é o original e o outro é o compresso. Quando vou fazer alterações na minha folha de estilos, altero o original não-compresso. Depois de verificar que fiz todas as alterações necessárias, jogo no compressor online e salvo por cima do CSS compresso. Assim, você ainda mantem seu código legível para você mesmo.
Próximo artigo será sobre compressão de arquivos (HTML, PHP, etc).
Você usa algum método de compressão no seu site? Qual?
Gostou do artigo?
Aproveite então para assinar nosso feed RSS ou seguir o Design Blog no Twitter para sempre ficar ligado nas novidades no mundo do design!
Loading ...
3 comentários
Além de usar o Yuicompressor para CSS e JS ainda é bom configurar o servidor compactar com gzip esses arquivos e indicar aos navegadores para guardarem em cache imagens, css e js.
Canha, só ultrapassei os 10Gb de transferência uma vez em junho deste ano no meu site de baladas, após a cobertura de umas das festas mais bem conceituadas aqui da minha região, mas o site não roda em WordPress e sim um código porco em PHP.
Você usa algum daqueles plugins de cache para WordPress? Porque já ouvi falar muito bem deles.
Inté.
Cara essa lista é útil mesmo, mês passado fiz 35 giga, credo…
Um Trackback
[...] tive um artigo sobre compressão de CSS e como deixar seu código com o menor tamanho possível. E quando você precisa deixar seu CSS [...]
Regras
Antes de comentar, por favor atente-se as regras abaixo:
Os comentários neste artigos assim como em qualquer artigo deste blog não necessáriamente refletem a opinião dos autores e donos deste blog, como consta na Política de Privacidade e Uso deste blog.