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 é ruim, mas poderia ser melhor. Vamos minificar o JS e o CSS e ver a diferença. Acesse WP Speed of light > Acelerar > Agrupar e Minificar. Você verá o menu com todas as opções de minificação. A versão gratuita do plugin inclui a opção de agrupar e minificar, mas a exclusão visual de arquivos só está disponível na versão PRO com complementos.

As opções do complemento PRO são: Excluir scripts embutidos (exclui scripts embutidos 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 (agrupa fontes locais e fontes do Google em um único arquivo para carregamento mais rápido) e exclusão avançada de arquivos.
 
Você tem a opção de minificar, como pode ver, JS, CSS e também o HTML. Basta ativar essas opções, clicar em salvar e todos os seus recursos serão minificados imediatamente. Pode haver alguns problemas, pois é uma configuração avançada, mas tudo pode ser resolvido com a exclusão de alguns códigos 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, permitiremos que o WordPress otimize CSS e JS simplesmente ativando as opções de agrupamento no painel de controle. Para isso, acesse WP Speed of Light > SpeedUp > Group & Minify. Você 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 e scripts você pode agrupar em seu site, basta abrir o console do seu 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ê? Outras otimizações? Sim! Você poderá otimizar a espessura da fonte de forma simples, basta ativar a opção nas configurações. Vá em WP Speed of Light > Acelerar > Agrupar e Minificar > Agrupar fontes e fontes do Google . A opção
Agrupar fontes e fontes do Google permite agrupá-las em um único arquivo para carregamento mais rápido. Isso é muito útil, pois a maioria dos temas e layouts do WordPress já vem com duas ou mais fontes padrão, com todas as variações (normal, 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, principalmente quando você agrupa arquivos que contêm erros de sintaxe ou variáveis ​​semelhantes, como nomes de classe. Por isso, com a opção "Exclusão de arquivos da minificação", você poderá excluir arquivos do processo de minificação e agrupamento. Para isso, acesse WP Speed of Light > Acelerar > Agrupar e Minificare você encontrará a 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. Geralmente, eles estão todos contidos na pasta /wp-content, que agrupa todos os seus plugins e o tema. 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 de arquivos e a minificação, você pode excluí-lo daqui usando um simples botão liga/desliga.

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