Algumas animações em páginas da Web podem ser gerenciadas completamente no estágio do compositor do pipeline de renderização.
Animações não compostas exigem mais trabalho e podem ficar instáveis (não suaves) em smartphones de baixo custo ou quando tarefas de alto desempenho estão sendo executadas na linha de execução principal.
Animações não compostas também podem aumentar o deslocamento cumulativo do layout (CLS) da sua página, já que resultam no movimento real de elementos que o algoritmo de CLS mede, o que pode causar mudanças em outros elementos. Animações compostas não resultam na mudança de outros elementos e, portanto, são excluídas do CLS. Reduzir o CLS vai melhorar 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 o pipeline de renderização.
Não tem problema se você não entender o significado de cada etapa do pipeline de renderização. O principal ponto a entender 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 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). As animações não compostas têm um desempenho pior porque forçam o navegador a trabalhar mais.
Confira os recursos a seguir para saber mais sobre o pipeline de renderização:
- Uma visão interna dos navegadores da Web modernos (parte 3)
- Simplificar a complexidade da pintura e reduzir as áreas pintadas
- Usar apenas propriedades do compositor e gerenciar a contagem 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 para o rastreamento do DevTools, que é o que o Lighthouse lê. O Lighthouse lista os nós do DOM que têm animações que não foram compostas, além dos motivos de falha de cada animação.
Como garantir que as animações sejam compostas
Consulte Usar apenas propriedades do compositor e gerenciar a contagem de camadas e Animações de alto desempenho.