O processo de renderização do navegador é o que transforma seu código numa página web com a qual seus usuários podem interagir. Por default, o thread principal do processo de renderização normalmente lida com a maioria do código: ele processa o HTML e constrói o DOM, processa o CSS e aplica os estilos especificados e processa, computa e executa o JavaScript.
O thread principal também processa eventos do usuário. Portanto, sempre que o thread principal estiver ocupado fazendo outra coisa, sua página web poderá não responder às interações do usuário, trazendo uma experiência ruim.
Como falha a auditoria do trabalho do thread principal do Lighthouse
O Lighthouse sinaliza páginas que mantêm o thread principal ocupado por mais de 4 segundos durante o carregamento:
Para ajudá-lo a identificar as fontes de carregamento do thread principal, o Lighthouse mostra uma análise de onde o tempo da CPU foi gasto enquanto o navegador carregava sua página.
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
Como minimizar o trabalho do thread principal
As seções abaixo são organizadas com base nas categorias que o Lighthouse relata. Veja The anatomy of a frame para ter uma visão geral de como o Chromium renderiza páginas web.
Veja Faça menos trabalho no thread principal para aprender como usar o Chrome DevTools para investigar exatamente o que seu thread principal está fazendo enquanto a página carrega.
Computação de scripts
Estilo e layout
- Reduza o escopo e a complexidade dos cálculos de estilo
- Evite layouts grandes e complexos e alterações de layout
Renderização
- Atenha-se apenas às propriedades do compositor e gerencie a contagem de camadas
- Simplifique a complexidade da pintura e reduza as áreas de pintura
Processamento de HTML e CSS
Processamento e compilação de scripts
Coleta de lixo
Recursos
Updated on • Improve article