Como a animação afeta os principais sinais vitais da Web (LCP, INP e CLS)
Como as animações e os tempos de execução das animações afetam LCP, INP e CLS, e maneiras práticas de manter o movimento rico sem prejudicar o Core Web Vitals.
Ponto principal
A animação pode prejudicar todos os três Core Web Vitals: arquivos de animação e tempos de execução pesados podem atrasar o LCP, a animação baseada em JavaScript pode bloquear o thread principal e piorar o INP, e animar propriedades de layout ou carregar animações sem espaço reservado causa CLS. Mantenha o conteúdo principal independente da animação, carregue lentamente os tempos de execução abaixo da dobra, anime a transformação e a opacidade e reserve espaço para cada elemento animado.
As três métricas e seus alvos
O Core Web Vitals do Google, documentado em web.dev, mede o carregamento (Largest Contentful Paint, bom em 2,5 segundos ou menos), capacidade de resposta (Interação com o próximo Paint, bom em 200 milissegundos ou menos) e estabilidade visual (Cumulative Layout Shift, bom em 0,1 ou menos), medido no 75º percentil de carregamentos de página reais.
LCP: não faça o herói esperar pela animação
Se o maior elemento na tela for uma animação que precisa de um tempo de execução e de um arquivo para carregar primeiro, o LCP aguarda ambos. Renderize primeiro uma imagem estática ou texto real, depois aprimore-o e carregue tempos de execução de animação apenas para conteúdo próximo ou abaixo da dobra, quando necessário.
INP: mantenha o thread principal livre
O INP mede a rapidez com que a página responde a toques e cliques. Web.dev explica que tarefas longas no thread principal atrasam a resposta à entrada. Animações que executam JavaScript complexos em cada quadro, ou muitas animações iniciadas ao mesmo tempo, podem causar exatamente isso. Prefira transições CSS em transformação e opacidade para efeitos simples, pause animações fora da tela e evite iniciar trabalhos pesados em resposta a uma interação.
CLS: reserve espaço e anime a transformação
Web.dev recomenda usar a propriedade de transformação CSS para animar sem acionar mudanças de layout: dimensionar em vez de alterar a largura e a altura, traduzir em vez de alterar a parte superior ou esquerda. Dê a cada elemento animado, incluindo animações baseadas em tela, dimensões fixas antes de carregar, para que a página não salte quando aparecer.
Tempos de execução da tela
Tempos de execução baseados em tela, como o renderizador de tela Lottie, Rive e ExodeUI desenham fora do DOM, o que evita o trabalho de layout por quadro, mas adiciona um tempo de execução para download e execução. Avalie a compensação de sua página: carregue lentamente o tempo de execução, dimensione a tela em CSS antecipadamente e teste em telefones de médio porte.
Princípios-chave para lembrar
- Alvos: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 no percentil 75
- Não faça com que o elemento LCP dependa de um tempo de execução de animação
- Mantenha o tópico principal livre durante as interações
- Animar transformação e opacidade; reserve espaço para elementos animados
- Tempos de execução de carregamento lento e teste em telefones de gama média
Perguntas frequentes
Fontes
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev