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:
- Visite a página e cole o URL do seu site no campo "Inserir um URL da página da Web".
- 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.
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.
Tenha 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:
- Vá para Desempenho -> Configurações Gerais .
- Localize o cabeçalho Minify na página.Então, você verá algumas opções sob este título.
- Marque a caixa Ativar para Minimizar.Em seguida, para a opção Minimizar Modo , selecione Manual.
- Pressione Salvar todas as configurações .
- Baixe todos os scripts JavaScript e CSS que bloqueiam a renderização, que você pode encontrar através do Google PageSpeed Insights.
- Depois de encontrar o causador de problemas, volte para Desempenho -> Minimizar no painel do WordPress.
- 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 .
- 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.
- 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.
- 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:
- Vá para Configurações -> Otimizar automaticamente.
- Marque as caixas para Otimizar o código JavaScript? "E otimizar o código CSS?
- Pressione o botão Save Changes and Clear Cache (Salvar alterações e limpar cache ) .
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:
- Volte para Configurações -> Otimizar automaticamente.
- Pressione o botão Mostrar configurações avançadas .
- Em seguida, marque as opções para Também agregar JS embutido e Também agregar CSS embutido.
- 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:
- Vá para a seção Speed Booster Pack e acesse a guia Avançado .
- No menu Otimização JavaScript , habilite Mover Script para Rodapé e Reenviar Análise de Arquivos JavaScript.
- Role para baixo até o menu Otimização CSS para definir a otimização do bloco de renderização CSS.
- 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.
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!