Desempenho de gradientes CSS: gradientes deixam o site lento?

O bom desempenho de gradientes CSS é o caso normal: um gradiente estático não deixa um site lento de nenhum jeito que você perceba. É uma linha de texto, então não há nada a baixar, nada a decodificar e nada a esperar. Gradientes custam um pouco de tempo de pintura, como qualquer outra cor da página. As páginas lentas vêm de alguns padrões específicos construídos sobre gradientes: desfoques grandes, repinturas durante a rolagem e animações que repintam a cada quadro. Este guia mostra qual é qual e como conferir a sua página.

Carregamento: gradientes ou imagens

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); tem 67 caracteres. Ele chega dentro da sua folha de estilo, não precisa de requisição extra e renderiza nítido em qualquer tamanho e densidade de pixels. Um fundo em imagem precisa da própria requisição, tem de ser decodificado antes de ser desenhado e precisa ser grande o bastante para telas grandes e de alta densidade.

Então, para fundos simples e moderadamente em camadas, o CSS ganha no carregamento sempre. As imagens ainda fazem sentido quando o fundo é realmente complexo, como um gradiente de malha pictórico com muitos pontos de cor ou uma textura fotográfica. Aí a troca é peso de arquivo por riqueza visual, e muitas vezes vale a pena.

Pintura: o que um gradiente custa na tela

Para mostrar um gradiente, o navegador calcula uma cor para cada pixel que ele cobre: isso é pintar. O trabalho cresce com a área pintada, o número de camadas de gradiente empilhadas e os efeitos por cima. Para um fundo estático, acontece uma vez, e o resultado é reaproveitado enquanto você rola ou interage, a menos que algo o invalide.

Os riscos reais: desfoque, fundos fixos e animação

Desfoques grandes. O filter: blur() e o backdrop-filter amostram muitos pixels vizinhos para cada pixel, e o trabalho cresce com o raio do desfoque e com a área. Um gradiente desfocado que é pintado uma vez costuma ir bem. Um backdrop-filter sobre conteúdo que rola por baixo precisa ser recalculado conforme esse conteúdo se move, e é aí que as interfaces de glassmorphism tendem a engasgar em celulares modestos.

Fundos fixos. O background-attachment: fixed mantém um fundo parado enquanto a página rola, o que pode forçá-lo a repintar a cada passo da rolagem. Se você quer um gradiente que fique no lugar, um elemento position: fixed atrás do conteúdo costuma ser mais barato, porque o navegador pode movê-lo como uma camada separada.

Animação. Mover o background-position ou animar paradas de cor com @property repinta o elemento a cada quadro. Em um botão, isso é trivial. Em um hero de tela cheia, é trabalho contínuo enquanto a página estiver aberta, o que aparece como aquecimento e gasto de bateria nos celulares.

/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }

O guia de gradiente animado em CSS traz o conjunto completo de técnicas, das mais baratas às mais flexíveis.

Camadas e will-change

Promover um elemento à própria camada do compositor, com will-change: transform ou uma animação de transform ativa, é o que torna a animação barata possível. Não é de graça: cada camada guarda o próprio bitmap na memória gráfica, cerca de largura × altura × 4 bytes em pixels do dispositivo. Uma camada superdimensionada para o fundo de um hero é aceitável. Dezenas de cards promovidos, cada um com a própria camada de gradiente, podem usar mais memória do que poupam em tempo de pintura. Acrescente will-change aos elementos que realmente animam, não como regra geral.

Como medir o desempenho de gradientes

1. 1

   Ative o destaque de pintura

   No Chrome DevTools, abra o painel Rendering e ative Paint flashing. Tudo o que piscar em verde enquanto nada deveria mudar está sendo repintado.

2. 2

   Grave um registro de Performance

   Grave alguns segundos de rolagem ou de animação em repouso no painel Performance. Veja quanto de cada quadro é gasto em pintura e se há quadros perdidos.

3. 3

   Limite a CPU

   Use a limitação de CPU do painel Performance para simular um dispositivo mais lento. Um hero que é fluido em um notebook rápido pode sofrer em um celular intermediário.

4. 4

   Confira o painel Layers

   Veja quantas camadas de compositor existem e quanta memória elas usam. Camadas inesperadamente numerosas costumam indicar uso excessivo de will-change.

5. 5

   Teste no dispositivo real

   Termine em um celular de verdade. O calor e o gasto de bateria de uma animação constante são fáceis de perder em um desktop.

O guia de desempenho de renderização do web.dev explica o pipeline por trás dessas ferramentas: estilo, layout, pintura e composição. Saber qual etapa o seu gradiente aciona diz se ele é barato.

Um checklist de desempenho para gradientes

• Use gradientes CSS para fundos simples e em camadas; imagens só quando o visual realmente exigir.
• Mantenha os raios de desfoque modestos e evite backdrop-filter sobre áreas grandes que rolam.
• Troque o background-attachment: fixed por uma camada de posição fixa.
• Anime transform ou opacity, e não background-position, em áreas grandes.
• Animações lentas e ambientes podem parar por completo para quem usa movimento reduzido.
• Adicione grão como uma pequena imagem em mosaico, não como um filtro SVG ao vivo em um elemento grande; veja textura de ruído em CSS.
• Meça antes e depois com o destaque de pintura e uma gravação de Performance.