Se você utiliza PageSpeed Insights do Google Developers já deve ter notado que entre as sugestões para melhorar o desempenho do seu site está a opção "Compactar CSS". Mas como compactar um código CSS? Não é com programas de compactação de arquivos como RAR ou ZIP, claro!
Compactar CSS significa escrever um código mais limpo eliminando espaços em branco desnecessários, tabulações, quebras de linha, comentários (quando possível) e também preferir a forma encurtada de escrever o código.
Observe os exemplos abaixo (código para o background de um elemento qualquer escrito de formas diferentes):
elemento {
background-color: lightblue;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
elemento{background-color:lightblue;background-image:url(background.png);background-repeat:repeat;background-attachment:scroll;background-position:top left;}
Qual dos exemplos está escrito de forma correta? O primeiro está mais adequado para ser lido por humanos enquanto o segundo está mais adaptado para ser interpretado pelos computadores através dos navegadores de internet, mas todos estão escritos corretamente, ou seja, podem ser lidos e interpretados tanto por humanos, quanto por máquinas.
Abaixo temos a forma encurtada:
elemento{background:lightblue url(background.png) no-repeat scroll top left;}
Note que a redução foi muito grande. Em toda a folha de estilos do site o resultado pode ser significativo.
Então qual forma preferir? Se a prioridade é aumentar a velocidade e o desempenho do site, a forma compactada deve ser a preferida porque torna o código mais pequeno e, portanto, mais leve e rápido para carregar. Já a forma não compactada facilita a manutenção e futuros desenvolvimentos baseados no código existente.
Note que nem todos os espaços podem ser eliminados, portanto muita atenção ao comprimir o CSS.
Nenhum comentário :
Postar um comentário