Como “minificar” o código CSS do template

Por | Atualizado em 2013-09-28

Uma excelente forma de otimizar o desempenho do seu site, consiste em minificar (reduzir) o seu código CSS (Cascading Style Sheets). Na prática, você irá comprimir o código CSS reduzindo os espaços em branco.

Esta técnica, permite-lhe reduzir o tamanho total do template, melhorando a velocidade de carregamento da página, e reduzindo o tráfego de banda.

Como funciona?

Minificar o CSS é muito simples, para isso, basta utilizar a ferramenta gratuita do CSS Minifier. Verifique o seguinte exemplo de código CSS, para entender as alterações:

CSS Normal

.jump-link a {
color:#333333;
width:90px;
padding:5px 10px;
height:22px;
line-height:20px;
font-size:15px;
border-radius:25px;
box-shadow: 2px 2px 2px #BEBEBE;
}

CSS Minificado

.jump-link a{color:#333;width:90px;padding:5px 10px;height:22px;line-height:20px;font-size:15px;border-radius:25px;box-shadow:2px 2px 2px #BEBEBE}


Como certamente terá reparado, a única diferença é que o código “minificado” está sem quebras de linha.

Embora o código possa ficar um pouco mais confuso, os ganhos de velocidade ganhos de velocidade serão importantes para melhorar a experiência do visitante e otimizar para SEO.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *