Como eliminar recursos de bloqueio de renderização no WordPress

Quando alguém tenta visitar uma página do seu site, ele insere a URL em seu navegador, que imediatamente funciona. Para carregar a página, é preciso “renderizar” todos os elementos que compõem essa página.

Mas, às vezes, há arquivos CSS ou JavaScript que pausam esse processo, impedindo que seu conteúdo seja renderizado — esses são chamados de recursos de bloqueio de renderização . Isso significa que os visitantes podem enfrentar longos tempos de espera, o que pode afetar negativamente a forma como as pessoas percebem sua organização e se elas realizam as ações que você deseja.

Nesta postagem, explicaremos o que são recursos de bloqueio de renderização e discutiremos os benefícios de removê-los do seu site. Em seguida, mostraremos como eliminá-los de cinco maneiras diferentes.

O que são recursos de bloqueio de renderização?

Antes de examinarmos detalhadamente os recursos de bloqueio de renderização, é importante entender o processo normal de carregamento de um site. Depois que um visitante clica em um link para seu site, o navegador precisa renderizar (ou baixar) todo o conteúdo. Ele lê o código do seu site de cima para baixo, incluindo todo o HTML, CSS e JavaScript.

Os visitantes não poderão ver seu site até que o navegador leia completamente essa fila de scripts. Se houver recursos de bloqueio de renderização, eles podem acabar esperando muito tempo.

Essencialmente, um recurso de bloqueio de renderização é um arquivo CSS ou JavaScript que faz com que um navegador pare de carregar outro conteúdo até que seja processado. Isso pode pausar o processo de renderização, fazendo com que a página apareça em branco ou incompleta.

Sempre que seu site tem recursos de bloqueio de renderização, ele carrega arquivos desnecessários na parte superior do código. Os visitantes terão que esperar até que esses arquivos sejam processados ​​antes de poderem ver a página.

Aqui estão algumas métricas de desempenho do site que podem ser afetadas por recursos de bloqueio de renderização:

• Maior pintura de conteúdo: mede quanto tempo leva para carregar o conteúdo principal de uma página.
• Primeira pintura de conteúdo: este é o tempo que leva para o navegador renderizar a primeira parte do conteúdo do Document Object Model (DOM) em seu site.
• Tempo Total de Bloqueio : mede o atraso entre a Primeira Pintura de Conteúdo e o Tempo para Interação (quanto tempo leva para uma página se tornar totalmente interativa).

Os recursos de bloqueio de renderização não são críticos para o carregamento, mas podem atrasar o processo de renderização. Isso pode ter um impacto negativo na experiência do usuário (UX) do seu site. Portanto, para evitar que os visitantes saiam de suas páginas, é importante eliminá-los.

Benefícios de eliminar recursos de bloqueio de renderização

Em geral, os internautas não gostam de esperar o carregamento das páginas. Um site rápido pode incentivar os visitantes a explorar seu conteúdo e impedir que eles se voltem para um concorrente.

A eliminação de recursos de bloqueio de renderização pode ser a chave para melhorar a velocidade da página porque você está essencialmente tornando o código do seu site o mais leve possível.

A remoção de arquivos de bloqueio de renderização também pode melhorar suas classificações nos mecanismos de pesquisa porque o desempenho do site e o envolvimento do usuário são algumas das métricas que empresas como o Google usam ao avaliar sites.

Como testar seu site para recursos de bloqueio de renderização

Antes de começar a eliminar arquivos do seu site, você precisará descobrir se ele tem ou não recursos de bloqueio de renderização. Os tempos de carregamento lentos também podem ser causados ​​por outros fatores, como imagens não otimizadas, hospedagem de baixa qualidade ou muitos plugins.

Para testar seu site quanto a recursos de bloqueio de renderização, você pode usar uma ferramenta como o PageSpeed ​​Insights do Google. Isso pode fornecer relatórios detalhados sobre o desempenho de sua página e fornecer sugestões para ajudá-lo a melhorar suas pontuações.

Para começar, basta inserir o URL do seu site na caixa de pesquisa e clicar em Analisar . A ferramenta irá então testar o desempenho do seu site. Quando estiver pronto, você verá uma avaliação de seus Core Web Vitals, que são um conjunto de métricas sobre a velocidade da sua página.

O PageSpeed ​​Insights também facilita a verificação de recursos de bloqueio de renderização. Para fazer isso, você pode rolar para baixo até a seção Oportunidades . Aqui, você precisará procurar uma sugestão rotulada Eliminar recursos de bloqueio de renderização .

Se você clicar nele, o PageSpeed ​​Insights fornecerá uma lista de recursos de bloqueio de renderização identificados durante o teste. No lado direito da página, você verá a economia estimada se excluir ou adiar esses arquivos.

Depois de identificar seus recursos de bloqueio de renderização, você pode removê-los do seu site. Dessa forma, você pode melhorar a velocidade da sua página e a experiência do usuário.

Como eliminar recursos de bloqueio de renderização no WordPress

Agora que você sabe como identificar recursos de bloqueio de renderização no WordPress, pode estar se perguntando como removê-los do seu site. Felizmente, compilamos uma lista de diferentes maneiras de fazer isso, começando pelos métodos mais fáceis.

1. Otimize o carregamento de CSS

Uma maneira de eliminar recursos de bloqueio de renderização é otimizar o carregamento de CSS do seu site. Conforme discutido anteriormente, um navegador carrega seu site de cima para baixo. Quando tem que processar determinados arquivos, isso pode atrasar o processo de carregamento.

É importante observar que apenas alguns arquivos CSS são necessários para o carregamento. Portanto, ao otimizar o carregamento de CSS, você pode exibir os arquivos mais importantes primeiro.

Embora você possa remover manualmente o CSS de bloqueio de renderização, você pode instalar um plug-in para simplificar o processo. O Jetpack Boost permite otimizar seu site a partir do painel do WordPress.

Com este plugin, você pode otimizar o carregamento de CSS, adiar JavaScript não essencial e implementar carregamento lento em algumas etapas simples. Essa é uma das maneiras mais fáceis de eliminar recursos de bloqueio de renderização no WordPress.

Para começar, navegue até Plugins → Adicionar novo no painel do WordPress e procure por Jetpack Boost. Em seguida, instale e ative o plugin em seu site.

Se você já tem o Jetpack instalado, pode navegar até Jetpack → Meu Jetpack . Na lista de produtos Jetpack, procure Boost e clique em Ativar .

Após ativar o plug-in, clique na guia Jetpack Boost e selecione Get Started .

O Jetpack fornecerá automaticamente uma pontuação de desempenho para seu site. Você verá uma nota de letra, bem como detalhes sobre suas pontuações em dispositivos móveis e computadores.

Em seguida, role para baixo até Otimizar carregamento de CSS e ative esse recurso. Quando ativado, o Jetpack Boost moverá o CSS crítico do seu site para o topo de suas páginas, para que eles carreguem mais rápido.

2. Adie JavaScript não essencial

Otimizar o carregamento de CSS não é o único passo que você pode tomar para eliminar recursos de bloqueio de renderização no WordPress. Você também pode adiar JavaScript não essencial para melhorar ainda mais os tempos de carregamento do seu site.

Ao adiar o JavaScript não essencial, você pode adiar determinadas tarefas até que o conteúdo seja carregado. Se alguns arquivos JavaScript não forem necessários para carregar uma página, você poderá impedir que o navegador os processe.

Felizmente, isso é simples de implementar com o plugin Jetpack Boost. Depois de otimizar o carregamento de CSS, você também pode adiar facilmente o JavaScript não essencial.

Para fazer isso, localize a seção Adiar JavaScript não essencial , que está abaixo de Otimizar carregamento de CSS e ative a chave de alternância.

Depois de ativar essa configuração, o plug-in recalculará o desempenho geral da página. Você poderá ver sua pontuação antes e depois de usar o Jetpack Boost.

Compare as pontuações nas capturas de tela antes e depois de passarmos por esse processo. Você verá que otimizar o carregamento de CSS e adiar JavaScript não essencial foi eficaz para melhorar a velocidade da página. Sem ter que processar scripts volumosos, os navegadores podem carregar seu conteúdo mais rapidamente.

3. Adiar imagens fora da tela

As imagens não são um recurso de bloqueio de renderização, mas você pode considerar otimizar o processo de carregamento para melhorar a renderização da sua página. Muitas vezes, os sites contêm imagens fora da tela que não aparecem em uma página até que um visitante faça uma interação, como rolagem. Como eles não são críticos para carregar a página da Web, você pode adiá-los com carregamento lento.

O carregamento lento de imagens envolve apenas o carregamento das imagens que os visitantes podem ver. Quando alguém começar a rolar, essas imagens serão carregadas logo antes de aparecerem na página.

Sem carregamento lento, um navegador tentará carregar todas as imagens em uma página de uma só vez. Isso significa que levará mais tempo para o seu conteúdo carregar, o que pode levar as pessoas a sair do seu site.

Se um visitante estiver usando um computador desktop, o carregamento regular pode não ser um problema. Por outro lado, smartphones e tablets têm telas menores e menos largura de banda. Se o seu site carregar todas as imagens de uma só vez, isso pode sobrecarregar mais a largura de banda e aumentar o tempo de carregamento para usuários de telefones celulares. O carregamento lento resolve esse problema.

Você pode usar o Jetpack Boost para habilitar o carregamento lento em seu site. Basta encontrar o recurso Lazy Image Loading e ativá-lo.

Ao fazer isso, seu site só carregará imagens à medida que o visitante rolar a página. Embora as imagens não sejam um recurso de bloqueio de renderização, ativar o carregamento lento pode ajudar a melhorar a velocidade da sua página.

4. Remova manualmente o JavaScript de bloqueio de renderização

Embora a instalação de um plug-in de otimização seja uma solução muito mais simples, você também pode remover manualmente os recursos de bloqueio de renderização. Idealmente, você só deve considerar essa opção se for um programador experiente. Esse processo também pode ser útil se você quiser reduzir o número de plugins em seu site.

Ao otimizar o JavaScript, você pode adicionar um atributo assíncrono ou adiado aos seus arquivos. Isso marcará os scripts não críticos e informará ao navegador para renderizá-los separadamente. Ambos os atributos podem ser usados ​​para fazer com que o conteúdo HTML seja carregado mais rapidamente.

Em um script normal, o arquivo HTML é analisado até chegar a um arquivo de script. Em seguida, a análise será pausada enquanto recupera o script. Depois de baixado e executado, a análise é retomada.

O atributo async permite que o navegador baixe o JavaScript enquanto analisa o restante do HTML. Após o download, ele pode interromper a análise de HTML para executar o script.

Da mesma forma, o atributo defer permite que o navegador baixe o script enquanto analisa o HTML. A diferença é que ele também espera até que a análise de HTML termine para executar o script.

Para implementar qualquer um desses atributos, você terá que adicionar um trecho de código ao seu arquivo functions.php . Primeiro, você precisará encontrar a tag <script> para o recurso de bloqueio de renderização. Em seguida, você pode adicionar um atributo assíncrono como este:

 <script src="resource.js" async></script>

Como alternativa, veja como um script pode ficar com um atributo defer:

 http://resource.js

Embora um plug-in possa lidar com esses atributos para você, talvez você prefira realizar essa tarefa por conta própria. Nesse caso, é importante que você saiba quando usar cada atributo. Para scripts não essenciais que dependem de outro script, você precisará usar um atributo defer. Para todos os outros scripts, você pode usar async.

5. Aplique atributos assíncronos ou adiados com um plug-in

Se você estiver tendo problemas para editar scripts manualmente, poderá usar um plug-in como JavaScript Async. Essa ferramenta permite controlar totalmente quais scripts têm um atributo assíncrono ou adiado.

Depois de instalar o plug-in, vá para Configurações → JavaScript assíncrono e selecione Ativar JavaScript assíncrono .

Em seguida, navegue até a seção Método JavaScript assíncrono . Aqui, você pode selecionar se deseja habilitar atributos assíncronos ou adiados.

Como muitos plugins dependem do jQuery, é uma boa ideia excluir esses scripts. Se você tentar aplicar atributos assíncronos ao jQuery, poderá acabar quebrando seu site.

Em caso de dúvida, você pode usar o atributo defer, mas o melhor curso de ação é excluir completamente o jQuery.

Agora, você pode listar scripts específicos que deseja adiar ou assíncronar. É importante certificar-se de colocar cada script na seção correta.

Na seção Exclusão de script , você pode listar todos os scripts que deseja excluir desse processo.

Na parte inferior da página, você também verá opções para excluir plugins e temas. Quando você lista um tema ou plug-in aqui, seus scripts não se aplicam aos atributos async ou defer.

Depois de personalizar essas opções, você pode clicar em Salvar configurações . Esse método pode ser um meio-termo eficaz entre editar scripts manualmente e permitir que um plug-in execute esse processo para você. Como alternativa, você pode usar uma ferramenta completa como o Jetpack Boost para remover essas etapas extras.

Perguntas frequentes (FAQs)

Como você pode ver, existem várias maneiras de eliminar recursos de bloqueio de renderização no WordPress. Vejamos algumas das perguntas mais comuns sobre esse processo.

Como posso testar meu site WordPress para recursos de bloqueio de renderização?

Você pode testar seu site WordPress inserindo sua URL no PageSpeed ​​Insights. Em seus resultados, procure quaisquer recursos de bloqueio de renderização na seção Oportunidades .

Os recursos de bloqueio de renderização estão relacionados ao Core Web Vitals?

Sim, os recursos de bloqueio de renderização podem afetar negativamente as pontuações do Core Web Vitals do seu site. Quaisquer scripts não otimizados podem aumentar a maior exibição de conteúdo (LCP), o tempo total de bloqueio (TBT) e a primeira exibição de conteúdo (FCP). Se você testar seu site com um software Core Web Vitals, como o PageSpeed ​​Insights, pode sugerir a eliminação de recursos de bloqueio de renderização para melhorar sua pontuação.

O HTML é um recurso de bloqueio de renderização?

Sim, quaisquer importações, scripts ou folhas de estilo HTML que atrasem o processo de renderização da página podem ser um recurso de bloqueio de renderização.

As imagens bloqueiam a renderização?

Não, as imagens não são um recurso de bloqueio de renderização, mas você ainda pode otimizar as imagens para aumentar a velocidade da sua página. Usando o Jetpack Boost, você pode adiar imagens fora da tela para carregar apenas o que está visível na tela. Em seguida, as imagens serão carregadas à medida que um visitante rolar a página.

Otimize seu site para tempos de carregamento mais rápidos

Ao remover arquivos de bloqueio de renderização, você pode melhorar os tempos de carregamento do seu site. Isso pode contribuir para uma melhor experiência do usuário, o que pode manter os visitantes em seu site por períodos mais longos. Portanto, eliminar recursos de bloqueio de renderização pode ser uma maneira eficaz de otimizar seu site para atingir melhor seus objetivos.

Para revisar, aqui estão cinco maneiras de eliminar recursos de bloqueio de renderização no WordPress:

1. Otimize o carregamento de CSS com o Jetpack Boost.
2. Adie JavaScript não essencial.
3. Adiar imagens fora da tela.
4. Remova manualmente os recursos de bloqueio de renderização.
5. Aplique atributos assíncronos ou adiados com o plug-in JavaScript Async.

Depois de remover os recursos de bloqueio de renderização, seus visitantes podem desfrutar de tempos de carregamento mais rápidos!