O que é minificação?

Navegadores não estão preocupados com a clareza do código na hora que estão gerando uma página web ou rodando um script. A minificação remove do código tudo que não é obrigatório para que o arquivo seja executado da forma correta e ao contrário das técnicas de compressão, os arquivos minificados não precisam retornar ao estado anterior antes que possam ser lidos e executados.

A minificação ocorre após o código aplicação web ter sido escrita, mas antes de ter sido lançada. Quando um usuário faz uma requisição para de uma página web, a versão minificada é enviada ao invés da versão completa e com isso é possível obter uma resposta mais rápida e a um custo menor da banda de internet.

Como a minificação funciona

A minificação funciona através da análise e reescrita das partes de um website que são definidas por arquivos de texto (código HTML, CSS, JavaScript, etc..). Normalmente ela é realizada pelo servidor web antes de enviar a resposta a máquina cliente ou podendo já existir uma versão pronta em situações mais manuais de controle de versão.

Aqui está um passo a passo de como a minificação pode ocorrer:

1. O desenvolvedor cria os arquivos JavaScript ou CSS para serem utilizados na aplicação Web. Estes arquivos estão formatados para a conveniência do desenvolvedor. Isto significa que eles terão comentários, indentações, variáveis com nomes autoexplicativos e outras boas práticas utilizadas para melhorar o entendimento do código.
2. O desenvolvedor aplicará técnicas de minificação para converter o arquivo em uma versão mais otimizada, mas mais difícil de ser entendida por humanos. Normalmente estás técnicas removerão todas as aplicações de boas práticas em prol da otimização do código.
3. O servidor web utiliza a versão minificada quando responder a requisições, resultando em menos trafego de banda sem sacrificar a funcionalidade do código.

Técnicas de minificação e ferramentas

Uma das ferramentas mais completas de minificação é o minify. O minify gerencia a minificação, caching, e comprime os arquivos CSS, HTML e JavaScript. Ele também oferece integração com frameworks e aplicações web populares tais como o WordPress e Magento.

• Minificação HTML

  O google fornece o PageSpeed Insights. Um site e extensão do Chrome que recomenda melhoras de performance para qualquer website. Ele também fornece uma ferramenta que minifica o HTML do site aberto.

• Minificação CSS

  Como o CSS provavelmente será alterado com frequência, existem diversas ferramentas online que fornecem minificação instantânea. O CSS Minifier é um jeito fácil e rápido de minificar, enquanto o Refresh-SF usa diversas ferramentas para minificar o HTML, CSS e JavaScript.

• Minificação JavaScript

  A ferramenta do Google de Otimização de JavaScript chamada de Closure Compiler cria uma versão mais eficiente de arquivos JavaScript. Quando um desenvolvedor cria ou altera um Arquivo JavaScript, ele ou ela pode usar o Closure Compiler para minificar o código. O novo arquivo é publicado no servidor onde ele pode ser acessado pelo navegador web.

Conclusão

Minificar os arquivos é um jeito fácil e rápido de reduzir o uso de recursos da sua aplicação web. Mesmo com as técnicas padrões de minificação, é possível reduzir em até 60% o tempo de renderização de uma página. Você também pode ter grandes ganhos de performance sem comprometer a experiencia do usuário.