Ir para o conteúdo principal
6 minutos de leitura (1143 palavras)

Como agrupar e reduzir recursos no WordPress

arquivo-grupo-e-minify

Ter o melhor desempenho possível é o sonho de todos que gerenciam um site, agrupam e minimizam recursos no WordPress. É uma das melhores coisas que podemos fazer por isso, mas pode ser realmente difícil. O grupo de todos os seus recursos (principalmente arquivos css e js) pode expor seu site se você não for um desenvolvedor, pois isso gera conflito.

WP Speed of Light é a melhor solução para realizar seu site wordpress pois possui várias opções para fazer seu site carregar rápido com um painel realmente amigável e sim, uma dessas opções é agrupar e minimizar recursos. A inclusão / exclusão de um único arquivo do grupo e do processo de minificação é a chave para uma otimização personalizada sem conflitos.

Vamos usar um site wordpress de exemplo para esta postagem no blog e aprenderemos como fazer isso para que o processo para configurar tudo seja mais fácil.

 

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

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

Agora, o que faremos é um teste de velocidade em nossa página para ver as alterações. Neste exemplo, estamos usando um site com woocommerce e alguns produtos para que, na primeira vez, carregue um pouco devagar.

 

antes do teste

 

Sim, 2,79 segundos para carregar a página, nada mal mas poderia ser melhor, apenas vamos minificar o js e CSS e ver a diferença, vá em WP Speed of light > SpeedUp > Group & Minify , você vai conseguir para ver o menu com todas as opções para minificar. A versão gratuita do plugin inclui a opção group e minify, mas a exclusão visual do arquivo está disponível apenas na versão PRO Addon.

 

painel de grupo e minificação

 

As opções do complemento PRO são: Excluir script embutido (excluir script embutido da minificação), mover scripts para o rodapé (permite que você agilize seu site movendo todos os scripts minimizados para o rodapé), Fonte de grupo e Google Fonts (fontes locais de grupo e fontes do Google em um único arquivo para ser servido mais rapidamente) e Exclusão de arquivo avançada.
 
Você tem a opção de minimizar, como você pode ver, JS, CSS e também o HTML agora é só ativar essas opções, clicar em salvar e todos os seus recursos serão minimizados imediatamente, pode haver problemas, pois é uma configuração avançada, mas tudo pode ser corrigido com a exclusão de alguns códigos e arquivos (com o addon pro).

 

minify-resources

 

 

Agora todo o trabalho de desenvolvedor que pode levar horas é feito em apenas alguns segundos.

 

Próximo passo, o WordPress otimiza CSS e JS

Com este plugin vamos deixar que o wordpress otimize CSS e js apenas habilitando as opções de grupo no painel, vá para WP Speed of Light > SpeedUp > Group & Minify , você poderá ver um painel com as opções para agrupar CSS e js.

Essas opções permitem:

  • Grupo JS: O agrupamento de 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. Se pudermos reduzir essas solicitações, o tempo de carregamento diminuirá.

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

 

list-script-chrome

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

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

 

Vamos falar sério e otimizar o peso da fonte

Que? 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 acessar a opção WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts .
A opção de fontes de grupo 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 vem com 2 ou fontes por padrão com todas as declinações (regular, negrito, itálico ...)

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

 

fonte do grupo

 


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

 

teste depois

 

Que diferença, de 2,8 a 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 arquivo

A minificação pode causar problemas em seu site, acontece principalmente quando você agrupa determinados arquivos que contêm erro de sintaxe ou variável similar, nome de classe. É por isso que com a opção “exclusão de minificação de arquivo”, você poderá excluir arquivos do processo de minificação e grupo, vá para WP Speed of Light > SpeedUp > Group & Minify , você poderá ver a Advanced file .

Para usar a exclusão avançada de arquivo, você precisará executar uma verificação primeiro, ative a opção e clique em Executar verificação.

 

alerta de conflito de recurso de grupo


 Para poder listar o script carregado em seu site, o WP Speed of Light precisa verificar sua pasta para listá-los. Eles geralmente estão todos contidos em sua pasta /wp-content que agrupa todos os seus plugins e temas. Selecione essa pasta (pelo menos) e clique em “Scan Now”

 

selecione pastas para digitalizar

 

Ele executará uma verificação e, finalmente, clique nos resultados da exibição quando a verificação estiver concluída.

 

digitalizado

 

Uma lista de arquivos classificados por tipo (All, JS, CSS, Font) deve ser exibida abaixo. Se você identificou um arquivo que causa problemas, ao ativar o grupo de arquivos e minificação, você pode excluí-lo daqui usando um simples alternador ON/OFF .

 

excluir arquivos

 

Isto irá ajudá-lo a excluir arquivos e, desta forma, resolver facilmente qualquer problema que possa existir ao minificar recursos… O processo de agrupar e minificar ainda requer algum trabalho, especialmente em testes, mas definitivamente vale a pena o esforço, e você o fará. você sempre poderá testar como funciona executando o teste de velocidade diretamente do WP Speed of Light .
 
Vá em frente e experimente WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light

5
Mantenha-se informado

Quando você se inscrever no blog, enviaremos um e-mail quando houver novas atualizações no site para que você não as perca.

Posts Relacionados

 

Comentários

Ainda não foram feitos comentários. Seja o primeiro a enviar um comentário
Já registrado? Entre aqui
Quinta-feira, 25 de abril de 2024

Imagem Captcha