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!
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:
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?
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!
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/
A gestão de custos é um dos maiores desafios enfrentados pelas empresas, especialmente quando esses…
As startups, impulsionadas por inovação e agilidade, navegam em um cenário digital vibrante, mas também…
A segurança cibernética é crucial para startups, independentemente do seu tamanho ou setor de atuação.…
O gerenciamento de vulnerabilidades é o processo de identificar, avaliar, tratar e relatar vulnerabilidades de…
O DNS Cache Poisoning, ou envenenamento de cache DNS, é uma forma de ataque cibernético…
O DNS hijacking é um ataque malicioso que envolve a alteração das configurações de DNS…