Reduzir o tamanho de sites

Além de poder deixar seu site pré-gerado (texto aqui), existem outras formas de melhorar o tempo de resposta na hora de acessar algum site. Podemos configurar o servidor HTTP para compactar tudo o trafego em gzip, porém podemos reduzir o site ainda mais antes de compactá-lo. Quando acessamos um site, normalmente temos um arquivo HTML, alguns CSS e JavaScript e várias imagens, cada um desses tipos de arquivos pode ser otimizado.

As imagens irão compor a maio parte do tráfego normalmente, como dizem que uma imagem vale mais que mil palavras, também pode refletir no tamanho da mesma. Existem algoritmos que tentam gerar a mesma imagem de várias formas para buscar uma onde o arquivo final seja o menor possível, podendo ter uma perca normalmente imperceptível ao olho humano ou com a qualidade exatamente igual ao original. Esses algoritmos serão diferentes para cada tipo de imagem, para PNG temos o OptiPNG, que pode ser instalado com apt-get install optipng no Debian. Um exemplo que posso contar aqui, tinha cerca de 400 imagens PNG, totalizando 699 MB no diretório, depois de utilizar o OptiPNG, o diretório ficou com 286 MB, aproximadamente 41% do tamanho inicial e mantendo a mesma qualidade.

Para JPEG além de buscar uma forma de reduzir as imagens, existe o modo progressivo, que quando a conexão é mais lenta, permite exibir uma imagem inicialmente em baixa qualidade e ir melhorando conforme o arquivo é recebido. Para isto utilizei o jpegtran, que pode ser instalado com apt-get install libjpeg-progs no Debian.

Algumas vezes pego pacotes de imagens na internet compactadas em algum formato, após descompactá-las e otimizá-las, tenho um tamanho menor no diretório sem compactar que no arquivo compactado, e recompactando fica menor ainda. Recomendo utilizar esses programas mesmo no computador local para economizar espaço. Para facilitar ainda mais fiz um script para GNU/Linux que identifica o tipo de imagem e executa o programa correto com os parâmetros necessários, quem quiser pode dar uma olhada no meu GitHub. Também configurei como uma ação personalizada no Thunar, então basta um click com o botão direito, selecionar a ação e já tenho o arquivo ou arquivos selecionados otimizado.

Para otimizar o CSS e JavaScript, primeiro é bom reduzir o número de arquivos visando reduzir o número de requisições HTTP. Outro ponto importante é que para executar o JavaScript no navegador é necessário parar todos os demais processos do navegador, ou seja, dois códigos JavaScript não são executados em paralelo, nem um código JavaScript e renderizar o HTML, por este motivo existe a prática de colocar as tags script antes de fechar o body, para termos a página renderizada primeiro.

Agora para reduzir o tamanho do CSS e JavaScript existe uma técnica chamada minify, que consistem em reduzir espaços em branco, quebra de linhas e utilizar nome de variáveis menores em JavaScript. Uma ferramenta que conheço para esta tarefa é o YUI Compressor, escrito em Java, então funciona em qualquer plataforma. Porém se forem editar os arquivos posteriormente recomendo manter uma cópia do original.

O HTML segue os mesmos princípios do CSS e JavaScript de reduzir espaços em branco, que são colocados principalmente quando a página é gerada dinamicamente ou indentada, que faz sentido para quem está vendo o código, porém não faz diferença para o navegador. Quando é aplicado em cima de páginas dinâmicas, esse processo, diferente dos descritos anteriormente, precisa ser refeito para cada página, aumentando o processamento necessário para gerar a página e por isso muitas vezes é deixado de lado. Para páginas estáticas, como pode ser aplicado apenas uma vez, volta a ser interessante. Para fazer essa otimização, ela segue as mesmas regras de arquivos XML, ou seja, também pode ser aplicada em feeds RSS.

Também para reduzir o processamento, podemos deixar os arquivos já compactados no servidor, não necessitando recompactá-los a cada requisição. Um exemplo desta configuração para NGIX pode ser vista no texto do Magnum quando ele estava configurando o servidor para o seu site feito no Pelican (http://mindbending.org/pt/servindo-sites-estaticos-com-o-nginx#configurando-um-site).

Anúncios

Comente

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s