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 upload do seu site.Se você receber a ferramenta " Delete JavaScript e CSS que bloqueia a renderização em conteúdo acima do fold " enquanto usa 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ê olhar para as regras de velocidade de página do Google, excluir 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 bloqueio 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 a URL do seu site no campo " Enter the URL of a web page ".
  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 administrador WordPress:

  1. Vá para Configurações Gerais de desempenho –> .
  2. Encontre o cabeçalho Minify na página.Então, você verá algumas opções sob este título.
  3. Verifique a caixa Habilitar para Minify.Em seguida, para a opção Modo Minimizar, 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 a plantaina do piso, retorne ao Desempenho -> Minimize no painel WordPress.
  7. Encontre a seção JS.Na seção Operações em Regiões, selecione o tipo de incorporação sem bloqueio usando "difere" para a tag Efore B <head>.</head>
  8. Para o gerenciamento de 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 encontre a seção CSS.Para o gerenciamento de arquivos CSS, escolha o tema ativo e clique em Adicionar uma folha de estilo .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 exclua cache .

Propriedade de autoptimize

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

  1. Vá para Configurações -> automaticamente.
  2. Verifique as caixas para otimizar o código JavaScript?"E otimizar o código CSS?
  3. Pressione o botão Salvar alterações e limpar o botão 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. Retorne às configurações -> otimizar automaticamente .
  2. Pressione o botão Mostrar Configurações Avançadas.
  3. Em seguida, confira as opções para Também agregar JS online e também agregar CSS online.
    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 javascript e renderizar o bloqueio 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 vá para a guia Avançado.
  2. No menu De otimização JavaScript, habilite mover script para footer e adiar a 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 até o menu de otimização do CSS para definir a otimização do bloco de renderização de 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 habilitar tudo isso carregará seu site mais rapidamente, mas também pode introduzir o artefato indesejado de conteúdo não passado (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 sites com base na velocidade de upload.Se você estiver recebendo o infame Delete JavaScript e CSS que bloqueiam a renderização em sugestões acima do fold ao analisar o desempenho do site do 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!