Como corrigir JavaScript e CSS de bloqueio de renderização no WordPress

Encontrar problemas com JavaScript e CSS de bloqueio de renderização em seu site WordPress pode ser frustrante. Esses problemas podem tornar seu site mais lento e afetar seu desempenho. Um site lento pode afastar os visitantes e afetar as classificações dos mecanismos de pesquisa.

Ao verificar seu site no Google PageSpeed Insights, você poderá ver uma sugestão para eliminar esses recursos de bloqueio de renderização. Infelizmente, a ferramenta não fornece instruções claras sobre como corrigir esse problema no WordPress.

A boa notícia é que existem ferramentas que podem tornar a correção de JavaScript e CSS que bloqueiam a renderização menos complicada do que parece. Você pode usar um plug-in de cache, como o WP Rocket ou o Autoptimize, para otimizar seu site, reduzindo e adiando scripts, o que reduz o tempo de carregamento e melhora as pontuações do PageSpeed.

Neste artigo, vamos orientá-lo nas etapas para resolver esses problemas em seu site WordPress.

O que é JavaScript e CSS de bloqueio de renderização?

JavaScript e CSS de bloqueio de renderização são arquivos que impedem que um site exiba uma página da Web antes de carregar esses arquivos.

Todo site WordPress tem um tema e plug-ins que adicionam arquivos JavaScript e CSS ao front-end do seu site.

Esses scripts podem aumentar o tempo de carregamento da página do seu site e também podem bloquear a renderização da página.

O navegador do usuário terá que carregar esses scripts e CSS antes de carregar o restante do HTML na página. Isso significa que os usuários em uma conexão mais lenta precisam esperar alguns milissegundos a mais para ver a página.

Esses scripts e folhas de estilo são chamados de JavaScript e CSS de bloqueio de renderização.

Os proprietários desites WordPress que estão tentando obter uma pontuação de 100 no Google PageSpeed precisarão corrigir esse problema para obter essa pontuação perfeita.

O que é um Google PageSpeed Score?

O Google PageSpeed Insights é uma ferramenta de teste de velocidade de sites criada pelo Google para ajudar os proprietários de sites a otimizar e testar seus sites. Essa ferramenta testa seu site de acordo com as diretrizes de velocidade do Google e oferece sugestões para melhorar o tempo de carregamento da página.

Ele mostra uma pontuação com base no número de auditorias em que seu site foi aprovado.

A maioria dos sites obtém algo entre 50 e 70. Entretanto, alguns proprietários de sites se sentem compelidos a atingir 100 (a pontuação mais alta que uma página pode obter).

Você realmente precisa da pontuação perfeita de “100” do Google PageSpeed?

O objetivo dos insights do Google PageSpeed é fornecer diretrizes para melhorar a velocidade e o desempenho do seu site. Dito isso, você não é obrigado a seguir essas regras rigorosamente.

Lembre-se de que a velocidade é apenas uma das muitas métricas de otimização de mecanismos de busca (SEO) de sites que ajudam o Google a determinar como classificar seu site. A velocidade é muito importante porque melhora a experiência do usuário no seu site.

Uma melhor experiência do usuário requer muito mais do que apenas velocidade. Você também precisa oferecer informações úteis, uma interface de usuário melhor e conteúdo envolvente com texto, imagens e vídeos.

Então, sua meta deve ser criar um site rápido que ofereça uma ótima experiência ao usuário.

Recomendamos que você use as regras do Google PageSpeed como sugestões. Se for possível implementá-las facilmente sem prejudicar a experiência do usuário, ótimo. Caso contrário, tente fazer o máximo que puder e não se preocupe com o resto.

Com isso em mente, daremos uma olhada no que você pode fazer para corrigir o bloqueio de renderização de JavaScript e CSS no WordPress. Abordaremos dois métodos que eliminarão os recursos de bloqueio de renderização no WordPress. Você pode escolher o que funciona melhor para seu site:

Vamos nos aprofundar e fazer com que seu site funcione sem problemas!

Método 1: Corrigir scripts e CSS de bloqueio de renderização com o WP Rocket

Para esse método, usaremos o plug-in WP Rocket.

Ele é o melhor plug-in de otimização e armazenamento em cache para WordPress do mercado e permite que você melhore rapidamente o desempenho do seu site sem precisar de habilidades técnicas ou de uma configuração complicada.

Primeiro, você precisa instalar e ativar o plug-in WP Rocket. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

O WP Rocket funciona imediatamente: ele ativará o armazenamento em cache com as configurações ideais para seu site. Você pode saber mais sobre ele em nosso guia completo sobre como instalar e configurar corretamente o WP Rocket no WordPress.

Por padrão, ele não ativa as opções de otimização de JavaScript e CSS. Essas otimizações podem afetar a aparência do seu site ou alguns recursos, e é por isso que o plug-in permite que você ative essas configurações opcionalmente.

Para fazer isso, você precisa visitar a página Settings ” WP Rocket e mudar para a guia “File Optimization” (Otimização de arquivos).

A partir daí, basta rolar até a seção “CSS Files” (Arquivos CSS) e marcar as caixas ao lado de “Minify CSS” (Reduzir CSS), “Combine CSS Files” (Combinar arquivos CSS) e “Optimize CSS Delivery” (Otimizar entrega de CSS).

Para a configuração “Optimize CSS Delivery”, a WP Rocket recomenda escolher o método“Remove Unused CSS“.

Além de oferecer o melhor desempenho, ele pode ajudar a reduzir o tamanho da página e as solicitações HTTP.

Em seguida, role até a seção “Arquivos JavaScript”.

Aqui, você pode verificar todas as opções para melhorar ao máximo o desempenho.

Você pode reduzir e combinar arquivos JavaScript como fez com o CSS.

Você também pode impedir que o WordPress carregue o arquivo jQuery Migrate. Esse script é carregado para fornecer compatibilidade para plug-ins e temas que usam versões antigas do jQuery.

A maioria dos sites não precisa desse arquivo, mas ainda assim você deve verificar seu site para garantir que a remoção dele não afete o tema ou os plug-ins.

Em seguida, role a tela um pouco mais para baixo e marque as caixas ao lado das opções “Carregar JavaScript diferido” e “Modo de segurança para jQuery”.

Essas opções atrasam o carregamento de JavaScripts não essenciais, e o modo de segurança do jQuery permite que você carregue o jQuery para temas que possam usá-lo em linha. Você pode deixar essa opção desmarcada se tiver certeza de que seu tema não usa jQuery embutido em nenhum lugar.

Não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

Depois disso, talvez você também queira limpar o cache no WP Rocket antes de testar seu site novamente com o Google PageSpeed Insights.

Em nosso site de teste, conseguimos atingir uma pontuação de 100% em dispositivos desktop, e o problema de bloqueio de renderização foi resolvido nas pontuações de dispositivos móveis e desktop.

Método 2: Corrigir scripts e CSS que bloqueiam a renderização com o Autoptimize

Para esse método, usaremos um plug-in separado, criado especificamente para melhorar a entrega dos arquivos CSS e JS do seu site. Embora esse plug-in faça o trabalho, ele não tem os outros recursos avançados que o WP Rocket tem.

A primeira coisa que você precisa fazer é instalar e ativar o Autoptimize, um plug-in gratuito para acelerar o desempenho do site. Se precisar de ajuda, fique à vontade para consultar nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa ir para Settings ” Autoptimize para definir as configurações do plug-in.

Primeiro, vamos marcar a caixa ao lado de “Otimizar código JavaScript” no bloco “Opções de JavaScript”. Aqui, você precisará certificar-se de que a opção “Aggregate JS-files” esteja desmarcada.

Em seguida, role para baixo até a caixa “CSS Options” (Opções de CSS) e marque a opção “Optimize CSS Code” (Otimizar código CSS).

Basta certificar-se de que a opção “Aggregate CSS-files” (Agregar arquivos CSS) esteja desmarcada.

Agora você pode clicar no botão “Save Changes and Empty Cache” para armazenar suas configurações.

Vá em frente e teste seu site com a ferramenta PageSpeed Insights. Com essas configurações básicas, corrigimos com êxito o problema de bloqueio de renderização em nosso site de demonstração.

Se ainda houver scripts de bloqueio de renderização, você poderá voltar à página de configurações do plug-in e revisar as configurações nas opções JavaScript e CSS.

Por exemplo, você pode permitir que o plug-in inclua JS em linha e remova os scripts excluídos por padrão, como seal.js ou jquery.js. Em seguida, basta clicar no botão “Save changes and Empty Cache” para salvar suas alterações e esvaziar o cache do plug-in.

Quando terminar, verifique seu site novamente com a ferramenta PageSpeed Insights.

Como funciona o Autoptimize?

O Autoptimize agrega todos os JavaScript e CSS enfileirados. Depois disso, ele cria arquivos CSS e JavaScript minificados e fornece cópias em cache para seu site como assíncrono ou diferido.

Isso permite que você corrija o problema de scripts e estilos de bloqueio de renderização. No entanto, lembre-se de que isso também pode afetar o desempenho ou a aparência do seu site.

O que fazer se o JavaScript e o CSS que bloqueiam a renderização ainda existirem

Dependendo de como os plug-ins e o tema do WordPress usam JavaScript e CSS, pode ser difícil corrigir completamente todos os problemas de JavaScript e CSS que bloqueiam a renderização.

Embora as ferramentas acima possam ajudar, seus plug-ins podem precisar de determinados scripts para funcionar corretamente em um nível de prioridade diferente. Nesse caso, as soluções acima podem interromper a funcionalidade de tais plug-ins ou fazer com que eles se comportem de forma inesperada.

Em vez de eliminar completamente os problemas de bloqueio de renderização, recomendamos adotar abordagens alternativas para acelerar seu site. Por exemplo, você pode usar um serviço de CDN para servir seus arquivos estáticos de JavaScript e CSS e reduzir o tempo de carregamento.

Você pode ler nosso guia definitivo para aumentar a velocidade e o desempenho do WordPress para obter mais informações.

Esperamos que este artigo tenha ajudado você a aprender como corrigir JavaScript e CSS que bloqueiam a renderização no WordPress. Talvez você também queira ver nosso artigo sobre como corrigir facilmente o erro “This Site Can’t Be Reached” e nossa lista de especialistas dos erros mais comuns do WordPress e como corrigi-los.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.