Animações não compostas podem parecer irregulares (ou seja, não suaves) em telefones de baixo custo ou quando tarefas de alto desempenho estiverem sendo executadas no thread principal. As animações Janky podem aumentar o Cumulative Layout Shift (CLS) da sua página. Reduzir o CLS melhorará sua pontuação de desempenho do Lighthouse.
Fundo
Os algoritmos do navegador para converter HTML, CSS e JavaScript em pixels são conhecidos coletivamente como pipeline de renderização.
Tudo bem se você não entender o que significa cada etapa do pipeline de renderização. O principal a ser entendido agora é que, em cada etapa do pipeline de renderização, o navegador usa o resultado da operação anterior para criar novos dados. Por exemplo, se o seu código faz algo que acione o Layout, as etapas de pintura e composição precisam ser executadas novamente. Uma animação não composta é qualquer animação que acione uma das etapas anteriores no pipeline de renderização (Estilo, Layout ou Pintura). As animações não compostas têm pior desempenho porque forçam o navegador a trabalhar mais.
Confira os seguintes recursos para aprender mais sobre o pipeline de renderização:
- Visão interna dos navegadores da web modernos (parte 3)
- Simplifique a complexidade da pintura e reduza as áreas de pintura
- Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas
Como o Lighthouse detecta animações não compostas
Quando uma animação não pode ser composta, o Chrome relata os motivos da falha para o rastreamento do DevTools, que é o que o Lighthouse lê. O Lighthouse lista os nós DOM que têm animações que não foram compostas junto com o(s) motivo(s) da falha para cada animação.
Como garantir que as animações sejam compostas
Consulte Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas e animações de alto desempenho .
Recursos
Published on • Improve article