Como agrupar e minificar recursos no WordPress

Ter o melhor desempenho possível é o sonho de todos que gerenciam um site, agrupar e minificar recursos no WordPress é uma das melhores coisas que podemos fazer para isso, mas pode ser realmente difícil. Agrupar todos os seus recursos (principalmente arquivos css e js) pode expor seu site se você não for um desenvolvedor, pois isso pode gerar conflitos.

WP Speed of Light é a melhor solução para melhorar o desempenho do seu site WordPress porque tem muitas opções para fazer o seu site carregar rapidamente com um painel realmente amigável e sim, uma dessas opções é agrupar e minificar recursos. A inclusão/exclusão de um único arquivo do processo de agrupamento e minificação é fundamental para uma otimização personalizada sem conflitos.

Vamos usar um exemplo de site WordPress para esta postagem do blog e vamos aprender como fazer isso para que o processo de configuração de tudo seja mais fácil.

Como fazer uma minificação de JS e CSS no WordPress

Vamos aprender a fazer uma minificação de JS e CSS do wordpress, mas primeiro, precisamos saber o que significa a minificação “A minificação refere-se ao processo de remover dados desnecessários ou redundantes sem afetar como o recurso é processado pelo navegador - por exemplo, comentários de código e formatação, remover código não utilizado, usar nomes de variáveis e funções mais curtos, e assim por diante”.

Agora, vamos fazer um teste de velocidade em nossa página para ver as alterações. Para este exemplo, estamos usando um site com woocommerce e alguns produtos, então na primeira vez ele carregará um pouco lentamente.

Sim, 2,79 segundos para carregar a página, não está mal, mas pode ser melhor, basta minimizar o js e o CSS e ver a diferença, vá para WP Speed of light > Acelerar > Agrupar & Minificar, você poderá ver o menu com todas as opções para minimizar. A versão gratuita do plugin inclui a opção de agrupar e minimizar, mas a exclusão visual de arquivos está disponível apenas na versão PRO do complemento.

Opções do complemento PRO são: Excluir script em linha (Excluir script em linha da minificação), mover scripts para o rodapé (permite acelerar seu site movendo todos os scripts minificados para o rodapé), Agrupar fontes e Fontes do Google (Agrupar fontes locais e fontes do Google em um único arquivo para ser servido mais rapidamente) e Exclusão avançada de arquivos.
 
Você tem a opção de minificar, como pode ver, JS, CSS e também HTML, agora basta ativar essas opções, clicar em salvar e todos os seus recursos serão minificados imediatamente, pode haver problemas pois é uma configuração avançada, mas tudo pode ser corrigido com a exclusão de algum código e arquivos (com o complemento pro).

Agora todo o trabalho do desenvolvedor que poderia levar horas é feito em apenas alguns segundos.

Próximo passo, otimize CSS e JS do WordPress

Com este plugin, vamos permitir que o WordPress otimize CSS e JS apenas ativando as opções de grupo no painel, vá para WP Speed of Light > Acelerar > Agrupar & Minificar, você será capaz de ver um painel com as opções para agrupar CSS e JS.

Essas opções permitem que você:

• Agrupar JS: Agrupar vários arquivos Javascript em um único arquivo minimizará o número de solicitações HTTP
• Agrupar CSS: Agrupar vários arquivos CSS em um único arquivo minimizará o número de solicitações HTTP.

Solicitações HTTP: são solicitações feitas ao servidor toda vez que selecionamos algo ou vamos para outra página no mesmo site, portanto, se pudermos reduzir essas solicitações, o tempo de carregamento será reduzido.

Para verificar quantos arquivos, scripts você pode agrupar em seu site, basta abrir o console do navegador (clique com o botão direito > Inspecionar ou F12) e abrir o painel de rede.

Você pode listar todos os arquivos carregados por tipo; aqui, neste exemplo, cliquei apenas na lista de arquivos JS.

Agora que estamos nestas configurações, basta ativar as opções de grupo (Agrupar CSS e Agrupar JS) e clicar em salvar, tendo em mente que essas opções devem ser usadas com cautela e você terá que testar sua página porque isso pode causar conflitos.

Vamos levar a sério e otimizar o peso da fonte

O quê? Outra otimização? Sim! você poderá otimizar o peso da fonte e será tão fácil quanto habilitar a opção nas configurações, basta ir para WP Speed of Light > SpeedUp > Agrupar & Minificar > Agrupar fontes e Google Fonts opção.
A opção de agrupar fontes e fontes do Google permitirá que você as agrupe em um único arquivo para ser servido mais rapidamente, isso é bastante útil, pois a maioria dos temas e layouts do WordPress vêm com 2 ou fontes por padrão com todas as declinações (regular, negrito, itálico...)

Basta ativar essa opção, clicar em salvar e todas as fontes serão agrupadas.

Agora que ativamos todas as opções para minificar e agrupar os recursos, devemos ver uma diferença no tempo de carregamento do nosso site. Vamos verificar a velocidade.

Que diferença, de 2,8 para 0,56 segundos! Como dissemos no início desta postagem, podemos melhorar o tempo de carregamento ;)

Como usar a exclusão de minificação de arquivos

A minificação pode causar problemas no seu site, isso acontece principalmente quando você agrupa certos arquivos que contêm erros de sintaxe ou nomes de variáveis e classes semelhantes. É por isso que com a opção “exclusão de minificação de arquivo”, você poderá excluir arquivos do processo de minificação e agrupamento, vá para WP Speed of Light > Acelerar > Agrupar e Minificar, você poderá ver a opção Exclusão avançada de arquivos.

Para usar a exclusão avançada de arquivos, você precisará executar uma varredura, primeiro habilitar a opção e clicar em Executar Varredura.

  Para poder listar os scripts carregados no seu site, WP Speed of Light precisa escanear sua pasta para listá-los. Eles geralmente estão contidos na sua pasta /wp-content que agrupa todos os seus plugins e temas. Selecione essa pasta (pelo menos) e clique em “Escanear Agora”

Ela executará uma varredura, finalmente, clique em Visualizar Resultados quando a varredura for concluída.

Uma lista de arquivos classificados por tipo (Todos, JS, CSS, Fonte) deve ser exibida abaixo. Se você identificou um arquivo que causa problemas ao ativar o agrupamento e minificação de arquivos, você pode excluí-lo daqui usando um simples interruptor LIGAR/DESLIGAR.

Isso ajudará a excluir arquivos e, dessa forma, resolver facilmente qualquer problema que possa existir ao minimizar recursos… O processo de agrupamento e minificação ainda requer algum trabalho, especialmente em testes, mas definitivamente vale a pena, e você sempre poderá testar como funciona executando o teste de velocidade diretamente do WP Speed of Light.
 
Vá em frente e tente WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light