Desempenho dos gradientes CSS: os gradientes abrandam um site?

Um bom desempenho dos gradientes CSS é o caso normal: um gradiente estático não abranda um site de forma que se note. É uma linha de texto, por isso não há nada para descarregar, nada para descodificar e nada por que esperar. Os 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: desfocados grandes, repinturas ao deslocar e animações que repintam a cada fotograma. Este guia mostra qual é qual e como verificar a tua própria página.

Carregamento: gradientes contra imagens

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); tem 67 carateres. Chega dentro da tua folha de estilos, não precisa de um pedido extra e desenha-se nítido em qualquer tamanho e densidade de píxeis. Um fundo em imagem precisa do seu próprio pedido, tem de ser descodificado antes de poder ser desenhado e tem de ser grande o suficiente para ecrãs grandes e de alta densidade.

Portanto, para fundos simples e moderadamente sobrepostos, o CSS ganha sempre no carregamento. As imagens continuam a fazer sentido quando o fundo é genuinamente complexo, como um gradiente de malha pictórico com muitos pontos de cor ou uma textura fotográfica. Nesse caso, a troca é peso do ficheiro por riqueza visual, e muitas vezes compensa.

Pintura: o que custa um gradiente no ecrã

Para mostrar um gradiente, o navegador calcula uma cor para cada píxel que cobre: isso é pintar. O trabalho cresce com a área pintada, o número de camadas de gradiente empilhadas e quaisquer efeitos por cima. Para um fundo estático acontece uma vez, e o resultado é reutilizado enquanto te deslocas ou interages, a não ser que algo o invalide.

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

Desfocados grandes. O filter: blur() e o backdrop-filter recolhem muitos píxeis vizinhos para cada píxel, e o trabalho cresce tanto com o raio do desfocado como com a área. Um gradiente desfocado pintado uma vez costuma estar bem. Um backdrop-filter sobre conteúdo que se desloca por baixo tem de ser recalculado à medida que esse conteúdo se move, e é aí que as interfaces de glassmorphism tendem a engasgar em telemóveis modestos.

Fundos fixos. O background-attachment: fixed mantém um fundo parado enquanto a página se desloca, o que pode obrigá-lo a repintar a cada passo de deslocação. Se queres um gradiente que fique no sítio, um elemento com position: fixed por trás do conteúdo costuma ser mais barato, porque o navegador o pode mover como uma camada à parte.

Animação. Mover o background-position ou animar paragens de cor com @property repinta o elemento a cada fotograma. Num botão isso é trivial. Num herói de ecrã inteiro, é trabalho contínuo enquanto a página estiver aberta, o que se nota em calor e desgaste da bateria nos telemóveis.

/* 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 sobre o gradiente animado em CSS tem o conjunto completo de técnicas, das mais baratas às mais flexíveis.

Camadas e will-change

Promover um elemento à sua própria camada do compositor, com will-change: transform ou uma animação de transform ativa, é o que torna possível uma animação barata. Não é gratuito: cada camada guarda o seu próprio bitmap na memória gráfica, aproximadamente largura × altura × 4 bytes em píxeis do dispositivo. Uma camada sobredimensionada para o fundo de um herói está bem. Dezenas de cartões promovidos, cada um com a sua camada de gradiente, podem gastar mais memória do que poupam em tempo de pintura. Acrescenta will-change aos elementos que realmente animam, não como regra geral.

Como medir o desempenho dos gradientes

1. 1

   Ativa o paint flashing

   Nas DevTools do Chrome, abre o painel Rendering e ativa o Paint flashing. Tudo o que pisca a verde quando nada devia estar a mudar está a ser repintado.

2. 2

   Grava um traço de Performance

   Grava alguns segundos de deslocação ou de animação parada no painel Performance. Vê quanto de cada fotograma se gasta em pintura e se há fotogramas perdidos.

3. 3

   Limita o CPU

   Usa a limitação de CPU do painel Performance para simular um dispositivo mais lento. Um herói que corre suave num portátil rápido pode ter dificuldades num telemóvel de gama média.

4. 4

   Vê o painel Layers

   Vê quantas camadas de compositor existem e quanta memória usam. Um número inesperadamente alto de camadas costuma significar que o will-change é usado em excesso.

5. 5

   Testa o dispositivo real

   Termina num telemóvel a sério. O calor e o desgaste da bateria de uma animação constante passam facilmente despercebidos num computador.

O guia da web.dev sobre desempenho de renderização explica o pipeline por trás destas ferramentas: estilo, layout, pintura e composição. Saber que fase o teu gradiente desencadeia diz-te se é barato.

Uma lista de verificação de desempenho para gradientes

• Usa gradientes CSS para fundos simples e sobrepostos; imagens só quando o visual realmente as exige.
• Mantém os raios de desfocado modestos e evita o backdrop-filter sobre áreas grandes que se deslocam.
• Substitui o background-attachment: fixed por uma camada de posição fixa.
• Anima o transform ou a opacity, não o background-position, em áreas grandes.
• As animações lentas e ambiente podem parar por completo para quem usa movimento reduzido.
• Acrescenta grão como uma pequena imagem em mosaico, não como um filtro SVG ao vivo num elemento grande; vê a textura de ruído em CSS.
• Mede antes e depois com o paint flashing e uma gravação de Performance.