Minimizar o tamanho do arquivo da folha de estilo CSS tem sido considerado por muitos como uma boa maneira de aumentar a velocidade de carregamento do seu site. De fato, ao reduzir o arquivo CSS em vários kilobytes, o servidor levará menos tempo para carregar e resultar em uma página da Web mais rápida.
No caso de seus artigos atingirem o frontpage do Digg, isso também pode ser um dos poucos fatores decisivos (há muitos mais) se o seu servidor irá travar ou não.
Alguns dos métodos mais comuns usados para minimizar / otimizar uma folha de estilo CSS envolvem a eliminação de seletores não utilizados, espaço em branco indesejado, guias e comentários, além de alterar a declaração de longhand para notações abreviadas.
Eu sei que alguns de vocês aqui não são especialistas em tecnologia o suficiente para editar o seu próprio código CSS, então aqui eu vou lhe fornecer algumas das ferramentas úteis que você pode usar para otimizar seu código CSS, mesmo que você não tenha nenhum conhecimento Codificação CSS.
Verifique seu código CSS
Validador de CSS do W3C
O validador de CSS do W3C é uma ferramenta que você pode usar para validar seu CSS. Você pode baixar o validador Java em seu computador e usá-lo offline ou usar o formulário on-line para verificar seu código CSS.
Complemento CSS do Firefox Validator
Para facilitar a validação do seu código CSS, existe essa extensão do Firefox - CSS Validator - que você pode instalar no seu navegador. Uma vez instalado, você pode facilmente e rapidamente verificar o seu código com um clique direito do mouse.
CSSCheck
Mesmo que seu código CSS seja validado, isso não significa que esteja livre de erros. A validação significa apenas que está em conformidade com os padrões CSS definidos pelo W3C. Se você quiser validar e analisar alguns problemas de compatibilidade do navegador com sua folha de estilo, o CSSCheck é uma boa ferramenta para você.
Analisador CSS
O CSS Analyzer é uma ferramenta útil que permite validar sua folha de estilo em relação ao padrão do W3C, realizar um teste de contraste de cores e um teste para garantir que os tamanhos relevantes sejam especificados nas unidades de medida relativas.
Caso você esteja se perguntando, o teste de contraste de cor é verificar se as combinações de cor de primeiro plano e de fundo fornecem contraste suficiente quando visto por alguém com déficits de cor ou quando visualizado em uma tela preto e branco.
Limpe seu código CSS
Seletores de Poeira-Me
Dust-Me Selectors é uma extensão do Firefox que encontra seletores CSS não utilizados na página que você está visualizando. À medida que você testa páginas subseqüentes do mesmo domínio, o resultado é verificado com os dados anteriores e quaisquer seletores encontrados são cruzados na lista. Você pode usá-lo para testar páginas individuais ou fazê-lo navegar em todo o site.
No final, você receberá um relatório sobre os seletores que não são usados em nenhum lugar do site. Você pode então remover esses seletores da sua folha de estilo (código menor significa tamanho de arquivo menor).
Verificador de Redundância de CSS
Semelhante aos Seletores Dust-Me, essa ferramenta verifica seu site em busca de seletores CSS não utilizados e redundantes. A única coisa diferente é que você precisa inserir manualmente o URI para cada página que deseja testar.
Otimize e comprima seu código CSS
Depois de concluir a verificação da validade do seu CSS e limpar o código desnecessário, é hora de otimizar o arquivo CSS e reduzi-lo ao menor tamanho possível.
CSS arrumado
CSS Tidy é um software de código aberto que você pode usar para otimizar e compactar seu arquivo CSS. Ele está disponível no formato .exe (somente Windows) e em um formato de script php compactado (todas as plataformas, para desenvolvedores da Web). O que o CSS Tidy faz é principalmente remover o comentário, o espaço em branco desnecessário e alterar alguns dos códigos para a abreviação. Durante a compactação, você pode escolher entre legibilidade de código ou compactação máxima. Dependendo do tamanho do seu código, você pode facilmente obter uma taxa de compactação de até 30% ou mais.
Como o CSS Tidy é um projeto de código aberto, existem vários sites que usam o código e o transformaram em uma ferramenta on-line para as pessoas usarem. Aqui estão alguns deles:
- CLEAN CSS
- Embelezador de Código
- Formatador e Otimizador CSS do Portal CSS
Outros CSS Optimizers
FlumpCakes CSS Optimizer
Um otimizador simples que vem com várias opções para você escolher.
Compressor Robson CSS
Embora possa parecer o mesmo que os outros, descobri que a taxa de compressão do Robson CSS Compressor é a mais alta entre todas elas. Embora tenha várias opções para você ajustar a configuração, deixar todas as opções intactas (todas as opções marcadas) sempre produz o melhor resultado.
Compressor CSS Drive CSS
O Compressor CSS oferecido pelo CSS Drive vem em dois modos que você pode usar: Regular e Avançado. No modo Regular, você só precisa selecionar o nível de compressão desejado (Light, Normal ou Super Compact) e o Compressor CSS fará o resto. No modo Avançado, você recebe mais opções e uma melhor opinião sobre como deseja que sua folha de estilo seja otimizada.
Otimizador CSS
O CSS Optimizer de mabblog.com é um aplicativo de linha de comando para Mac e Linux. Destina-se para aqueles que estão mais confortáveis com o terminal, em vez de uma interface on-line. Há também uma versão on-line simples disponível para aqueles que querem terminá-lo rapidamente.
Espero que as ferramentas listadas aqui sejam suficientes para você ajustar e otimizar sua folha de estilo CSS. Se você usou outras ferramentas que são mais úteis do que as mencionadas acima, compartilhe-as conosco nos comentários.