Como reduzir os arquivos CSS / JavaScript no WordPress (3 maneiras)

Ninguém quer um site lento. Tempos de carregamento lentos frustram os visitantes e prejudicam as classificações de pesquisa.

Como especialistas em otimização de desempenho do WordPress, descobrimos que a redução dos arquivos CSS e JavaScript pode ajudar a criar um site mais rápido e eficiente.

Neste guia, mostraremos como reduzir facilmente os arquivos CSS e JavaScript no WordPress para melhorar o desempenho e a velocidade, aprimorando a experiência do usuário e a visibilidade do mecanismo de pesquisa.

O que é minificação e quando você precisa dela?

O termo “minify” é usado para descrever um método que reduz o tamanho dos arquivos do seu site WordPress. Ele faz isso removendo espaços em branco, linhas e caracteres desnecessários do código-fonte.

Aqui está um exemplo de código CSS normal:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Depois de reduzir o código, ele terá a seguinte aparência:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Normalmente, é recomendável reduzir apenas os arquivos que são enviados aos navegadores dos usuários. Isso inclui arquivos HTML, CSS e JavaScript.

Você também pode reduzir os arquivos PHP, mas isso não aumentará a velocidade de carregamento da página para seus usuários. Isso se deve ao fato de o PHP ser uma linguagem de programação do lado do servidor, o que significa que ele é executado nos servidores antes de qualquer coisa ser enviada ao navegador da Web do visitante.

A vantagem de reduzir os arquivos é melhorar a velocidade e o desempenho do WordPress, pois os arquivos compactos são mais rápidos de carregar.

No entanto, alguns especialistas acreditam que a melhoria de desempenho é muito pequena para a maioria dos sites e não vale a pena. A minificação remove apenas alguns kilobytes de dados na maioria dos sites WordPress. Você pode reduzir ainda mais o tempo de carregamento da página otimizando as imagens para a Web.

Se estiver tentando obter uma pontuação de 100/100 no Google PageSpeed Insights ou na ferramenta GTMetrix, a redução de CSS e JavaScript melhorará significativamente sua pontuação.

Dito isso, vamos dar uma olhada em como reduzir facilmente o CSS/JavaScript no seu site WordPress. Veremos três opções diferentes que você pode escolher:

Pronto? Vamos começar com nosso método mais recomendado.

Método 1. Reduzir CSS/JavaScript no WordPress usando o WP Rocket

Esse método é mais fácil e é recomendado para todos os usuários. Ele funciona independentemente da hospedagem do WordPress que você estiver usando.

Primeiro, você precisa instalar e ativar o plug-in WP Rocket. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

O WP Rocket é o melhor plugin de cache para WordPress do mercado. Ele permite que você adicione facilmente o armazenamento em cache ao WordPress e melhore significativamente a velocidade do site e o tempo de carregamento da página.

Para obter mais detalhes, consulte nosso tutorial sobre como instalar e configurar o WP Rocket no WordPress.

Após a ativação, você precisa visitar a página Settings ” WP Rocket e alternar para a guia “File Optimization” (Otimização de arquivos).

A partir daí, você precisa marcar a opção Minify CSS files (Minificar arquivos CSS).

O WP Rocket mostrará um aviso de que isso pode prejudicar o seu site. Vá em frente e clique no botão “Activate Minify CSS”. Você sempre poderá desativar essa opção se ela causar algum problema em seu site.

Em seguida, role a tela para baixo até a seção Arquivos JavaScript abaixo.

Aqui, basta marcar a caixa ao lado da opção “Minify JavaScript files” (Minificar arquivos JavaScript).

Mais uma vez, você verá um aviso de que isso pode prejudicar o seu site. Vá em frente e clique no botão “Activate Minify JavaScript”.

Depois disso, não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

O WP Rocket agora começará a reduzir seus arquivos CSS e JavaScript. Você pode limpar o cache nas configurações do plug-in para garantir que ele comece a usar o CSS e o JavaScript minificados para o próximo visitante do site.

Método 2. Reduzir CSS/JavaScript no WordPress usando o SiteGround

Se você estiver usando o SiteGround como seu provedor de hospedagem WordPress, poderá reduzir os arquivos CSS usando o SiteGround Optimizer.

O SiteGround Optimizer é um plug-in de otimização de desempenho que funciona em sua própria plataforma. Ele funciona bem com o PHP Ultrafast para melhorar o tempo de carregamento do seu site.

Basta instalar e ativar o plug-in SiteGround Optimizer em seu site WordPress. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Depois disso, você precisa clicar no menu SG Optimizer na barra lateral de administração do WordPress.

Isso o levará às configurações do SG Optimizer.

A partir daí, você precisa clicar no botão “Go To Frontend” (Ir para o front-end) em “Other Optimizations” (Outras otimizações).

Na próxima tela, você poderá gerenciar o front-end do CSS.

Você precisa ativar o botão de alternância ao lado da opção “Minify CSS files” (Minificar arquivos CSS).

Em seguida, você precisa alternar para a guia JavaScript e ativar o botão de alternância ao lado da opção “Minify JavaScript Files”.

Isso é tudo! Agora você pode esvaziar o cache do WordPress e visitar seu site para carregar versões reduzidas de arquivos CSS e JS.

Método 3. Reduzir CSS/JavaScript usando o Autoptimize

Esse método é recomendado para usuários que não estão no SiteGround e não usam o WP Rocket.

Primeiro, você precisa instalar e ativar o plug-in Autoptimize. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Settings ” Autoptimize para definir as configurações do plug-in.

Aqui, primeiro você precisa marcar a opção “Otimizar código JavaScript” em Opções de JavaScript.

Depois disso, você precisa rolar para baixo até as Opções de CSS.

Uma vez lá, você deve marcar a caixa ao lado da opção “Optimize CSS code” (Otimizar código CSS).

Não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

Em seguida, você pode clicar no botão Empty Cache para começar a usar seus arquivos reduzidos. O plug-in também pode ser usado para corrigir JavaScript e CSS que bloqueiam a renderização no WordPress.

Esperamos que este artigo tenha ajudado você a reduzir o CSS e o JavaScript em seu site WordPress. Talvez você também queira ver nosso guia sobre otimização do Core Web Vitals no WordPress e nossa seleção especializada dos melhores construtores de páginas do WordPress do tipo arrastar e soltar.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.