Blog Código Franco

sexta-feira, 15 de janeiro de 2016

Reduzindo CSS e JS: Técnicas para Acelerar seu Site

Hoje em dia um dos assuntos de maior destaque no mundo da tecnologia é a visibilidade das empresas na internet. Tornar sua empresa visível não é um processo fácil pois depende além de muita dedicação e qualidade, que seu produto esteja visível para o seu público e para as ferramentas de busca.


Reduzir seus arquivos CSS e Javascript é uma das formas mais eficientes de tornar seu site leve, rápido e acessível em redes de menor capacidade sem que seja necessário remover conteúdo importante para o seu cliente. Além disso é um dos pontos principais para que se tenha uma boa qualificação em ferramentas de busca como Google, Yahoo, Bing, etc; aumentando a conversão de visitas.

O procedimento de redução de um arquivo consiste em remover espaços, tabulações, quebras de linhas e comentários do arquivo que será enviado para a versão final do site ou sistema. Isto pode resultar em uma redução em alguns casos superior a 30% do tamanho do arquivo a ser transferido e chegando, em alguns casos, a quase 50% de redução.

Por exemplo um arquivo CSS com aproximadamente 18kb em nossos testes foi reduzido para 11kb e um arquivo Javascript como o do Bootstrap em sua versão formatada possui 66kb enquanto sua versão reduzida apenas 35kb.

Realizar este procedimento apesar de ser algo com resultados visíveis, é um trabalho árduo de se fazer e praticamente inviável em um projeto de grande porte caso você queira se aventurar a realizá-lo manualmente.

Para solucionar este problema, felizmente, existem ferramentas automatizadas. Para realizar a redução de arquivos CSS e Javascript para os projetos que mantenho, utilizo o CSS Minifier disponível no endereço http://www.cleancss.com/css-minify/ e o Javascript Minifier disponível no endereço http://www.danstools.com/javascript-minify/, estas ferramentas realizam a redução de forma rápida e eficiente, e o código gerado pode ser copiado e salvo em um novo arquivo.

Além de realizar a conversão de redução, os sites também disponibilizam ferramentas para realizar o processo inverso, criando um arquivo formatado a partir de um arquivo reduzido ou sem formatação tanto CSS como Javascript além de uma infinidade de formatadores para linguagens de programação web.

Algumas recomendações adicionais para aumentar a eficiência do carregamento de sites é reduzir o número de arquivos a serem carregados, e para isso a recomendação apresentada é de colocar todo o CSS a ser utilizado em um único arquivo de estilos e todo o Javascript a ser utilizado em um único arquivo de scripts, assim aumentamos a eficiência do procedimento de redução e diminuímos o numero de solicitação HTTP realizadas pelo site.

Por fim é recomendado que ao nome do arquivo criado seja adicionado uma identificação de que trata-se de um arquivo reduzido, usualmente um ".min" entre o nome original do arquivo e sua extensão. Também é muito importante manter uma versão formatada para que seja possível trabalhar de forma prática com o arquivo, lembrando de gerar um novo .min a cada nova versão.

Com estas simples ferramentas e a aplicação de poucos conceitos podemos dar os primeiros passos em direção de uma internet mais rápida.


Se você gostou do nosso conteúdo você pode nos ajudar. Qualquer valor é bem vindo e ajuda a manter nossos editores e nossa hospedagem.



Nenhum comentário:

Postar um comentário



Fale Conosco






2013 - 2016 Código Franco - Blog Código Franco
Thiago Franco Desenvolvimento de Sistemas e Soluções Tecnológicas.
Todos os direitos reservados.

As marcas, imagens, logotipos e icones utilizados são de propriedade de seus respectivos donos.
Tecnologia do Blogger. Construido com Bootstrap e jQuery.