Evite animações não compostas

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 #

• Código-fonte para a auditoria de evitar animações não compostas
• Atenha-se às propriedades somente do compositor e gerencie a contagem de camadas
• Animações de alto desempenho
• Simplifique a complexidade da pintura e reduza as áreas de pintura
• Visão interna dos navegadores da web modernos (parte 3)