Como eliminar Render-Blocking Resources

/em

O Lighthouse está dizendo para você eliminar os recursos de bloqueio de renderização? Aprenda o que isso significa, por que é importante e como corrigi-lo no seu HTML, CSS e JavaScript.

Você pode estar aqui porque o Lighthouse lhe disse para “eliminar recursos de bloqueio de renderização”. Recursos de bloqueio de renderização são um obstáculo comum para renderizar a sua página com mais rapidez. Eles impactam seus Web Vitals que agora impactam o seu SEO. Os tempos de renderização lentos também frustram os seus usuários e podem fazer com que eles abandonem a sua página.

Trabalhei com um cliente para reduzir os recursos de bloqueio de renderização e melhorar a velocidade de carregamento do site dele. Passamos de 13% para 80% das visitas à página experimentando o First Contentful Paint (FCP) em menos de 1,8 segundos. E ainda não terminamos!

Qual é o caminho crítico de renderização?

Escrevemos HTML, CSS e JavaScript em arquivos e, em seguida, entregamos esses arquivos ao navegador. O navegador converte esses arquivos na página que você vê por meio do caminho de renderização crítico. As etapas são:

1 Baixar o HTML

2 Ler o HTML e, ao mesmo tempo:

  • Construir o Document Object Model (DOM)
  • Observar uma tag <link> para uma folha de estilo e baixar o CSS

3 Ler o CSS e construir o CSS Object Model (CSSOM)

4 Combinar o DOM e o CSSOM em uma árvore de renderização

5 Usando a árvore de renderização, calcular o layout (tamanho e posição de cada elemento)

6 Pintar ou renderizar os pixels na página

Queremos que esse processo aconteça o mais rápido possível. Você consegue adivinhar o que o torna mais lento?

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

Recursos de bloqueio de renderização são arquivos que “pausam” o caminho de renderização crítico. Eles interrompem uma ou mais etapas.

O HTML é tecnicamente um bloqueio de renderização porque você precisa dele para criar o DOM. Sem o HTML, não teríamos nem uma página para renderizar.

No entanto, o HTML geralmente não é a causa dos nossos problemas…

CSS é um bloqueio de renderização. O navegador precisa disso antes de criar o CSSOM, o que bloqueia todas as etapas posteriores. Assim que o navegador encontra uma folha de estilo <link> ou tag <style>, ele deve baixar e analisar o conteúdo. Em seguida, ele deve criar o CSSOM antes que o resto da renderização possa continuar. Você pode ver isso representado no ponto do triângulo no diagrama. A árvore de renderização não pode continuar até que o CSSOM e o DOM sejam criados.

JavaScript PODE ser um bloqueio de renderização. Quando o navegador encontra um script que deve ser executado de forma síncrona, ele interrompe a criação do DOM até que a execução do script seja concluída:

Além disso, se CSS aparecer antes de um script, o script não será executado até que o CSSOM seja criado. Isso ocorre porque o JavaScript também pode interagir com o CSSOM e não queremos uma competição entre eles.

CSS bloqueia a execução do script e o JavaScript bloqueia a construção do DOM! Parece uma bagunça gigante, certo? Fique ligado para saber como podemos limpar isso!

Por que é tão importante eliminar recursos de bloqueio de renderização?

Os recursos de bloqueio de renderização podem desencadear uma cascata de falhas no desempenho da web. A primeira pintura fica mais lenta, o que faz com que a maior pintura com conteúdo (LCP) seja mais lenta. LCP é um dos Core Web Vitals que agora são usados ​​para calcular as classificações do seu mecanismo de pesquisa.

A Vodafone melhorou seu LCP em 31%, resultando em um aumento de 8% nas vendas, um aumento de 15% na taxa de lead por visita e um aumento de 11% na taxa de carrinho por visita.

Referencia: https://sia.codes/posts/render-blocking-resources/