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?
![mulher usando um laptop para remover recursos de bloqueio de renderização de seu site wordpress](https://novo.plataformavx.com.br/wp-content/uploads/2023/01/Como-eliminar-recursos-de-bloqueio-de-renderizacao-do-seu-site.jpg)
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.
O que são recursos de bloqueio de renderização?
Os recursos de bloqueio de renderização são partes do código em arquivos do site, geralmente CSS e JavaScript, que impedem o carregamento rápido de uma página da Web. Esses recursos levam um tempo relativamente longo para o navegador processar, mas podem não ser necessários para a experiência imediata do usuário. Os recursos de bloqueio de renderização podem ser removidos ou atrasados até que o navegador precise processá-los.
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:
Como eliminar recursos de bloqueio de renderização no WordPress
- Identifique os recursos de bloqueio de renderização.
- Elimine os recursos de bloqueio de renderização manualmente ou com um plug-in.
- Execute novamente uma verificação do site.
- Verifique se há erros no seu site.
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.
Fuente de imagen
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 Es 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? Es 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. Hacer clic 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 tags nos arquivos do seu site para os recursos identificados na verificação do PageSpeed Insights. Eles ficarão mais ou menos assim:
<script src="
tags informam ao navegador para carregar e executar o script identificado pelo origem (fonte) atributo. 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 assíncrono (assíncrono) ou o adiar atributo às tags de script para recursos de bloqueio de renderização. assíncrono e adiar são colocados assim:
<script src=" async>
<script src=" defer>
Embora tenham efeitos semelhantes nos tempos de carregamento, esses atributos dizem ao navegador para fazer coisas diferentes.
o assíncrono O atributo 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 adiar atributo também são carregados enquanto a página é analisada, mas esses scripts são carregados com atraso até depois da primeira renderização ou até que as partes mais essenciais sejam carregadas:
Fonte da imagem
o adiar e assíncrono atributos 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 adiar. o adiar O atributo garante que o script será executado após o script necessário anterior. Caso contrário, use assíncrono.
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.