Você quer eliminar arquivos (CSS e JS) que bloqueiam o carregamento de páginas no WordPress? Se você estiver testando seu site no Google Insights PageSpeed, provavelmente verá uma sugestão para eliminar scripts que bloqueiam o carregamento de páginas. Neste tutorial, mostraremos como corrigir esses arquivos que bloqueiam o carregamento de suas páginas, para melhorar sua pontuação do Google PageSpeed.
O que está bloqueando o carregamento das páginas?
Cada site WordPress possui um tema e plug-ins que adicionam arquivos JavaScript e CSS no final e antes que a página seja visível no navegador. 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 precisará carregar scripts e CSS antes que o conteúdo da página seja carregado. Isso significa que os usuários em uma conexão mais lenta terão que esperar mais alguns milissegundos para visualizar a página.
Os proprietários de sites que tentam obter uma boa pontuação do Google PageSpeed precisam resolver esse problema.
1 - Como corrigir a renderização de página com a otimização automática
Este método é mais simples e recomendado para a maioria dos usuários.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in " Autoptimize ". Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Depois de ativar o plug-in, você deve visitar " Configurações> Otimização automática Para definir as configurações do plug-in.
Você pode começar marcando a caixa de opção JavaScript e CSS e depois clicar no botão "Salvar alterações".
Agora você pode testar seu site da Web usando a ferramenta PageSpeed. Se ainda houver scripts bloqueando a renderização da página, você precisará voltar para a página de configurações do plug-in e clicar no botão “Mostrar configurações avançadas” na parte superior.
Aqui você pode permitir que o plug-in inclua JS em linha e remova scripts que são excluídos por padrão, como “seal.js” ou “jquery.js”.
Em seguida, role para baixo até a opção CSS e permita que o plug-in combine todos os arquivos CSS.
Clique no botão “Salvar alterações e cache vazio” para salvar suas alterações e limpe o cache o plugin.
Quando terminar, vá em frente e verifique o seu site da Web novamente com a ferramenta PageSpeed.
Certifique-se de testar seu site com cuidado para ver se tudo está funcionando bem depois de otimizar seus JavaScripts ou arquivos CSS.
2 - Corrigir renderização de arquivo com o W3 Total Cache
Este método requer um pouco mais de trabalho e é recomendado para quem já possui o W3 Total Cache em seu site.
Primeiro você precisa instalar e ativar o plugin W3 Total Cache. Se precisar de ajuda, Veja o nosso guia completo W3 Total Cache.
Então você precisa visitar "Desempenho> Configurações gerais" e rolar para baixo até a seção "minificar".
Em primeiro lugar, você precisa marcar a caixa “Ativar” e, em seguida, selecionar “Manual” para a opção de modo de minificação.
Clique no botão Salve todas as configurações Para salvar suas configurações.
Então você precisa adicionar scripts e CSS que deseja encolher.
Você pode obter os URLs de todos os scripts e folhas de estilo que devem ser combinados de acordo com o Google PageSpeed Insights.
Sob as sugestões em que diz " Eliminar de bloqueio de processamento de JavaScript e CSS ", Clique em" Mostrar como resolver ". Ele mostrará a lista de scripts e folhas de estilo.
Mova o mouse sobre um script e ele mostrará o URL completo. Você pode selecionar esse URL e usar CTRL + C no teclado (Command + C no Mac) para copiar o URL.
Agora vá para o painel de administração do WordPress e vá para o " atuação > minifier ".
Primeiro você precisa adicionar os arquivos JavaScript que deseja compactar. Role para baixo até a seção JS e, em seguida, sob o conjunto "operações em zonas" do tipo embed para "não bloquear usando 'async'" para a seção .
Então você tem que clicar no botão Adicionar Script E comece a adicionar os URLs de script que você copiou da ferramenta Google PageSpeed.
Quando terminar, role para baixo até a seção CSS e clique no botão "Adicionar folha de estilo". Agora comece a adicionar os urls da folha de estilo que você copiou com a ferramenta Google PageSpeed.
Agora clique no botão Salvar configurações e limpar cache Para armazenar suas configurações.
Visite a ferramenta Google PageSpeed e teste seu site novamente.
Também teste seu site com cuidado para verificar se tudo está funcionando bem.
Isso é tudo para este tutorial, espero que ele permita que você melhore o desempenho do seu blog WordPress.
