Como reduzir o CSS, HTML e JavaScript do seu site WordPress

Publicados: 2023-02-28

Minificação é um conceito simples que geralmente é recomendado como um passo para acelerar o seu site. Mas a realidade é que muitos proprietários de sites ficam extremamente frustrados quando tentam minimizar seus arquivos e acabam corrompendo seus sites.

Então o que acontece?

A minificação geralmente requer muita experimentação. Embora existam muitas soluções disponíveis, o modo como elas se comportam varia de site para site, dependendo do tema e dos plug-ins que você está usando.

Nesta postagem, exploraremos o que é minificação, seus benefícios e algumas das soluções de minificação mais populares disponíveis – manuais e plug-ins – para ajudar a indicar a solução certa para o seu site.

O que é Minificação?

Os sites são compostos de vários arquivos diferentes. Se você testar a velocidade do seu site com o Google PageSpeed Insights, poderá receber a recomendação de reduzir seus arquivos HTML, CSS e JavaScript.

O problema? Como humanos, escrevemos o código contido nesses arquivos para que possamos lê-los, mas os computadores não se importam com caracteres como comentários, formatação, espaços em branco e novas linhas. Então, quando eles encontram esses caracteres desnecessários nos arquivos do site, eles os ignoram.

É aí que a minificação entra em cena. Minificação é um termo de programação que basicamente significa remover quaisquer caracteres desnecessários que não são necessários para a execução do código. A minificação funciona analisando e reescrevendo o código para reduzir o tamanho geral dos seus arquivos, reduzindo assim o tamanho total do seu site para que ele carregue mais rapidamente no navegador do usuário.

Por exemplo, aqui estão alguns CSS que você pode encontrar em uma folha de estilo:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

E aqui está a versão reduzida do exemplo CSS acima:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Veja o quanto mais compactado o código é?

A minificação é realizada em um servidor web antes que uma resposta seja enviada. Após a minificação, o servidor web usa os arquivos menores minificados – e muito mais rápidos – no lugar dos originais, resultando em menor largura de banda sem sacrificar a funcionalidade.

Como explica o especialista em SEO Yoast, a redução de arquivos pode economizar até 30-40%, ou até 50% do tamanho do arquivo em alguns casos.

Por que você deve minimizar seus arquivos HTML, CSS e JavaScript

Ter um site rápido não apenas deixa o Google feliz – e ajuda seu site a ter uma classificação mais elevada nas pesquisas – mas também proporciona uma melhor experiência de usuário para os visitantes do seu site.

A minificação tem muitos benefícios:

Arquivos menores significam que o tamanho total de download do seu site é reduzido,
Os visitantes do site poderão carregar e acessar suas páginas com mais rapidez,
Os visitantes do site terão uma experiência de usuário idêntica, sem precisar baixar arquivos maiores e
Os proprietários de sites obterão custos mais baixos de largura de banda, pois menos dados serão transmitidos pela rede.

Como reduzir seus arquivos HTML, CSS e JavaScript

Antes de reduzir os arquivos do seu site, é uma boa ideia fazer um backup. Melhor ainda, reduza seus arquivos em um site de teste para que você possa verificar se tudo está funcionando bem antes de fazer alterações em seu site ativo.

Também é importante avaliar a velocidade da sua página antes e depois da minificação dos arquivos, para que você possa comparar os resultados e ver se a minificação teve algum impacto.

Meu site de teste de velocidade favorito é o GTmetrix. Ele analisa o desempenho da velocidade da sua página usando o Google PageSpeed Insights e o YSlow, uma ferramenta de teste de desempenho de código aberto. Em seguida, ele gera pontuações e fornece recomendações para melhorias na otimização do site.

Outras ótimas ferramentas de teste de velocidade que posso recomendar incluem Pingdom Website Speed Test e WebPageTest e teste sua velocidade móvel.

Minimizando arquivos manualmente

Minimizar arquivos manualmente exige muito tempo e esforço. Quero dizer, quem tem tempo para remover espaços em branco individuais, linhas e códigos desnecessários dos arquivos? Tedioso! Além disso, permite mais espaço para erro humano. Portanto, eu não recomendaria esse método para reduzir arquivos.

Felizmente, existem muitas ferramentas de minificação online gratuitas disponíveis que permitem copiar e colar código de e para o seu site. Aqui está uma breve lista de ferramentas e encorajo você a pesquisar outras opções que possam funcionar melhor para o seu site.

1. Minificador de HTML de Will Peavy

O HTML Minifier é uma ferramenta online gratuita para minificação de HTML construída com PHP. Para usar a ferramenta, basta colar seu HTML na área de texto, incluindo qualquer CSS de JavaScript em sua marcação, e clicar no botão “Minificar”. Para garantir que seus scripts funcionem após a minificação, é recomendável encerrar as instruções JavaScript com ponto e vírgula e usar a sintaxe* *para comentários.

2. Minificador CSS

Outra ferramenta gratuita, CSS Minifier funciona minificando o CSS que você copia e cola na área de texto “Input CSS”. Existem opções para baixar a saída minificada como um arquivo. Para desenvolvedores, esta ferramenta também fornece uma API.

3.JSCompress

JSCompress é um compressor JavaScript online que permite compactar e reduzir seus arquivos JS em até 80% de seu tamanho original. Para utilizá-lo, copie e cole seu código ou carregue e combine vários arquivos e clique em “Compactar JavaScript”. Esta ferramenta é baseada em UglifyJS 3 e babili-standalone.

Ferramentas manuais de minificação para desenvolvedores

Para desenvolvedores que procuram opções mais avançadas, o Google recomenda estes recursos de minificação de HTML, CSS e JavaScript:

HTMLMinifier – Um compressor/minificador HTML baseado em Javascript (com suporte para Node.js).
CSSNano – Um minificador modular, construído sobre o ecossistema PostCSS.
csso – Um minificador CSS com otimizações estruturais.
UglifyJS – Um analisador JavaScript, manipulador, compressor e kit de ferramentas de “embelezador”.

O Closure Compiler do Google é uma ferramenta de otimização para JavaScript. Em vez de compilar de uma linguagem fonte para código de máquina, ele compila a partir de JavaScript para criar um JavaScript melhor. Ele analisa seu código, analisa-o, remove código morto e reescreve e minimiza o que resta. Essa ferramenta também verifica sintaxe, referências de variáveis e tipos, e alerta sobre armadilhas comuns do JavaScript.

Minimizando arquivos com plugins

Existem alguns plug-ins excelentes disponíveis, gratuitos e premium, que podem reduzir seus arquivos sem que você precise executar etapas manuais.

Observação: para esta lista, incluí apenas plug-ins gratuitos disponíveis no repositório de plug-ins do WordPress que estão atualizados e testadoscomo compatíveis com as versões mais recentes do WordPress. Para opções premium, role para baixo./

1. HTML Minificar

Este plugin simples, leve e descomplicado permite que você minimize a saída HTML do seu site. Para utilizá-lo, basta instalar e ativar o plugin e ele reduzirá automaticamente sua marcação sem a necessidade de definir nenhuma configuração.

2. Minimize o HTML

Adoro a descrição do WordPress.org para este plugin: “Já olhou para a marcação HTML do seu site e percebeu como ela parece desleixada e amadora?” Este plugin limpa e minimiza a marcação desleixada.

Ao contrário do plug-in HTML Minify, esta ferramenta oferece mais opções. Inclui minificação opcional para JavaScript e CSS, embora não mexa com áreas de texto ou texto pré-formatado. Também existem opções para remover comentários HTML, CSS e JavaScript (deixando comentários condicionais MSIE), remover tags de fechamento XHTML desnecessárias de elementos void HTML5 e remover esquemas e domínios relativos desnecessários de links.

3. Mesclar + Minificar + Atualizar – Plugins WordPress

O plug-in Mesclar + Minificar + Atualizar.

Este plug-in faz mais do que apenas minimizar seu código. Ele combina seus arquivos CSS e JavaScript ereduzos arquivos gerados usando Minify (para CSS) e Google Closure (para JavaScript). A minificação é realizada via WP-Cron para que não afete a velocidade do seu site.

Quando o conteúdo de seus arquivos CSS ou JS muda, eles são reprocessados, então não há necessidade de esvaziar seu cache. Usuários multisite ficarão felizes em saber que este plugin funciona bem em redes.

4. Otimização JCH

JCH Optimize tem vários recursos interessantes para um plugin gratuito: ele combina e minimiza CSS e JavaScript, minimiza HTML, há compactação GZip para combinar arquivos, geração de sprites para imagens de fundo e você pode excluir determinados arquivos da combinação para resolver conflitos.

Há uma versão pro disponível com mais recursos de otimização, incluindo carregamento de JavaScript de forma assíncrona, otimização de entrega de CSS para eliminar bloqueio de renderização, suporte a domínio CDN/sem cookies e carregamento lento e otimização de imagens.

5. Minimização de CSS

Minificar seu CSS com este plugin não poderia ser mais fácil – basta instalar, ativar, ir emConfigurações > CSS Minifypara habilitar apenas uma opção: Otimizar e minificar código CSS.

O código neste plug-in foi derivado do popular plug-in Autoptimize (mais sobre este plug-in abaixo). O autor do plug-in, Peter Pfeiffer, tem um plug-in semelhante disponível para JavaScript, o Minify JavaScript.

6. Minimização de velocidade rápida

Com mais de 20.000 instalações ativas e uma classificação de cinco estrelas, esta é uma das opções mais populares disponíveis para reduzir arquivos. Para usá-lo, instale e ative o plug-in e vá paraConfigurações > Fast Velocity Minify. Lá, você encontrará uma pilha de opções para configurar o plugin, incluindo opções avançadas para desenvolvedores, exceções de JavaScript e CSS, opções de CDN, bem como informações do servidor. No entanto, as configurações padrão funcionam bem para a maioria dos sites.

O plug-in realiza minificação em tempo real no front-end e somente durante a primeira solicitação não armazenada em cache. Depois que a primeira solicitação for processada, todas as outras páginas que exigirem o mesmo conjunto de CSS e JavaScript serão atendidas pelo mesmo arquivo de cache estático.

7. Otimização automática

Com mais de 400.000 instalações ativas, o Autoptimize é facilmente a ferramenta de minificação mais popular no repositório de plug-ins do WordPress.

O Autoptimize pode agregar, reduzir e armazenar em cache scripts e estilos, injetar CSS no cabeçalho da página por padrão e também mover e adiar scripts para o rodapé. Existem muitas opções avançadas para desenvolvedores e uma extensa API disponível para que você possa adaptar o Autoptimize para atender às necessidades específicas do seu site.

8. Otimização da velocidade da página Hummingbird

Hummingbird é um plugin relativamente novo para o repositório de plugins do WordPress, tendo começado como um plugin premium. A versão gratuita apresenta uma grande coleção de ferramentas de otimização de sites, incluindo minificação, permitindo que você minifique, posicione e combine arquivos para obter o melhor desempenho.

Há também um ótimo recurso de verificação que permite testar o desempenho do seu site e obter recomendações acionáveis para melhorá-lo, diretamente no plug-in.

Minificação como recurso em plug-ins de cache do WordPress

A minificação geralmente é um recurso padrão que você encontrará em plug-ins de cache. Aqui estão os plug-ins que testei e posso recomendar:

Foguete WP
Cache Total W3
Super Cache WP

Conclusão

Espero que este artigo tenha desmistificado a minificação para você e fornecido uma compreensão sólida do que é e como você pode aplicá-la ao seu site.

É importante ter em mente que a minificação é mais uma etapa de ajuste fino – você pode ver uma pequena melhora na velocidade do seu site, mas não será significativa. Dito isto, é uma prática recomendada que vale a pena implementar, além de outras técnicas de desempenho e otimização, como combinar arquivos.

Além disso, certifique-se de configurar, testar, reconfigurar, testar novamente, ajustar e verificar o que funciona melhor para o seu site ao reduzir seus arquivos, porque cada site é diferente.

Se você gostou desta postagem, verifique os 6 melhores plug-ins de cache do WordPress comparados para obter mais conselhos sobre como acelerar seu site.

Já tentou minificar seu código? Que outros métodos para tornar seu site mais rápido você usou? Deixe-nos saber na seção de comentários abaixo!