Como agrupar e reduzir recursos no WordPress

Ter o melhor desempenho possível é o sonho de todos que administram um site. Agrupar e minimizar 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 pode gerar conflitos.

WP Speed of Light é a melhor solução para otimizar o desempenho do seu site WordPress, pois oferece diversas opções para acelerar o carregamento do seu site, com um painel de controle muito intuitivo. Uma dessas opções é o agrupamento e a minificação de recursos. A possibilidade de incluir ou excluir arquivos individualmente durante o processo de agrupamento e minificação é fundamental para uma otimização personalizada, sem conflitos.

Neste post do blog, usaremos um site WordPress de exemplo e aprenderemos como configurá-lo para que o processo seja mais fácil.

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

Vamos aprender como fazer a minificação de JS e CSS no WordPress, mas primeiro precisamos entender o que significa minificação: "Minificação refere-se ao processo de remoção de dados desnecessários ou redundantes sem afetar a forma como o recurso é processado pelo navegador - por exemplo, comentários e formatação de código, remoção de código não utilizado, uso de nomes de variáveis ​​e funções mais curtos, e assim por diante".

Agora, vamos realizar um teste de velocidade na nossa página para verificar as alterações. Neste exemplo, estamos usando um site com WooCommerce e alguns produtos, então, na primeira vez, o carregamento será um pouco lento.

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 de desenvolvimento que poderia levar horas é feito em apenas alguns segundos.

O próximo passo é otimizar o CSS e o 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 requisições HTTP
• Agrupar CSS: Agrupar vários arquivos CSS em um único arquivo minimizará o número de solicitações HTTP.

Requisições HTTP: são solicitações feitas ao servidor sempre que selecionamos algo ou acessamos outra página no mesmo site; portanto, se pudermos reduzir essas requisiçõ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 .

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

Agora que estamos nessas configurações, basta ativar as opções de grupo (CSS de grupo e JS de grupo) e clicar em salvar. Lembre-se de que essas opções devem ser usadas com cautela e você precisará testar sua página, pois podem causar conflitos.

Vamos falar sério e otimizar a espessura 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 minimizar e agrupar os recursos, devemos notar 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 deste post, 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 Minificar e você encontrará a Exclusão avançada de arquivos" .

Para usar a exclusão avançada de arquivos, primeiro você precisa executar uma verificação, ativar a opção e clicar em "Executar verificação".

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

O programa executará uma verificação e, por fim, clique em "Ver resultados" quando a verificação 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