O que são recursos de bloqueio de renderização e como corrigir problemas de bloqueio de renderização

Os recursos de bloqueio de renderização são um dos motivos mais comuns para sites de carregamento lento. E se o seu site não for rápido o suficiente, você não apenas prejudicará a experiência do usuário de seus visitantes, mas também sua classificação no mecanismo de pesquisa. A má notícia é que, se o seu site for lento, você estará perdendo clientes e receita.

No entanto, também há boas notícias – você pode melhorar a velocidade do seu site eliminando recursos de bloqueio de renderização. Neste artigo, explicaremos como os recursos de bloqueio de renderização afetam seus tempos de carregamento e mostraremos como corrigi-los.

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

Os recursos de bloqueio de renderização mais comuns são arquivos JavaScript e CSS localizados no cabeçalho da sua página da web. Eles são carregados acima da área da dobra (ou a área que você normalmente vê em um site antes de rolar para baixo para ver o restante do conteúdo) e fazem parte do caminho de renderização crítico usado por um navegador da web.

Em termos leigos, isso significa que certos eventos precisam acontecer para que seu navegador exiba (renderize) corretamente a visualização inicial de qualquer página da web. Aqui está um exemplo de como funciona um caminho de renderização básico:

• O navegador baixa uma página da web que consiste em um arquivo HTML que contém a estrutura da página da web
• O navegador lê o HTML e percebe 3 arquivos adicionais: um arquivo css, um arquivo javascript e uma imagem
• O navegador baixará primeiro a imagem
• O navegador então percebe que não pode continuar exibindo a página sem pegar o CSS e o JavaScript
• O navegador baixa o arquivo CSS e o lê para garantir que nada mais esteja sendo chamado
• O navegador baixa o arquivo JavaScript e o lê para garantir que nada mais esteja sendo chamado
• O navegador pode finalmente exibir a página da web

Enquanto o navegador está ocupado carregando e lendo cada um dos arquivos CSS e JavaScript, seus visitantes estão olhando para uma tela em branco, esperando o carregamento do seu site. Se você estiver usando um CMS como o WordPress, seu navegador pode ficar ocupado por um bom tempo porque terá que carregar não apenas os arquivos de estilo e script do seu tema, mas os arquivos de script e estilo que vêm com o próprio WordPress, bem como aqueles que vêm com todos os plugins e widgets que você está usando.

Quando se trata de otimizar a velocidade do seu site, a primeira tarefa da sua lista deve ser reduzir o tempo que leva para que seus usuários possam visualizar e interagir com seu conteúdo. A maneira mais fácil de fazer isso é otimizar seu caminho de renderização crítico.

Como corrigir problemas de bloqueio de renderização

Agora que você sabe o que causa problemas de bloqueio de renderização e como eles afetam a velocidade do seu site, vamos falar sobre como corrigir esses problemas.

CSS de bloqueio de renderização

Existem três maneiras de corrigir problemas de CSS de bloqueio de renderização:

• Chame corretamente seus arquivos CSS – seu arquivo CSS deve estar vinculado ao seu arquivo HTML assim: <link rel="style.css" href=“style.css"> em vez de usar o método @import . O método @import normalmente estará perto do topo da sua folha de estilo normal e fará com que o navegador volte e encontre o arquivo importado antes que ele possa ler o resto do arquivo CSS e resultar em um atraso ainda maior quando se trata de renderizar sua página web
• Diminua o número de arquivos CSS no caminho crítico - se possível, combine todos os diferentes arquivos CSS em um e remova a chamada para esses arquivos do seu HTML

JavaScript de bloqueio de renderização

Para remover JavaScript de bloqueio de renderização, você precisa saber quantos arquivos JavaScript são carregados e onde eles são chamados em seu HTML. Uma boa maneira de descobrir isso é usar a ferramenta Google PageSpeed ​​Insights. Quando a empresa de limpeza australiana This Is Neat Cleaning estava construindo seu site, eles usaram o PageSpeed ​​Insights do Google como referência, testando vários cenários para descobrir exatamente o que eles precisavam para dispositivos móveis e computadores.

Ficou evidente nos testes que inserir a maioria dos scripts na parte inferior dos arquivos HTML produzia os melhores resultados. A principal razão é que mover scripts para a parte inferior da página removeu a renderização que bloqueava o javascript de travar a experiência do usuário. Com CSS crítico ainda sendo carregado acima da dobra, o usuário ainda pode usar fundamentalmente o site, enquanto as interações e funcionalidades ainda estão sendo carregadas em segundo plano.

Usando um plug-in

Claro, como com qualquer coisa relacionada ao WordPress, você pode usar um plugin para corrigir problemas de bloqueio de renderização. Com mais de um milhão de instalações ativas no total, era óbvio que This is Neat Cleaning usaria o W3 Total Cache para armazenamento em cache, redução e otimização de desempenho.

Veja como você pode usar o W3 Total Cache para corrigir problemas de bloqueio de renderização.

No seu painel do WordPress, vá para Desempenho > Configurações e role para baixo até a seção Minify . Marque a caixa que diz Ativar e, em seguida, selecione Manual no menu suspenso ao lado do modo minify. Salvar configurações . Você precisará adicionar todos os scripts e estilos que deseja reduzir.

Para descobrir onde estão localizados os scripts e as folhas de estilo que bloqueiam a renderização, acesse a ferramenta Google Page Speed ​​Insights e analise seu site. Em seguida, olhe para a guia de sugestões e encontre a seção que diz: Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra . Clique em Mostrar como corrigir e selecione e copie a URL do arquivo.

Volte para o painel do WordPress e navegue até W3 Total Cache > Performance > Minify . Role para baixo até a seção JavaScript e, em Operações em áreas, certifique-se de que o tipo de incorporação esteja definido como Não bloqueante usando defer para a seção <head> . Em seguida, clique no botão Adicionar script e cole o URL que você copiou da ferramenta Google PageSpeed.

Depois de adicionar todos os arquivos de script, role para baixo até a seção CSS , clique em Adicionar uma folha de estilo e adicione os URLs dos arquivos de folha de estilo copiados do Google PageSpeed ​​Insights.

Quando terminar, clique no botão Salvar configurações e limpar cache .

Pensamentos finais

Recursos de bloqueio de renderização podem causar estragos quando se trata de velocidade do site. Felizmente, existem algumas maneiras de corrigir esses problemas, então use as dicas fornecidas aqui para melhorar a velocidade do seu site e garantir que seus visitantes tenham a melhor experiência de usuário possível.