Como minificar HTML, JS, CSS?

Fala, Kangaroozinho. Como vai? Minificar o código de recursos utilizados no site (como HTML, CSS e JS) é uma prática bastante recorrente por usuários que querem obter máxima performance em seus sites, podendo ajudar um pouco tanto na melhoria da nota de velocidade em mecanismos de testes quanto em um singelo ganho de velocidade.

Por isso, vamos explicar hoje porquê de você começar a fazer essa otimização e como hoje pode ser feito. Bora?

Sumário

1. Para que serve?
2. Como minificar no WordPress
3. Como fazer em sites não WordPress?
4. Conclusão

Para que serve a minificação de recursos?

A minificação consiste em reduzir o código fonte de um determinado recursos, para deixar o arquivo final menor, permitindo um carregamento mais rápido. De maneira geral, essa não é uma estratégia que causa alto impacto, ou seja, ela não resulta em grandes ganhos de performance ou velocidade.

Contudo, essa é uma prática de desenvolvimento e também de SEO bastante recomendada, já que em um mar de tantos sites, toda forma de destaque sempre é mais que bem vinda, né?

Normalmente, essa redução é feita ao remover comentários e linhas em branco do código final, gerando algo que mais parece um bloco único de código em baralhado, já que as quebras de linhas também são revertidas.

Na maioria dos casos, isso gera uma redução de alguns KBs nos arquivos otimizados, o que não é muito individualmente, mas que pode trazer um ganho mais acentuado quando lembramos que são abertos mais arquivos na execução de um site, o que significa que quantos mais arquivos são otimizados, maior tende a ser o ganho vindo dessa prática.

Como minificar HTML, CSS, JS no WordPress?

A minificação de recursos dentro do WordPress pode ser feita pela grande maioria dos plugins de otimização de site para ganho de performance, como o LiteSpeed Cache, WP Fastest Cache e WP Rocket, por exemplo.

Esses plugins, assim como algumas outras opções, contam com o recurso de minificação já integrada, permitindo fazer isso de forma extremamente simples e até mesmo com um único botão, automatizando todo o processo diretamente através do plugin, sem que você precise interagir com uma única linha de código sequer.

E para sites não WordPress?

Se o seu site não é baseado em WordPress, e utiliza qualquer outra plataforma (ou não utiliza plataforma alguma), há uma forma universal para todos os sites que é minificar manualmente os arquivos, sendo necessário coletar cada um dos arquivos que será minificado e aplicar os ajustes.

Para tornar esse processo mais simples, existem ferramentas como o Code Beautify, que conta com várias ferramentas de minificação que podem ser encontradas ao clicar aqui. Essas ferramentas podem minificar diveros tipos de linguagens, podendo ser aplicadas em diversas funcionalidades.

Lembre-se de, após seguir com a minificação, atualizar os seus arquivos em produção usando as versões minificadas. Também pode ser necessário fazer uma limpeza de cache para garantir o funcionamento dos novos arquivos.

Conclusão

Com essa nova técnica, seu site com certeza estará mais adequado às melhores práticas, podendo também já ter resultados na melhoria da velocidade de carregamento. O processo em si é simples, mas o apoio de seu programador pode ser necessário para que o ajuste seja feito em todos os arquivos otimizáveis.

Se você gostou da dica, não deixe de continuar acompanhando nosso blog para encontrar mais conteúdo como esse, e nos vemos na próxima!