Como minimizar as informações CSS / JavaScript no WordPress (3 estratégias)

Deseja reduzir documentos em sua página da web do WordPress?

Minimizar suas informações de CSS e JavaScript do WordPress pode fazer com que eles carreguem mais rápido e acelerem seu site WordPress.

Neste manual, mostraremos como simplificar arquivos CSS/JavaScript no WordPress para melhorar o desempenho e a velocidade.

O que é Minificação e quando você precisará dela?

A expressão 'minify' é usada para descrever um sistema que reduz o tamanho do arquivo do seu site. Ele faz isso eliminando espaços em branco, linhas e pessoas indesejadas do código de recurso.

Aqui está uma instância do código CSS padrão:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Depois de minificar o código, ficará assim:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Geralmente, é sugerido reduzir apenas os documentos que são enviados para os navegadores do usuário. Isso apresenta arquivos HTML, CSS e JavaScript.

Você também pode minimizar documentos PHP, mas reduzi-los não aumentará o ritmo de carregamento da página para seus clientes. Como o PHP é uma linguagem de programação do lado do servidor, isso significa que ele opera em servidores antes que algo seja enviado para o navegador de internet do visitante.

O ganho de minificar arquivos de dados é o ritmo e o desempenho geral do WordPress aprimorados, considerando que as informações compactas são mais rápidas para carregar.

No entanto, alguns gurus pensam que o avanço da funcionalidade é muito pequeno para a maioria dos sites e não digno da dificuldade. A minificação apenas elimina alguns kilobytes de dados na maioria dos sites WordPress. Você pode minimizar muito mais o tempo de carregamento do site otimizando imagens para a rede mundial.

Se você está tentando atingir a classificação 100/100 no software Google Pagespeed ou GTMetrix, a redução de CSS e JavaScript aumentará consideravelmente sua pontuação.

Tendo mencionado isso, vamos dar uma olhada em como minimizar sem esforço CSS/JavaScript em sua página da web do WordPress.

Nós iremos mais de 3 opções distintas que você pode optar por:

Tudo pronto? Vamos começar com o nosso melhor processo proposto.

Processo 1. Minimize CSS/JavaScript no WordPress usando o WP Rocket

Esta técnica é mais fácil e é proposta para todos os consumidores. Ele opera independentemente de qual hospedagem WordPress você está usando.

Inicial, você precisa instalar e ativar o plugin WP Rocket. Para detalhes adicionais, consulte nosso guia fase por movimento sobre como configurar um plug-in do WordPress.

WP Rocket é o melhor plugin de cache do WordPress no mercado. Ele permite que você insira facilmente o cache no WordPress e aumente substancialmente a velocidade do site e os momentos de carregamento do site.

Para muito mais informações, veja nosso tutorial sobre como instalar e configurar o WP Rocket no WordPress.

Após a ativação, você deseja verificar a página Configurações »WP Rocket e alternar para a guia 'Otimização de arquivo'.

A partir daqui, você precisará olhar para a solução de documentos CSS Minify.

O WP Rocket exibirá um aviso de que isso pode dividir pontos em seu site. Vá em frente e simplesmente clique no botão 'Ativar Minify CSS'. Você pode desativar constantemente essa seleção se ela causar algum problema com seu site.

Em seguida, você precisa rolar para baixo até a parte de documentos JavaScript abaixo.

Aqui, basta testar a caixa após a opção 'Minify JavaScript files'.

Novamente, você verá um aviso de que isso pode quebrar coisas em seu site. Vá em frente e simplesmente clique no botão 'Ativar Minify JavaScript'.

Logo em seguida, nunca deixe de clicar no botão Preservar ajustes para manter suas configurações.

O WP Rocket agora começará a reduzir suas informações de CSS e JavaScript. Você pode limpar seu cache nas configurações do plug-in para garantir que ele comece a empregar o CSS e o JavaScript reduzidos para o futuro visitante da página da web.

Técnica 2. Minimize CSS/JavaScript no WordPress empregando SiteGround

Se você estiver aplicando o SiteGround como seu provedor de serviços de hospedagem na web do WordPress, poderá minimizar os arquivos CSS trabalhando com o SiteGround Optimizer.

O SiteGround Optimizer é um plug-in de otimização de desempenho geral que funciona em seu sistema. Ele funciona bem com o PHP Ultrafast para fortalecer os períodos de carregamento do seu site.

Basta configurar e ativar o plugin SiteGround Optimizer em seu site WordPress. Para obter detalhes adicionais, consulte nosso guia passo a passo sobre como colocar um plugin do WordPress.

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

Isso apenas levará você às configurações do SG Optimizer.

Neste artigo, você precisa clicar no botão 'Ir para o frontend' menos de 'Outras otimizações'.

No próximo monitor, você precisa alternar na alternância próxima à solução 'Minify CSS files'.

A seguir, você precisa alternar para a guia JavaScript e ativar a alternância próxima à seleção de 'Minify JavaScript Files'.

Isso é tudo! Agora você pode esvaziar o cache do WordPress e dar uma olhada no seu site para carregar versões minificadas de documentos CSS e JS.

Abordagem 3. Minimize CSS/JavaScript utilizando Autoptimize

Este método é proposto para consumidores que não estão no SiteGround e não trabalham com o WP Rocket.

Inicialmente, você precisa configurar e ativar o plugin Autoptimize. Para detalhes extras, veja nossa diretriz fase por ação sobre como instalar um plug-in do WordPress.

Na ativação, você precisa dar uma olhada na página Options »Autoptimize para configurar as opções do plugin.

A partir deste artigo, inicialmente você precisa verificar 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 e examinar a caixa ao lado da opção 'Otimizar código CSS'.

Nunca deixe de clicar no botão Conserve Adjustments para armazenar suas configurações.

Em seguida, você pode simplesmente clicar no botão Vacant Cache para começar a trabalhar com seus arquivos de dados minificados. O plugin também pode ser utilizado para lidar com o bloqueio de renderização de JavaScript e CSS no WordPress.

Esperamos que esta postagem tenha ajudado você a reduzir CSS e JavaScript em sua página do WordPress. Você também pode querer ver nosso tutorial sobre como otimizar o core net vitals no WordPress e cumprir nosso melhor tutorial de desempenho geral do WordPress.

Se você gostou desta postagem, certifique-se de se inscrever em nosso canal do YouTube para tutoriais de filmes do WordPress. Você também pode nos encontrar no Twitter e no Facebook.