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

Você está tentando eliminar o JavaScript e o CSS que bloqueiam a renderização no WordPress?

Se você testar seu site no Google PageSpeed Insights, provavelmente verá uma sugestão para eliminar scripts e CSS que bloqueiam a renderização. No entanto, ele não fornece nenhum detalhe sobre como fazer isso em seu site WordPress.

Neste artigo, mostraremos como corrigir facilmente o JavaScript e o CSS que bloqueiam a renderização no WordPress para melhorar sua pontuação no Google PageSpeed.

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 com uma conexão mais lenta terão que 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 uma pontuação 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. 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.

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, isso é ótimo. Caso contrário, tente fazer o máximo que puder e não se preocupe com o resto.

Dito isso, vamos dar uma olhada no que você pode fazer para corrigir JavaScript e CSS que bloqueiam a renderização 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:

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

Para esse método, usaremos o plugin WP Rocket. Ele é o melhor plugin de otimização e armazenamento em cache para WordPress do mercado, que permite melhorar rapidamente o desempenho do seu site sem nenhuma habilidade técnica ou 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 e 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, em seguida, alternar para a guia “File Optimization” (Otimização de arquivos).

A partir daí, role até a seção Arquivos CSS e marque as caixas ao lado de “Minify CSS”, “Combine CSS Files” e “Optimize CSS Delivery”.

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. A partir daqui, você pode verificar todas as opções para obter o máximo de aprimoramento do desempenho.

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

Você também pode impedir o WordPress de carregar o arquivo jQuery Migrate. É um script que o WordPress carrega 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 para baixo um pouco mais 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 plugin 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. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

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

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

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

Certifique-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. Em nosso site de demonstração, conseguimos corrigir o problema de bloqueio de renderização com essas configurações básicas.

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 em um nível de prioridade diferente para funcionar corretamente. Nesse caso, as soluções acima podem interromper a funcionalidade desses plug-ins ou eles podem se comportar de forma inesperada.

Em vez de tentar 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 o WPBeginner aumenta a velocidade de carregamento da página com 6 dicas e nossa comparação das melhores empresas de hospedagem gerenciada do WordPress.

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.