Reduzir o tamanho de CSS, Javascript e HTML

Tenho partilhado várias dicas aqui no blog para tornar um site mais rápido. Algumas das dicas são relacionadas apenas com o WordPress, outras podem ser aplicadas a todos os sites em geral.

Hoje partilho com vocês a “arte” de reduzir o tamanho do código CSS, Javascript e HTML. E como já foi explicado anteriormente, um site de tamanho reduzido não só é mais rápido como poupa tráfego e recursos do servidor.

Interior de um relógio

Existem developers obcecados com “código bonito”, todo indentado e com comentários úteis a demarcar cada secção, algo que apenas é útil ao próprio developer ou àqueles webmasters de vão de escada que andam a copiar o código dos outros. Um utilizador comum (ou um developer com mais que fazer) não vai ligar ao código fonte, se é bonito ou feio.

Ora, eu sempre fui obcecado com código eficaz e não bonito. Se um carácter ocupa 1 byte posso começar a juntar o código todo numa só linha e a reduzir o tamanho do site. Como auto-didacta que sou comecei a fazer isto e a ver o tamanho de uma página a reduzir consideravelmente e apliquei este método na Sprint Total, pois na altura não tinha mais nenhum site.

Se acham que isto é má prática ou se acham que não resulta, então consultem o código fonte do Google, pode ser que mudem de ideias.

Existem ferramentas que fazem este trabalho por nós nos ficheiros CSS e Javascript, e assim podemos facilmente ter um ficheiro com “código bonito” para trabalhar e outro ficheiro em produção com código eficaz e reduzido.

Reduzir tamanho dos ficheiros CSS
O site CSS Drive tem uma óptima ferramenta para minimizar o código dos ficheiros CSS, é o CSS Compressor. Remove espaços, indentação, quebras de linha e comentários. No modo avançado ainda permite reduzir o tamanho dos códigos de cores, por exemplo passando #ffffff para #fff.

Eu habituei-me de tal forma a desenvolver os meus ficheiros CSS para poupar o máximo de espaço que, após correr o código no CSS Compressor passei a reduzir apenas 1% a 2% do tamanho final do ficheiro, quando tinha valores perto dos 8% a 9%. Pode-se dizer que o CSS Compressor me ajudou a desenvolver de uma forma mais eficaz.

Reduzir tamanho dos ficheiros Javascript
Existe um site dedicado apenas à compressão online de ficheiros Javascript usando o YUI Compressor desenvolvido pela Yahoo! Developer Network. O Online YUI Compressor permite utilizar o YUI online para reduzir o tamanho dos nossos scripts de uma forma segura.

Aqui podemos não só minimizar o código removendo espaços, indentação e quebras de linha como reduzir o nome de algumas variáveis que utilizamos nos scripts. No entanto aconselho a utilizar esta última função com código e a ter sempre um backup antes de aplicar o código minimizado.

Reduzir tamanho dos ficheiros HTML
Para reduzir os ficheiros HTML não conheço nenhuma aplicação, mas podem aplicar manualmente as dicas que indiquei anteriormente (é o que eu faço). Remover espaços, tabulações, usar CSS em vez de estilos no HTML e juntar tudo na mesma linha.

Com estas reduções, basta agora aplicar a compressão Gzip a estes ficheiros e certamente que ficam com um nível de optimização de código muito acima da média.

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.