01 Capítulo 1 · Lección 11

Performance en Transitions

Redactado por
Author Sebastian V.
Fecha de publicación

08/04/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

¿Por qué mi web se siente lenta al hacer hover?

El navegador dibuja la web en pasos: primero calcula la estructura (Layout), luego la pinta (Paint), y por último combina las capas visuales (Composite). Cada vez que transicionas una propiedad, fuerzas al navegador a hacer algunos de estos pasos repetidamente (a 60 fotogramas por segundo).

Propiedades Costosas (El cuello de botella)

Si animas el width, el margin o la posición (left/top), estás alterando la geometría de la página. El navegador tiene que recalcular la posición no solo de ese elemento, sino de todos los elementos de la página en cada fotograma. Esto exige la CPU y puede causar tirones (jank).

Las 2 Propiedades de Oro (Hardware Acceleration)

La solución es usar propiedades que se procesan directamente en la tarjeta de video del dispositivo (GPU), sin alterar la geometría de la página:

  • ✦ transform: Mover (translate), escalar (scale), rotar (rotate). Al navegador le cuesta cero esfuerzo.
  • ✦ opacity: Desvanecer cosas es instantáneo en la GPU.

Siempre que sea posible, debes fingir movimientos y tamaños usando transform en lugar de manipular la estructura del layout.

Consejo profesional

Si tienes una animación compleja con transform que tartamudea levemente, puedes aplicar will-change: transform; al elemento original. Esto le avisa al navegador con antelación que lo pase a la GPU.

GPU vs CPU

> _ 
<div class="card-gpu">GPU (Rápido)</div>
<div class="card-cpu">CPU (Lento)</div>
> _
GPU (Rápido)
CPU (Lento)

Aunque el resultado visual parece idéntico, por debajo ocurren cosas distintas. El primero se procesa en la tarjeta de video. El segundo hace trabajar a la CPU del dispositivo.

Errores comunes

01
Animar box-shadow en todo momento Transicionar sombras amplias consume demasiados recursos. Una técnica avanzada es animar la opacidad de un pseudo-elemento con la sombra ya dibujada.
02
Uso abusivo de will-change Poner will-change: all a todos los elementos saturará la memoria RAM de los dispositivos móviles. Úsalo como último recurso.

Practica lo aprendido

Optimiza tus animaciones para que funcionen fluidas hasta en móviles antiguos.

01 Usa "transform" en lugar de mover con top, left, margin o padding.
02 Usa "opacity" en lugar de "color" o "background" para desvanecimientos extremos en móviles.
03 No animes "width" o "height" de contenedores grandes, recorta el layout completo.
04 Usa "will-change: transform" si notas tartamudeo, pero no lo uses en todos lados.
05 Apunta siempre a alcanzar los 60 fotogramas por segundo (fps).