Rendimiento de los degradados CSS: ¿ralentizan una web?

Un buen rendimiento de los degradados CSS es el caso normal: un degradado estático no ralentiza una web de ninguna forma que se pueda notar. Es una línea de texto, así que no hay nada que descargar, nada que decodificar y nada que esperar. Los degradados cuestan un poco de tiempo de pintado, como cualquier otro color de la página. Las páginas lentas vienen de unos pocos patrones concretos construidos sobre degradados: desenfoques grandes, repintados al hacer scroll y animaciones que repintan en cada fotograma. Esta guía muestra cuál es cuál y cómo comprobar tu propia página.

Carga: degradados frente a imágenes

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); tiene 67 caracteres. Llega dentro de tu hoja de estilos, no necesita ninguna petición extra y se ve nítido a cualquier tamaño y densidad de píxeles. Un fondo de imagen necesita su propia petición, tiene que decodificarse antes de poder dibujarse y debe ser lo bastante grande para pantallas grandes y de alta densidad.

Así que para fondos sencillos o con pocas capas, CSS gana siempre en la carga. Las imágenes siguen teniendo sentido cuando el fondo es realmente complejo, como un degradado de malla pictórico con muchos puntos de color o una textura fotográfica. Entonces el intercambio es peso de archivo por riqueza visual, y a menudo merece la pena.

Pintado: lo que cuesta un degradado en pantalla

Para mostrar un degradado, el navegador calcula un color para cada píxel que cubre: eso es pintar. El trabajo crece con el área pintada, el número de capas de degradado apiladas y cualquier efecto encima. Para un fondo estático ocurre una vez, y el resultado se reutiliza mientras haces scroll o interactúas, a menos que algo lo invalide.

Los riesgos reales: desenfoque, fondos fijos y animación

Desenfoques grandes. filter: blur() y backdrop-filter toman muestras de muchos píxeles vecinos para cada píxel, y el trabajo crece con el radio del desenfoque y con el área. Un degradado desenfocado que se pinta una vez suele estar bien. Un backdrop-filter sobre contenido que se desplaza por debajo tiene que recalcularse cuando ese contenido se mueve, y ahí es donde las interfaces de glassmorphism tienden a tartamudear en móviles modestos.

Fondos fijos. background-attachment: fixed mantiene un fondo quieto mientras la página se desplaza, lo que puede obligarlo a repintarse en cada paso del scroll. Si quieres un degradado que se quede en su sitio, un elemento con position: fixed detrás del contenido suele ser más barato, porque el navegador puede moverlo como una capa aparte.

Animación. Mover background-position o animar puntos de color con @property repinta el elemento en cada fotograma. En un botón es trivial. En un hero a pantalla completa es trabajo continuo mientras la página esté abierta, y se nota como calor y gasto de batería en los móviles.

/* 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); } }

La guía del degradado animado en CSS tiene el conjunto completo de técnicas, de la más barata a la más flexible.

Capas y will-change

Promover un elemento a su propia capa de composición, con will-change: transform o una animación de transform activa, es lo que hace posible una animación barata. No es gratis: cada capa guarda su propio mapa de bits en la memoria gráfica, aproximadamente ancho × alto × 4 bytes en píxeles del dispositivo. Una capa sobredimensionada para el fondo de un hero está bien. Decenas de tarjetas promovidas, cada una con su propia capa de degradado, pueden usar más memoria de la que ahorran en tiempo de pintado. Añade will-change a los elementos que de verdad se animan, no como regla general.

Cómo medir el rendimiento de un degradado

1. 1

   Activa paint flashing

   En las herramientas de desarrollo de Chrome, abre el panel Rendering y activa Paint flashing. Todo lo que parpadea en verde cuando nada debería estar cambiando se está repintando.

2. 2

   Graba una traza de Performance

   Graba unos segundos de scroll o de animación en reposo en el panel Performance. Fíjate en cuánto de cada fotograma se va en pintar y si se pierden fotogramas.

3. 3

   Limita la CPU

   Usa la limitación de CPU del panel Performance para simular un dispositivo más lento. Un hero que va fluido en un portátil rápido puede sufrir en un móvil de gama media.

4. 4

   Mira el panel Layers

   Comprueba cuántas capas de composición existen y cuánta memoria usan. Si hay muchas más de las esperadas, normalmente se abusa de will-change.

5. 5

   Prueba en el dispositivo real

   Termina en un móvil de verdad. El calor y el gasto de batería de una animación constante se pasan por alto fácilmente en un ordenador de sobremesa.

La guía de web.dev sobre rendimiento de renderizado explica el proceso que hay detrás de estas herramientas: estilo, layout, pintado y composición. Saber qué etapa activa tu degradado te dice si es barato.

Una lista de comprobación de rendimiento para degradados

• Usa degradados CSS para fondos sencillos y con capas; imágenes solo cuando el aspecto realmente las necesite.
• Mantén moderados los radios de desenfoque y evita backdrop-filter sobre áreas grandes que se desplazan.
• Sustituye background-attachment: fixed por una capa de posición fija.
• Anima transform u opacity, no background-position, en áreas grandes.
• Las animaciones lentas y ambientales pueden detenerse por completo para quienes usan movimiento reducido.
• Añade grano como una imagen pequeña en mosaico, no como un filtro SVG en vivo sobre un elemento grande; mira la textura de ruido en CSS.
• Mide antes y después con paint flashing y una grabación de Performance.