Como Elimininar o Bloqueio de Renderização

Três Dicas para Eliminar o Bloqueio de Renderização nas Páginas do Seu Site

Se você está enfrentando o problema de bloqueio de renderização nas páginas do seu site, siga essas três dicas simples para melhorar a performance e a experiência do usuário. Isso pode ajudar também a melhorar o seu desempenho nos resultados de busca do Google.

1. Utilize o PageSpeed Insights para Identificar os Problemas

A primeira dica é acessar o PageSpeed Insights e inserir o link da página do seu site para análise.

Após a análise, procure a opção "Elimine recursos que impedem a renderização". Se houver algum arquivo CSS ou JavaScript mencionado, copie o link e cole em um bloco de notas. Isso será útil na próxima etapa.

2. Adiar o Carregamento do CSS

Para adiar o carregamento de um arquivo CSS de forma assíncrona e eliminar o bloqueio de renderização, adicione o seguinte código no seu HTML:

<link as="style" href="URL_DO_CSS" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
<noscript><link href="URL_DO_CSS" rel="stylesheet"/></noscript>

Explicação:

• No primeiro código, a tag <link rel="preload"> solicita a folha de estilo de forma assíncrona, ou seja, o CSS é carregado de maneira otimizada, sem bloquear a renderização da página.
• O atributo onload faz com que o CSS seja aplicado assim que o carregamento for concluído.
• No segundo código, o <noscript> garante que, caso o navegador não suporte JavaScript, o CSS seja carregado normalmente, evitando problemas de renderização.

Este processo ajuda a reduzir o bloqueio de renderização causado pelo CSS, melhorando o tempo de carregamento da página.

3. Carregar Scripts Externos de Forma Assíncrona

A segunda dica envolve carregar scripts externos de maneira assíncrona, utilizando os atributos async ou defer nos scripts. Isso otimiza o tempo de carregamento e melhora a experiência do usuário.

Veja como você pode adicionar esses atributos:

• Para o atributo async:

<script async src="URL_DO_SCRIPT"></script>

• Para o atributo defer:

<script defer src="URL_DO_SCRIPT"></script>

Atenção: Os atributos async e defer devem ser usados apenas em scripts não críticos, ou seja, que não afetam diretamente o funcionamento da página. O uso indevido desses atributos em scripts essenciais pode comprometer o funcionamento de algumas funcionalidades do seu site.

4. Hospedar Scripts Externos no Servidor do Seu Site

A terceira dica consiste em hospedar scripts externos diretamente no servidor do seu site, em vez de carregá-los de fontes externas. Isso pode reduzir o tempo de carregamento, especialmente em caso de instabilidade do servidor de origem.

Veja o código para hospedar o script no seu servidor:

<script type="text/javascript">
  //<![CDATA[
    // Código do script essencial
  //]]>
</script>

Para fazer isso, copie o link do script externo, como https://exemplo.js, e acesse o navegador. Ao fazer isso, você poderá visualizar o código do script. Selecione todo o conteúdo (CTRL + A), copie (CTRL + C) e cole dentro da tag <script> no seu servidor, onde está indicado Código do script essencial.

Conclusão

Após aplicar essas três dicas, seu site estará bem otimizado e o bloqueio de renderização deverá ser minimizado, resultando em um carregamento mais rápido e uma melhor experiência para os usuários. Isso pode melhorar a pontuação de PageSpeed do seu site e até impactar positivamente o seu ranking nos motores de busca.

Assista ao vídeo abaixo para ver o passo a passo completo. Se restar alguma dúvida, fique à vontade para perguntar nos comentários!

Se precisar de mais ajustes ou de alguma outra recomendação, é só me avisar!