Você quer eliminar bloqueio de renderização de JavaScript e CSS no WordPress?
Se você testar seu site no Google PageSpeed insights, provavelmente verá uma sugestão para eliminar scripts de bloqueio de renderização JavaScript e CSS. No entanto, ele não fornece detalhes sobre como fazer isso no seu site WordPress.
Neste artigo, mostraremos como corrigir facilmente bloqueio de renderização de JavaScript e CSS no WordPress para melhorar sua pontuação do Google PageSpeed.
O que é bloqueio de renderização de JavaScript e CSS?
bloqueio de renderização de JavaScript e CSS são arquivos que impedem um site de exibir uma página da web antes de carregar esses arquivos.
Cada site WordPress tem um tema e plugins 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 terão que esperar mais alguns milissegundos para ver a página.
Esses scripts e folhas de estilo são chamados bloqueio de renderização de JavaScript e CSS.
Os proprietários de sites que estão tentando atingir a pontuação do Google PageSpeed de 100 precisarão corrigir esse problema para obter a pontuação perfeita.
O que é o 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 do Google para velocidade e oferece sugestões para melhorar o tempo de carregamento da página de seu site.
Ele mostra uma pontuação com base no número de regras que seu site passa. A maioria dos sites fica entre 50-70. No entanto, alguns proprietários de sites se sentem compelidos a atingir 100 (a maior pontuação que uma página pode obter).
Você realmente precisa da pontuação “100” perfeita 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 estritamente essas regras.
Lembre-se de que a velocidade é apenas uma das muitas métricas de SEO de sites que ajudam o Google a determinar como classificar seu site. A razão pela qual a velocidade é tão importante é porque ela melhora a experiência do usuário em 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.
Seu objetivo 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 e, se puder implementá-las facilmente sem prejudicar a experiência do usuário, isso é ótimo. Caso contrário, você deve se esforçar para fazer o máximo que puder e não se preocupar com o resto.
Dito isso, vamos dar 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 corrigirão o bloqueio de renderização de JavaScript e CSS no WordPress. Você pode escolher aquele que funciona melhor para o seu site.
1. Corrigir scripts de bloqueio de renderização e CSS com WP-Optimize
Para este método, usaremos o plugin WP-Optimize. É o melhor plugin de cache WordPress do mercado e permite que você melhore rapidamente o desempenho do seu site sem qualquer habilidade técnica ou configuração complicada.
Primeiro, você precisa instalar e ativar o plugin WP-Optimize. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin no WordPress.
WP-Optimize funciona fora da caixa e ativará o cache com as configurações ideais para o seu site.
Por padrão, ele não ativa as opções de otimização de JavaScript e CSS. Essas otimizações podem afetar potencialmente a aparência do seu site ou alguns recursos, e é por isso que o plugin permite que você habilite essas configurações opcionalmente.
Para fazer isso, você precisa visitar a página WP-Optimize » Minify. A partir daqui, role até a seção “Enable Minify” e ativa a opção Enable Minify:
Após a ativação, o painel deve ficar assim:
Após ativar este recurso o WP-Optimize irá salvar suas configurações automaticamente.
Depois disso, você também pode limpar o cache no WP-Optimize antes de testar seu site novamente com o Google Page Speed Insights.
Opcionalmente, você precisa visitar as outras guias dessa seção. Para verificar outras opções para melhoria de desempenho.
Em nosso site de teste o problema de bloqueio de renderização foi resolvido nas pontuações de dispositivos móveis e computadores.
2. Corrigir scripts de bloqueio de renderização e CSS com Autoptimize
Para este método, usaremos um plugin separado feito especificamente para melhorar a entrega dos arquivos CSS e JS do seu site. Embora este plugin faça o trabalho, ele não possui os outros recursos poderosos que o WP-Optimize possui.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Autoptimize. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin no WordPress .
Após a ativação, você precisa visitar a página Configurações » Autoptimize para definir as configurações do plugin.
Primeiro, você precisa marcar a caixa ao lado da opção “Otimizar código JavaScript?” no bloco Opções de JavaScript. Certifique-se de que a opção “Agregar arquivos JS?” está 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 “Agregar arquivos CSS?” esteja desmarcada.
Agora você pode clicar no botão “Salvar Mudanças e Esvaziar Cache” para armazenar suas configurações.
Vá em frente e teste seu site com a ferramenta Page Speed 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ê precisará voltar à página de configurações do plugin e revisar as opções nas opções de JavaScript e CSS.
Por exemplo, você pode permitir que o plugin inclua JS embutido e remova scripts que são excluídos por padrão, como seal.js ou jquery.js.
Clique no botão “Salvar alterações e esvaziar cache” para salvar suas alterações e esvaziar o cache do plugin.
Quando terminar, vá em frente e verifique seu site novamente com a ferramenta Page Speed.
Como funciona?
A otimização automática agrega todos os JavaScript e CSS enfileirados. Depois disso, ele cria arquivos CSS e JavaScripts minimizados e fornece cópias em cache para o 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.
Solução de problemas
Dependendo de como os plugins e seu tema WordPress usam JavaScript e CSS, pode ser bastante desafiador corrigir completamente todos os problemas de bloqueio de renderização de JavaScript e CSS.
Embora as ferramentas acima possam ajudar, seus plugins podem precisar de certos scripts em um nível de prioridade diferente para funcionar corretamente. Nesse caso, as soluções acima podem interromper a funcionalidade de tais plugins ou eles podem se comportar de maneira inesperada.
O Google ainda pode mostrar alguns problemas, como a otimização da entrega de CSS para conteúdo acima da dobra. O WP-Optimize permite que você conserte isso adicionando manualmente o CSS crítico necessário para exibir a área da dobra acima do seu tema.
No entanto, pode ser muito difícil descobrir qual código CSS você precisará para exibir o conteúdo acima da dobra.
Esperamos que este artigo tenha ajudado você a aprender como corrigir bloqueio de renderização de JavaScript e CSS no WordPress. Você também pode querer ver nosso guia definitivo sobre as melhores empresas de hospedagem WordPress.
