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 o URL do seu site e clique em 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é Oportunidades e abra o acorde Eliminar recursos de bloqueio de renderização .

Fonte da imagem

Você verá uma lista de arquivos que retardam a “primeira pintura” da 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 plugin Autoptimize.

2. No painel do WordPress, selecione Configurações > Autoptimize .

3. Em Opções de JavaScript , marque a caixa ao lado de Otimizar código JavaScript? .

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

5. Em Opções de CSS , marque a caixa ao lado de Otimizar código CSS? .

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

7. Na parte inferior da página, clique em Salvar alterações e esvaziar o cache .

8. Examine 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? . Em seguida, clique em Salvar alterações e esvaziar o cache e digitalize 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 plugin W3 Total Cache.

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

3. Na seção Minify , marque a caixa ao lado de Minify e defina o modo Minify como Manual .

4. Clique em Salvar todas as configurações na parte inferior da seção Minificar .

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

6. Na seção JS ao lado de JS minify settings , certifique-se de que a caixa Enable esteja marcada. Em seguida, em Operações em áreas , abra a primeira lista suspensa Tipo de incorporação e escolha Sem bloqueio usando “adiar” .

7. Em Gerenciamento de arquivo JS , escolha seu tema ativo no menu suspenso Tema .

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

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 da seção JS .

10. Na seção CSS ao lado de CSS minify settings , marque a caixa ao lado de CSS minify settings e certifique-se de que o método Minify esteja definido como Combine & Minify .

11. Em gerenciamento de arquivo CSS , escolha seu tema ativo no menu suspenso Tema .

12. Para cada item em Eliminar recursos de bloqueio de renderização que terminam 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 campo File URI .

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 da seção CSS .

14. Examine 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 fazer isso, localize as tags <script> nos arquivos do seu site para os recursos identificados na verificação do PageSpeed ​​Insights. Eles ficarão mais ou menos assim:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

As tags <script> dizem ao navegador para carregar e executar o script identificado pelo atributo src (source). O problema com esse processo é que esse carregamento e execução atrasam a análise da página da Web pelo navegador, o que afeta o tempo geral de carregamento:

Fonte da imagem

Para resolver isso, você pode adicionar o atributo async (assíncrono) ou defer às tags de script para recursos de bloqueio de renderização. async e defer são colocados assim:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Embora tenham efeitos semelhantes nos tempos de carregamento, esses atributos dizem ao navegador para fazer coisas diferentes.

O atributo async sinaliza ao navegador para carregar o recurso JavaScript enquanto analisa o restante da página e executa esse script imediatamente após ser carregado. A execução do script pausa a análise de HTML:

Fonte da imagem

Scripts com o atributo defer também são carregados enquanto a página é analisada, mas o carregamento desses scripts é atrasado até depois da primeira renderização ou até que as partes mais essenciais sejam carregadas:

Fonte da imagem

Os atributos defer e async não devem ser usados ​​juntos no mesmo recurso, mas um pode ser mais adequado para um determinado recurso do que o outro. Geralmente, se um script não essencial depende de um script para ser executado antes dele, use defer . O atributo defer garante que o script será executado após o script necessário anterior. Caso contrário, use async .

3. Execute novamente uma verificação do site.

Depois de fazer as alterações, faça uma verificação final do seu site por meio do PageSpeed ​​Insights e veja o impacto que suas alterações tiveram em sua pontuação.

Espero que haja uma melhora notável, mas não se preocupe se não. Muitos fatores podem inibir o desempenho da página e você pode ter que fazer mais pesquisas para encontrar a origem do baixo desempenho.

4. Verifique se há bugs no seu site.

Além de uma nova verificação, verifique suas páginas para garantir que seu site funcione. A página carrega corretamente? Todos os elementos estão aparecendo? Se algo estiver quebrado ou não carregar corretamente, desfaça as alterações e solucione o problema.

Se você chegou a um ponto em que tentou repetidamente várias medidas com ganhos mínimos de velocidade, talvez seja melhor considerar outras maneiras de acelerar suas páginas, em vez de correr o risco de quebrar seu site.

Otimizando seu site WordPress para desempenho

Muitos fatores contribuem para a experiência dos usuários em seu site, mas poucos são mais importantes do que o tempo de carregamento. Sempre que fizer grandes alterações no conteúdo ou na aparência do seu site WordPress, você deve sempre considerar como essas alterações afetam o desempenho.

Agora que eliminou os recursos de bloqueio de renderização, você deve continuar a otimizar a velocidade do seu site analisando outros recursos que sabidamente diminuem o desempenho. Tente incorporar testes de velocidade regulares em seu cronograma de manutenção do site – ficar à frente de quaisquer problemas em potencial será fundamental para o seu sucesso.