Evitando problemas de animação não composta

Você já clicou em um site e descobriu que ele gaguejava e ficava lento enquanto você rolava?

Frustrante, não é?

Bem, e se disséssemos que o segredo por trás desses problemas está em algo chamado de animações não compostas?

São animações que não são processadas de forma eficiente pelo navegador, colocando carga extra no processador principal do computador e causando problemas de desempenho.

Mas não se preocupe, há uma maneira de consertar isso.

Neste blog, discutiremos as animações não compostas e como corrigi-las. Iremos guiá-lo através de etapas simples para suavizar essas animações irregulares, tornando seu site não apenas mais rápido, mas também um prazer de navegar para seus visitantes.

Vamos começar.

O que é animação não composta?

Animação não composta é um tipo de animação da web processada principalmente pela CPU e não pela GPU (Unidade de Processamento Gráfico).

Essa abordagem de processamento geralmente leva a uma renderização menos eficiente, podendo causar problemas de desempenho, como taxas de quadros mais lentas e atraso na interface do usuário, especialmente em páginas da Web complexas ou em dispositivos menos potentes.

Reduzir a mudança cumulativa de layout (CLS) promete um aumento em sua pontuação de desempenho do Lighthouse.

Por que evitar animações não compostas é essencial para o desempenho na Web?

Evitar animações não compostas é essencial para o desempenho da web por vários motivos. Em primeiro lugar, as animações não compostas, que são processadas pela CPU, podem ser menos eficientes e mais lentas do que as animações processadas pela GPU.

Essa ineficiência geralmente leva a uma diminuição na taxa de quadros, fazendo com que as animações pareçam instáveis ​​ou lentas, o que pode impactar negativamente a experiência do usuário. Páginas da Web com animações mais suaves parecem mais responsivas e geralmente são mais agradáveis ​​de interagir.

Em segundo lugar, as animações com uso intensivo da CPU podem sobrecarregar os recursos do sistema, especialmente em dispositivos menos potentes, como smartphones ou computadores mais antigos. Essa tensão pode desacelerar não apenas as animações em si, mas também outros processos em execução na página da web.

Como resultado, o desempenho geral do site pode ser comprometido. Além disso, o desempenho comprometido do site também pode impactar negativamente o sucesso do marketing digital. Confira este blog “ O impacto da velocidade do site no sucesso do marketing digital ” para saber como.

Observação: aqui estão algumas dicas fáceis para acelerar seu site WordPress e obter melhor desempenho .

Como as animações não compostas afetam o desempenho da página e a renderização do navegador?

Animações não compostas podem impactar fortemente o desempenho da página e a renderização do navegador. Do lado do desempenho, eles tendem a tornar o site mais lento. Isso acontece porque o processador principal (CPU) do computador está sobrecarregado, tentando lidar com animações complexas além de outras tarefas.

Como resultado, o site torna-se menos responsivo às interações do usuário, como clicar ou rolar. Isto é especialmente perceptível em dispositivos com menor poder de processamento, como telefones celulares.

Em relação à renderização do navegador, as animações não compostas geralmente resultam em movimentos instáveis ​​e irregulares na tela. Como a CPU é menos eficiente no desenho e no gerenciamento dessas animações do que a GPU, as animações podem parecer entrecortadas e não suaves.

Isso afeta o apelo visual e pode fazer com que o site pareça mais lento à medida que o navegador se esforça para acompanhar a renderização dessas animações exigentes. Além disso, a carga da CPU pode levar a tempos de carregamento mais longos para a página da web, pois leva mais tempo para processar e exibir os elementos animados.

Como detectar animações não compostas?

A detecção de animações não compostas pode ser feita usando ferramentas de análise de desempenho como Google PageSpeed ​​​​Insights e GTmetrix. Aqui estão as 10 melhores ferramentas de teste de velocidade do WordPress que você pode usar para detectar animações não compostas.

Essas ferramentas analisam vários aspectos do desempenho do seu site, incluindo como as animações são renderizadas.

Veja como você pode usá-los:

Informações do Google PageSpeed

• Visite o site PageSpeed ​​​​Insights , insira o URL da sua página da web e clique em ‘Analisar’. A ferramenta avalia sua página quanto ao desempenho em dispositivos móveis e computadores.

• Após a análise, o PageSpeed ​​​​Insights fornece uma pontuação e um relatório detalhado. Consulte a seção 'Diagnóstico' do relatório.
• Procure um aviso que diga algo como “Evite animações não compostas”. Isso indica que sua página possui animações que podem ser otimizadas para melhor desempenho.

Metriz GT

• Acesse o site GTmetrix , insira a URL do seu site e inicie o teste. GTmetrix oferece uma análise abrangente do desempenho de carregamento do seu site.

• Assim que a análise for concluída, você receberá um relatório detalhado. GTmetrix se concentra mais em métricas gerais de desempenho, por isso pode não apontar diretamente animações não compostas como PageSpeed ​​​​Insights.
• Procure tempos de renderização e métricas de carga da CPU, como 'Tempo total de bloqueio' ou 'Tempo de interação'.
• Embora GTmetrix possa não mencionar explicitamente animações não compostas, valores altos nessas áreas podem indicar processos de renderização ineficientes, o que pode ser devido a animações não compostas.

Além disso, você também pode realizar testes de estresse para determinar o desempenho do seu site.

Como os navegadores lidam com animações?

Quando se trata de lidar com animações, os navegadores usam duas partes principais de um computador: a CPU (Unidade Central de Processamento) e a GPU (Unidade de Processamento Gráfico). Animações simples, como alteração de cores ou texto, geralmente são gerenciadas pela CPU.

Porém, para animações mais complexas, principalmente aquelas que envolvem movimento ou transformação, os navegadores tentam utilizar a GPU. A GPU é melhor para essas tarefas porque foi projetada para lidar com gráficos e pode criar animações suaves e fluidas.

Mas, se uma animação não estiver configurada corretamente, o navegador ainda poderá usar a CPU para isso, tornando a animação menos suave e tornando todo o site mais lento. Portanto, os desenvolvedores da web trabalham para garantir que suas animações sejam compatíveis com a GPU para obter o melhor desempenho.

Causas de animações não compostas

Para avançar no sentido de resolver o problema das animações não compostas, é essencial primeiro entender o que as causa. Aqui estão alguns motivos comuns:

Animando propriedades não compostas

A animação de propriedades não compostas geralmente leva a animações não compostas. Isso acontece quando propriedades como 'largura', 'altura' ou 'margem', que exigem que o navegador recalcule e redesenhe muito, são usadas em animações.

Essas propriedades não são gerenciadas de forma eficiente pela GPU, então colocam mais carga na CPU, tornando as animações menos suaves.

Usando JavaScript para animar

Usar JavaScript para animar também pode causar problemas. Animações baseadas em JavaScript, especialmente quando não otimizadas, podem exigir muito da CPU. Embora o JavaScript ofereça mais controle sobre as animações, ele pode levar a problemas de desempenho se as animações forem complexas ou não forem codificadas de forma eficiente.

Áreas Pintadas Complexas

Áreas pintadas complexas em animações podem ser outro culpado. Quando você tem grandes áreas que precisam ser repintadas com frequência durante uma animação, isso sobrecarrega significativamente o sistema. Isto é particularmente verdadeiro para gráficos complexos ou imagens de alta resolução que mudam rapidamente.

Gráficos ou mídia ineficientes

Gráficos ineficientes ou uso de mídia em animações são outra causa comum. Imagens, vídeos ou gráficos de alta resolução que não são otimizados para uso na Web podem tornar as animações mais lentas. O navegador se esforça mais para renderizar esses elementos pesados, especialmente se fizerem parte de uma sequência animada.

Uso excessivo de sombras e filtros

Por último, o uso excessivo de sombras e filtros em CSS pode levar a animações não compostas. Esses efeitos, embora visualmente atraentes, consomem muitos recursos. Aplicá-los a elementos móveis pode impactar significativamente o desempenho, pois exigem que o navegador faça muito processamento extra.

Observação: conheça as outras causas de sites lentos .

Como evitar animações não compostas

Animações não compostas podem impactar significativamente o desempenho do seu site, levando a uma experiência do usuário lenta. A chave para resolver esse problema está na otimização de como as animações são tratadas.

Aqui está a abordagem passo a passo para corrigir esse problema. Antes de prosseguir para a correção, mostrarei como fica a pontuação do site com este erro:

• Seguindo em direção ao diagnóstico, encontramos o erro “evitar animações não compostas”.

Aqui estão as etapas que você precisa seguir para corrigir esse problema.

• Vá para o seu painel do WordPress
• Selecione Aparência > Personalizar
• Você pode encontrar um código CSS na seção “CSS adicional”. Há uma grande chance de que esse código não use animações CSS otimizadas, o que está causando esse erro.

• Se você é desenvolvedor, já sabe que este código não está otimizado. E aqui estão as mudanças que fariam maravilhas pelo seu site.

Alteração 1: Adicionando a propriedade Will-Change

Essa mudança visa informar o navegador sobre as próximas mudanças na animação, o que pode ajudar a otimizar o desempenho de renderização.

 .minha-animação {

    largura: 100px;

    altura: 100px;

    cor de fundo: vermelho;

    posição: absoluta;

    vontade-mudança: transformar, opacidade; /* Linha adicionada */

    animação: complexMove 5s linear infinito;

}

/* O resto dos quadros-chave permanecem inalterados */

Mudança 2: Reduzindo a complexidade da animação

Aqui, a transformação da escala em 50% foi modificada de escala(2) para escala(1,5). Isso reduz a complexidade e a intensidade da animação.

 .minha-animação {

    /* ... outras propriedades ... */

    vontade-mudança: transformar, opacidade; /* Supondo que a alteração 1 seja mantida */

    animação: complexMove 5s linear infinito;

}

@keyframes complexMove {

    /* ... 0% e 100% de quadros-chave ... */

    50% {

        transformar: traduzirX (300%) girar (180 graus) escala (1,5); /* Linha modificada */

        opacidade: 0,5;

    }

    /* ... quadro-chave 100% ... */

}

Aqui está como seria seu código final:

 .minha-animação {

    largura: 100px;

    altura: 100px;

    cor de fundo: vermelho;

    posição: absoluta;

    vontade-mudança: transformar, opacidade; /* Informando o navegador sobre mudanças futuras */

    animação: complexMove 5s linear infinito;

}

@keyframes complexMove {

    0%, 100% {

        transformar: traduzirX(0) girar(0) escala(1);

        opacidade: 1;

    }

    50% {

        transformar: traduzirX (300%) girar (180 graus) escala (1,5); /* Escala simplificada para complexidade reduzida */

        opacidade: 0,5;

    }

}

• Simplesmente remova o código anterior e copie e cole esse novo código em seu CSS adicional. Isso não alterará a animação, mas certamente removerá esse erro.

• Você pode ver que o erro não existe mais.
• E o bom é que com o código otimizado você pode aumentar a pontuação de desempenho. Vimos no início desta seção que a pontuação de desempenho foi 77.
• Aqui está a pontuação de desempenho aprimorada:

Assim, algumas dicas gerais que você deve ter em mente para solucionar esse erro são:

Dica 1: otimize animações CSS

Em vez de animar propriedades como altura, largura ou esquerda, que podem consumir muitos recursos, use
transformar
e
opacidade . Essas propriedades são aceleradas por GPU e podem ser tratadas com mais eficiência pelos navegadores.

Aqui está o código de exemplo antes e depois da otimização:

Antes da otimização:

 .animar-esquerda {

    posição: relativa;

    animação: moveLeft 2s linear infinito;

}

@keyframes moveLeft {

    de {esquerda: 0; }

    para {esquerda: 100px; }

}

Após a otimização:

 .animar-esquerda {

    posição: relativa;

    animação: moveLeft 2s linear infinito;

}

@keyframes moveLeft {

    de {transformar: traduzirX(0); }

    para {transformar: traduzirX(100px); }

}

Dica 2: Aproveitando o poder da propriedade CSS 'Will-Change'

Use a propriedade will-change para informar ao navegador sobre elementos que serão alterados em um futuro próximo. Isso permite que o navegador se prepare e otimize para a mudança.

Veja como usar a propriedade will-change;

• Insira a seguinte linha em seu código;

 vontade-mudança: transformar, opacidade; /* Linha adicionada */

Dica 3: descarregando animações para a GPU

Descarregar animações para a GPU (Unidade de Processamento Gráfico) é uma técnica para otimizar animações web, tornando-as mais suaves e menos desgastantes para a CPU (Unidade Central de Processamento).

Essa abordagem é especialmente eficaz na resolução de problemas de animação não composta, pois aproveita a capacidade da GPU de lidar com tarefas gráficas com mais eficiência.

Você pode descarregar animações para a GPU usando as propriedades Transform e Opacity para animações porque elas são mais eficientes do que propriedades de animação como largura, altura, topo ou esquerda.

Você pode usar as propriedades de transformação e opacidade em vez de esquerda e direita. Aqui está um exemplo:

Código não otimizado:

 @keyframes moveLeft {

    de {esquerda: 0; }

    para {esquerda: 100px; }

}

Código otimizado:

 @keyframes moveLeft {

    de {transformar: traduzirX(0); }

    para {transformar: traduzirX(100px); }

}

Dica 4: usando bibliotecas e ferramentas eficientes

A incorporação de bibliotecas eficientes como GreenSock Animation Platform (GSAP) ou Velocity.js pode ser altamente eficaz na solução de erros de animação não composta.

Essas bibliotecas são otimizadas para desempenho, oferecendo animações mais suaves e eficientes do que CSS ou JavaScript padrão.

Para incorporar a biblioteca GSAP, siga estas etapas;

• Localize o link CDN para GSAP.
• Abra o arquivo HTML onde deseja usar o GSAP.
• Você precisa colocar o link do CDN dentro de uma tag <script>. Idealmente, essa tag deve ser colocada próximo ao final da seção <body>.

 <!DOCTYPEhtml>

<html>

<cabeça>

    <title>Sua página</title>

    <!-- Outros elementos principais -->

</head>

<corpo>

    <!-- Seu conteúdo HTML vai aqui -->

    <!-- Script CDN GSAP no final do corpo -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</body>

</html>

Como a hospedagem Cloudways pode complementar suas animações otimizadas

Cloudways Hosting aprimora sites com animações otimizadas, oferecendo velocidades rápidas e alto tempo de atividade dos principais provedores de nuvem, como DigitalOcean, AWS e Google Cloud. Suas soluções avançadas de cache, incluindo Memcached, Varnish e Redis, garantem carregamento rápido de animações. A pilha otimizada da plataforma, junto com o Enterprise CDN da Cloudflare, aumenta ainda mais o desempenho da animação, especialmente durante picos de tráfego. Juntamente com recursos de segurança robustos, Cloudways oferece um ambiente de hospedagem ideal e econômico para sites ricos em animação.

Resumo

E é isso. Exploramos estratégias-chave para evitar animações não compostas, com foco nas melhores práticas em animação na web.

Também discutimos as causas da ocorrência de animações não compostas e como elas afetam o desempenho da web e a renderização do navegador.

Se você tiver alguma dúvida sobre este tópico, sinta-se à vontade para entrar em contato.