Animações não compostas podem parecer instáveis (não fluídas) em smartphones mais simples ou quando tarefas com alto desempenho estão sendo executadas na linha de execução principal. Animações instáveis podem aumentar a Mudança de layout cumulativa (CLS, na sigla em inglês) da página. Reduzir a CLS melhora sua pontuação de desempenho do Lighthouse.
Contexto
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 cada etapa do pipeline de renderização significa. É importante entender 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 código fizer algo que aciona o layout, as etapas de pintura e composição precisarão ser executadas novamente. Uma animação não composta é qualquer animação que aciona uma das etapas anteriores no pipeline de renderização (estilo, layout ou pintura). Animações não compostas têm pior desempenho porque forçam o navegador a trabalhar mais.
Confira os seguintes recursos para saber mais sobre o pipeline de renderização:
- Análise dos navegadores da Web modernos (parte 3)
- Simplificar a complexidade da pintura e reduzir as áreas de pintura
- Usar apenas propriedades do compositor e gerenciar o número de camadas
Como o Lighthouse detecta animações não compostas
Quando uma animação não pode ser composta, o Chrome informa os motivos da falha ao rastreamento do DevTools, que é o que o Lighthouse lê. O Lighthouse lista os nós DOM com animações que não foram compostas, além dos motivos da falha em cada animação.
Como garantir que as animações sejam compostas
Consulte Usar apenas propriedades do compositor e gerenciar o número de camadas e Animações de alto desempenho.