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.

Usaremos um exemplo de site wordpress para esta postagem do blog e aprenderemos como fazer isso para que o processo de configuração de tudo seja mais fácil.

 

Como fazer uma minificação WordPress JS e CSS

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

Agora o que vamos fazer é um teste de velocidade da nossa página para ver as mudanças, para este exemplo estamos usando um site com woocommerce e alguns produtos então na primeira vez ele carregará 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 agrupamento e reduçã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).

 

minificar recursos

 

 

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

 

Próxima etapa, 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 que você:

  • Grupo JS: agrupar vários arquivos Javascript em um único arquivo minimizará o número de solicitações HTTP
  • Grupo 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 que são feitas ao servidor toda vez que selecionamos algo ou vamos para outra página do mesmo site, então se pudermos reduzir essas solicitações, o tempo de carregamento diminuiria.

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 .

 

lista-script-cromo

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

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

 

Vamos levar a 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 habilitar essa opção, clicar em salvar e todas as fontes serão agrupadas.

 

fonte de grupo

 


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.

 

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 arquivos

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 arquivos, você terá que executar uma verificação, primeiro habilite 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, por fim, clique em visualizar resultados quando a verificação for 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 .

 

arquivos de exclusão

 

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

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

Posts Relacionados

 

Comentários

Nenhum comentário feito ainda. Seja o primeiro a enviar um comentário
Já registrado? Entre aqui
Terça-feira, 17 de dezembro de 2024

Imagem Captcha