Como excluir JavaScript e CSS que bloqueiam a renderização no WordPress

Como excluir JavaScript e CSS que bloqueiam a renderização no WordPress

Ter um site que carrega rápido é crucial se você quiser se classificar no topo das páginas de resultados de mecanismos de pesquisa (SERPs).É por isso que o PageSpeed Insights do Google está lá para ajudá-lo a otimizar a velocidade de carregamento do seu site.Se você receber a ferramenta "Eliminar a renderização de bloqueio de JavaScript e CSS acima da dobra" ao usar a ferramenta, não se preocupe.Neste artigo, mostraremos como resolver o problema.

Conheça "Excluir JavaScript e CSS que bloqueiam a renderização em conteúdo acima da dobra" Aviso

Se você seguir as regras de velocidade de página do Google, eliminar JavaScript e CSS que bloqueiam a renderização é uma delas.Qualquer erro nisso resultará em uma velocidade de carga de página mais lenta.Mas como javaScript e CSS em sua página HTML podem atrasar seu site?

Bem, toda vez que você instala um novo tema ou plugin, eles adicionam código JavaScript e CSS à parte frontal.Como resultado, os navegadores podem demorar mais para carregar a página.

Acima da dobra (ATF) é a parte da sua página web que é visível na primeira vez que a página é carregada.Qualquer parte da página que você tem que rolar para baixo para alcançar não é ATF.

Portanto, se o código JavaScript e CSS irrelevante aparecer quando os visitantes carregarem seu site, você poderá receber um alerta para reduzir o número de JavaScript e CSS que bloqueiam a renderização em recursos de conteúdo acima do fold.

Saiba mais sobre a renderização de bloqueio JavaScript e CSS usando o Google Page Speed Insights

O primeiro passo para corrigir o congelamento de renderização é testar a velocidade do seu site usando o Google PageSpeed Insights.Siga estas etapas para fazer isso:

  1. Visite a página e cole o URL do seu site no campo "Inserir um URL da página da Web".
  2. Clique em Analisar para obter o relatório.

    A maioria dos sites tem uma pontuação entre 50 e 70; isso deve servir de referência para sua pontuação.O Google também listará dicas para melhorar o desempenho do seu site.

    Marque informações sobre a velocidade da página do Google do seu site

Se você também encontrar a sugestão de excluir JavaScript e CSS que bloqueiam a renderização em conteúdo acima do fold, você precisará corrigir o problema.
exclui javascript e css que bloqueiam a renderização no aviso de conteúdo da dobra acimaTenha em mente que você não deve forçar seu site a obter uma pontuação perfeita de 100. Basta fazer o seu melhor para obter uma boa pontuação sem sacrificar a experiência do usuário.

Se houver scripts no site do WordPress essenciais para um UX robusto, você não deve removê-los apenas para obter uma pontuação ligeiramente maior no PageSpeed Insights.

As regras sobre as quais o Google classifica seus sites são apenas diretrizes e devem ser tomadas como tal.

Corrigir erro de bloqueio "Delete JavaScript e CSS" no conteúdo acima do fold"

Com o WordPress, reduzir os recursos JavaScript e CSS que bloqueiam a renderização no site do WordPress é simples.Você pode usar os três plugins que listamos abaixo:

Cache total W3

Um dos nossos favoritos é o plugin W3 Total Cache.Uma vez instalado e ativado, siga estas etapas no painel de administração do WordPress:

  1. Vá para Desempenho -> Configurações Gerais .
  2. Localize o cabeçalho Minify na página.Então, você verá algumas opções sob este título.
  3. Marque a caixa Ativar para Minimizar.Em seguida, para a opção Minimizar Modo , selecione Manual.
  4. Pressione Salvar todas as configurações .
    minimizar os recursos do script css e js com o plugin de cache total w3
  5. Baixe todos os scripts JavaScript e CSS que bloqueiam a renderização, que você pode encontrar através do Google PageSpeed Insights.
  6. Depois de encontrar o causador de problemas, volte para Desempenho -> Minimizar no painel do WordPress.
  7. Encontre a seção JS.Na seção Operações de Área, selecione o tipo de incorporação sem bloqueio usando "differ" para a tag <head> do éforo B .
  8. Para gerenciar arquivos JS, escolha o tema ativo e clique no botão Adicionar script.Copie e cole URLs JavaScript do Google Page Speed Insights nos campos fornecidos, conforme mostrado abaixo.
    Excluir os recursos JS bloqueador de renderização com plugin W3 Total Cache
  9. Role para baixo e localize a seção CSS.Para gerenciar arquivos CSS, escolha o tema ativo e clique em Adicionar uma folha de estilos.Semelhante à etapa anterior, copie os URLs das folhas de estilo CSS do PageSpeed Insights e cole-os nos campos necessários.
    Exclua os recursos jss que bloqueiam a renderização com o plugin W3 Total Cache
  10. Por fim, clique no botão Salvar configurações e excluir cache .

Propriedade de autoptimize

Alternativamente, você pode usar o plugin Autoptimize para resolver a renderização de bloqueio de erros javascript e css.Execute essas etapas no painel após instalar e ativar o plug-in:

  1. Vá para Configurações -> Otimizar automaticamente.
  2. Marque as caixas para Otimizar o código JavaScript? "E otimizar o código CSS?
  3. Pressione o botão Save Changes and Clear Cache (Salvar alterações e limpar cache ) .
    Otimize CSS e JavaScript com o plugin de autoptimize

Na maioria dos casos, isso é suficiente para corrigir o alerta.No entanto, o resultado pode variar dependendo do tema e dos plug-ins ativos.

Para ter certeza de que seu problema foi corrigido, execute seu site novamente através do PageSpeed Insights.Se você tiver algum bloqueio de recursos JS e CSS restantes, traga otimização ainda mais seguindo estas etapas:

  1. Volte para Configurações -> Otimizar automaticamente.
  2. Pressione o botão Mostrar configurações avançadas .
  3. Em seguida, marque as opções para Também agregar JS embutido e Também agregar CSS embutido.
    configuração avançada para otimizar css e js, agregando também CSS e JS on-line
  4. Guarde suas mudanças.

Pacote de reforço de velocidade

Outro plugin popular que você pode achar útil para corrigir erros de bloqueio de renderização javascript e css para o seu site WordPress é o Speed Booster Pack.Para fazer isso, siga estes passos na sua área de administração wp:

  1. Vá para a seção Speed Booster Pack e acesse a guia Avançado .
  2. No menu Otimização JavaScript , habilite Mover Script para Rodapé e Reenviar Análise de Arquivos JavaScript.
    Habilite a navegação de script no rodapé e o adiamento da análise de arquivos JavaScript na seção De otimização JavaScript para corrigir a exclusão dos blocos de renderização javascript e CSS no erro de dobra acima
  3. Role para baixo até o menu Otimização CSS para definir a otimização do bloco de renderização CSS.
  4. Você encontrará configurações adicionais para alinhar todos os CSS, minimizar todos (anteriormente) CSS incorporados e mover todos os CSS embutidos no rodapé.Experimente essas opções para encontrar uma solução adequada.
    Experimente as otimizações de CSS para encontrar a solução certa

    Simplesmente ativar tudo isso carregará seu site mais rapidamente, mas também poderá introduzir o artefato indesejado de conteúdo não esticado (FOUC).Isso acontece quando o navegador carrega a página da Web sem esperar que a folha de estilo seja carregada, causando um flash de página momentânea não editada.

Depois de tentar os métodos acima, volte para o PageSpeed Insights do Google para garantir que o bloqueio de renderização não seja mais um problema.

Conclusão

A velocidade do site é um dos fatores mais importantes na atração e retenção de visitantes.Isso ocorre porque os mecanismos de busca levam em conta a velocidade do site ao classificar os resultados.

O PageSpeed Insights do Google pontua os sites com base na velocidade de carregamento.Se você está recebendo a infame renderização de bloqueio de JavaScript e CSS Eliminar em sugestões acima da dobra ao analisar o desempenho do seu site WordPress, basta corrigir o problema com plugins.

Esperamos que este tutorial seja útil para você.Sinta-se à vontade para comentar abaixo se você tiver alguma dúvida.Boa sorte!

Open

info.ibdi.it@gmail.com

Close