Como minimizar arquivos CSS/JavaScript no WordPress (3 maneiras)

Por:

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:

Banner Criacao de Sites Wordpress Pots
Anúncio offweb
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:

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.

Banner SEO Wordpress Posts
Anúncio offweb

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’.

Minimize arquivos CSS no WP Rocket

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.

Ativar minify css

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’.

WP Rocket minifica 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.

Banner Midias Sociais Offweb
Anúncio offweb

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.

Otimizador SG

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’.

Otimização da interface do SiteGround

Na próxima tela, você precisa ativar a opção ao lado da opção ‘Minimizar arquivos CSS’.

Minimizar CSS no SiteGround

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.

Opções de otimização automática 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’.

Otimize automaticamente o 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.

Banner Agencia Wordpress Pots
Anúncio offweb

Compartilhe este Link:

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: