Como eliminar recursos de bloqueio de renderização do seu site WordPress

Você já terminou de criar um site WordPress, adorou tudo sobre ele e imediatamente começou a odiá-lo depois de perceber que demora uma eternidade para carregar? Dominar a eliminação de recursos de bloqueio de renderização ajudará a diagnosticar esse problema. Mas como?

As velocidades de carregamento lentas não são apenas um incômodo para você e seus visitantes, mas também podem custar-lhe significativamente quando se trata de SEO. Desde 2010, os algoritmos do Google contabilizam a velocidade de carregamento nas decisões de classificação, portanto, as páginas lentas aparecem mais abaixo nas páginas de resultados.

Você pode estar familiarizado com os culpados comuns do baixo desempenho da página – conteúdo excessivo, arquivos de imagem descompactados, hospedagem insuficiente e falta de cache, para citar alguns. Mas há outro perpetrador muitas vezes esquecido em jogo: recursos de bloqueio de renderização.

Não me interpretem mal — CSS e JavaScript são ótimos. Sem CSS, os sites seriam paredes de texto simples. Sem o Ja=ooovaScript, não poderíamos adicionar elementos dinâmicos, interativos e envolventes aos nossos sites. Mas, se executados na hora errada, CSS e JavaScript podem prejudicar o desempenho do seu site.

Eis o motivo: quando um navegador da Web carrega uma página da Web pela primeira vez, ele analisa todo o HTML da página antes de exibi-lo na tela para um visitante. Quando o navegador encontra um link para um arquivo CSS, um arquivo JavaScript ou um script embutido (ou seja, código JavaScript no próprio documento HTML), ele pausa a análise do HTML para buscar e executar o código, o que torna tudo mais lento.

Se você otimizou o desempenho da sua página no WordPress e ainda está com problemas, os recursos de bloqueio de renderização podem ser os culpados. Às vezes, esse código é importante para ser executado no primeiro carregamento, mas na maioria das vezes ele pode ser removido ou enviado até o final da fila.

Neste post, mostraremos como eliminar esse código irritante do seu site WordPress e dar um impulso ao seu desempenho.

Se preferir acompanhar com um vídeo, confira este passo a passo criado por WP Casts:

1. Identifique os recursos de bloqueio de renderização.

Antes de fazer qualquer alteração, primeiro você precisa localizar os recursos de bloqueio de renderização. A melhor maneira de fazer isso é com um teste de velocidade online gratuito, como a ferramenta PageSpeed ​​Insights do Google. Cole a URL do seu site e clique Analisar.

Quando a verificação é concluída, o Google atribui ao seu site uma pontuação de velocidade agregada, de 0 (mais lento) a 100 (mais rápido). Uma pontuação na faixa de 50 a 80 é média, portanto, você deve ficar na parte superior dessa faixa ou acima dela.

Para identificar arquivos de bloqueio de renderização que estão deixando sua página lenta, role para baixo até oportunidadesem seguida, abra o Elimine recursos de bloqueio de renderização acordeão.

Fonte da imagem

Você verá uma lista de arquivos que retardam a “primeira pintura” de sua página — esses arquivos afetam o tempo de carregamento de todo o conteúdo que aparece na janela do navegador no carregamento inicial da página. Isso também é chamado de conteúdo “acima da dobra”.

Anote todos os arquivos que terminam com as extensões .css e .js, pois é nesses que você deve se concentrar.

2. Elimine os recursos de bloqueio de renderização manualmente ou com um plug-in.

Agora que você identificou o problema, existem duas maneiras de corrigi-lo no WordPress: manualmente ou com um plug-in. Abordaremos primeiro a solução de plug-in.

Vários plug-ins do WordPress podem reduzir o efeito de recursos de bloqueio de renderização em sites do WordPress. Abordarei duas soluções populares, Autoptimize e W3 Total Cache.

Como eliminar recursos de bloqueio de renderização com o plug-in Autoptimize

O Autoptimize é um plug-in gratuito que modifica os arquivos do seu site para fornecer páginas mais rápidas. O Autoptimize funciona agregando arquivos, reduzindo o código (ou seja, reduzindo o tamanho do arquivo excluindo caracteres redundantes ou desnecessários) e atrasando o carregamento de recursos de bloqueio de renderização.

Como você está modificando o back-end do seu site, lembre-se de ter cuidado com este plug-in ou qualquer plug-in semelhante. Para eliminar recursos de bloqueio de renderização com o Autoptimize:

1. Instale e ative o plug-in Autoptimize.

2. No painel do WordPress, selecione, Configurações > Otimização automática.

3. Debaixo Opções de JavaScriptmarque a caixa ao lado de Otimizar o código JavaScript?.

4. Se a caixa ao lado Agregar arquivos JS? estiver marcado, desmarque-o.

5. Debaixo Opções de CSSmarque a caixa ao lado de Otimizar o código CSS?.

6. Se a caixa ao lado Agregar arquivos CSS? estiver marcado, desmarque-o.

7. Na parte inferior da página, clique em Salvar alterações e Cache Vazio.

8. Analise seu site com o PageSpeed ​​Insights e verifique se há melhorias.

9. Se o PageSpeed ​​Insights ainda relatar arquivos JavaScript de bloqueio de renderização, volte para Configurações > Otimização automática e marque as caixas ao lado de Agregar arquivos JS? e Agregar arquivos CSS?. Então clique Salvar alterações e cache vazio e escaneie novamente.

Como eliminar recursos de bloqueio de renderização com o plugin W3 Total Cache

O W3 Total Cache é um plug-in de cache amplamente usado que ajuda a lidar com códigos lentos. Para eliminar JavaScript de bloqueio de renderização com o W3 Total Cache:

1. Instale e ative o plug-in W3 Total Cache.

2. Uma nova Desempenho opção será adicionada ao menu do painel do WordPress. Selecione Desempenho > Configurações gerais.

3. No Minimizar seção, marque a caixa ao lado de Minimizarem seguida, defina Modo minificar para Manual.

4. Clique Salvar todas as configurações na parte inferior do Minimizar seção.

5. No menu do painel, selecione Desempenho > Minimizar.

6. No js seção ao lado de Configurações de minimização do JScertifique-se de Habilitar caixa está marcada. Então, sob Operações em áreasabra o primeiro tipo de incorporação lista suspensa e escolha Sem bloqueio usando “defer”.

7. Debaixo gerenciamento de arquivos JSescolha seu tema ativo no Tema suspenso.

8. Consulte novamente os resultados do PageSpeed ​​Insights da sua verificação anterior. Para cada item sob Elimine recursos de bloqueio de renderização terminando em .js, clique em Adicionar um script. Em seguida, copie o URL completo do recurso JavaScript do PageSpeed ​​Insights e cole-o no URI do arquivo campo.

9. Depois de colar todos os recursos JavaScript de bloqueio de renderização relatados pelo PageSpeed ​​Insights, clique em Salvar configurações e limpar caches na parte inferior do js seção.

10. No CSS seção ao lado de Configurações de minimização de CSSmarque a caixa ao lado de Configurações de minimização de CSS e certifique-se de método Minify está configurado para Combinar e Minimizar.

11. Debaixo Gerenciamento de arquivos CSSescolha seu tema ativo no Tema suspenso.

12. Para cada item sob Elimine recursos de bloqueio de renderização terminando em .css nos resultados da verificação do PageSpeed ​​Insights, clique em Adicionar uma folha de estilo. Em seguida, copie o URL completo do recurso CSS do PageSpeed ​​Insights e cole-o no URI do arquivo campo.

13. Depois de colar todos os recursos CSS de bloqueio de renderização relatados pelo PageSpeed ​​Insights, clique em Salvar configurações e limpar caches na parte inferior do CSS seção.

14. Analise seu site com o PageSpeed ​​Insights e verifique se há melhorias.

Como eliminar manualmente o JavaScript de bloqueio de renderização

Os plug-ins podem lidar com o trabalho de back-end para você. Então, novamente, os próprios plugins são apenas mais arquivos adicionados ao seu servidor web. Se você quiser limitar esses arquivos extras, ou se preferir lidar com a programação por conta própria, pode resolver manualmente o JavaScript de bloqueio de renderização.

Para isso, localize o