Deseja reduzir os arquivos do seu site WordPress?
Minimizar seus arquivos CSS e JavaScript do WordPress pode torná-los mais rápidos e acelerar seu site WordPress.
Neste guia, mostraremos como minimizar facilmente arquivos CSS/JavaScript no WordPress para melhorar o desempenho e a velocidade.
O que é minificação e quando você precisa dela?
O termo ‘minify’ é usado para descrever um método que reduz o tamanho do arquivo do seu site. 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 minificar o código, ficará assim:
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}
Geralmente, recomenda-se minimizar apenas os arquivos enviados aos navegadores dos usuários. Isso inclui arquivos HTML, CSS e JavaScript.
Você também pode minimizar arquivos PHP, mas minimizá-los não melhorará a velocidade de carregamento da página para seus usuários. Isso ocorre porque o PHP é uma linguagem de programação do lado do servidor, o que significa que ela é executada nos servidores antes que qualquer coisa seja enviada ao navegador da web do visitante.
O benefício de reduzir os arquivos é a velocidade e o desempenho aprimorados do WordPress, pois os arquivos compactos são carregados mais rapidamente.
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 imagens para a web.
Se você está tentando alcançar uma pontuação de 100/100 no Google Pagespeed ou na ferramenta GTMetrix, minimizar o CSS e o JavaScript melhorará significativamente sua pontuação.
Com isso dito, vamos dar uma olhada em como minimizar facilmente CSS/JavaScript em seu site WordPress.
Nós vamos passar por 3 opções diferentes que você pode escolher:
- Método 1. Minimize CSS/JavaScript no WordPress usando WP Rocket (recomendado)
- Método 2. Minimize CSS/JavaScript no WordPress usando SiteGround
- Método 3. Minimize CSS/JavaScript usando Autoptimize
Preparar? Vamos começar com o nosso melhor método recomendado.
Método 1. Minimize CSS/JavaScript no WordPress usando o WP Rocket
Este método é mais fácil e recomendado para todos os usuários. Funciona independentemente da hospedagem WordPress que você está usando.
Primeiro, você precisa instalar e ativar o plugin WP Rocket. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.
WP Rocket é o melhor plugin de cache do WordPress no mercado. Ele permite que você adicione facilmente o cache ao WordPress e melhore significativamente a velocidade do site e os tempos de carregamento da página.
Para mais detalhes, confira nosso tutorial sobre como instalar e configurar o WP Rocket no WordPress.
Após a ativação, você deve visitar o Configurações » WP Rocket e mude para a guia ‘Otimização de arquivo’.
A partir daqui, você precisa verificar a opção Minify CSS Files.
O WP Rocket mostrará um aviso de que isso pode quebrar as coisas em seu site. Vá em frente e clique no botão ‘Enable Minify CSS’. Você sempre pode desabilitar esta opção se causar algum problema com seu site.
Em seguida, você precisa rolar para baixo até a seção Arquivos JavaScript abaixo.
Aqui, basta marcar a caixa ao lado da opção ‘Minimizar arquivos JavaScript’.
Novamente, você verá um aviso de que isso pode causar problemas em seu site. Vá em frente e clique no botão ‘Enable Minify JavaScript’.
Depois disso, não se esqueça de clicar no botão Salvar alterações para armazenar suas configurações.
O WP Rocket agora começará a reduzir seus arquivos CSS e JavaScript. Você pode limpar seu cache nas configurações do plug-in para garantir que ele comece a usar o CSS e o JavaScript reduzidos para o próximo visitante do site.
Método 2. Minimize CSS/JavaScript no WordPress usando SiteGround
Se você estiver usando o SiteGround como seu provedor de hospedagem WordPress, poderá minimizar os arquivos CSS usando o SiteGround Optimizer.
O SiteGround Optimizer é um plugin de otimização de desempenho que funciona em sua própria plataforma. Funciona bem com seu PHP extremamente rápido para melhorar os tempos de carregamento do seu site.
Basta instalar e ativar o Otimizador do SiteGround plugin em seu site WordPress. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin 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 daqui, você precisa clicar no botão ‘Ir para o Frontend’ em ‘Outras Otimizações’.
Na próxima tela, você precisa ativar a opção ao lado da opção ‘Minimizar arquivos CSS’.
Em seguida, você precisa alternar para a guia JavaScript e ativar a opção ao lado da opção ‘Minimizar arquivos JavaScript’.
Isso é tudo! Agora você pode liberar seu cache do WordPress e visitar seu site para carregar versões minificadas de arquivos CSS e JS.
Método 3. Minimize CSS/JavaScript usando Autoptimize
Este método é recomendado para usuários que não são do SiteGround que não estão usando o WP Rocket.
Primeiro de tudo, você precisa instalar e ativar o otimizar automaticamente plugue. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você deve visitar o Configurações » Otimizar automaticamente página para definir as configurações do plug-in.
A partir daqui, você deve primeiro verificar a opção ‘Otimizar código JavaScript’ em Opções de JavaScript.
Depois disso, você precisa rolar para baixo até Opções CSS e marcar a caixa ao lado da opção ‘Otimizar código CSS’.
Não se esqueça de clicar no botão Salvar alterações para armazenar suas configurações.
Você pode então clicar no botão Esvaziar Cache para começar a usar seus arquivos minificados. O plugin também pode ser usado para corrigir falhas de renderização de JavaScript e CSS no WordPress.
Esperamos que este artigo tenha ajudado você a minimizar CSS e JavaScript em seu site WordPress. Você também pode assistir ao nosso tutorial sobre como otimizar as principais linhas de vida da web no WordPress e seguir nosso guia definitivo para o desempenho do WordPress.
