Performance en Interactions
Redactado por
Sebastian V. Fecha de publicación
27/07/2025
Tiempo de lectura
6 min
Tema
Interactions
¿Qué es el Performance en Interactions?
El Performance (Rendimiento) en animaciones es la capacidad técnica de tu página web de ejecutar todos los cambios visuales y matemáticos a una tasa de refresco inquebrantable de 60 Frames Per Second (FPS). Significa que el navegador tiene solo 16 milisegundos para calcular y pintar cada fotograma en la pantalla.
¿Para qué sirve?
De nada sirve crear la interacción más bella de la historia si corre a trompicones (Jank). En móviles o en computadoras menos potentes, las animaciones mal estructuradas causarán que la interfaz se congele, drene la batería rápidamente y dispare los ventiladores de la máquina.
- Fluidez profesional: Una animación a 60 FPS se siente pesada, natural y bien programada.
- Retención de usuarios: Los cuellos de botella visuales (lag) generan frustración instantánea en el usuario.
- Ahorro de recursos computacionales: Optimizar significa descargar de trabajo al CPU principal de la máquina del usuario.
¿Cómo se usan las propiedades seguras?
El secreto definitivo de las interacciones CSS: Animar el layout (width, height, margin, top/left) es terriblemente costoso (Reflow). El navegador debe recalcular toda la geometría de la página. Por el contrario, debes animar exclusivamente propiedades de Composición (Composite): transform y opacity. Estas propiedades son delegadas por el navegador directamente a la Tarjeta Gráfica (GPU), asegurando un rendimiento matemáticamente perfecto.
Consejo profesional
Para interacciones complejas, puedes preparar a la GPU por adelantado añadiendo 'will-change: transform;' al estado base del componente. Usa esto con moderación.
Comparativa: Animación CPU vs GPU
<div class="perf-container">
<!-- MAL: Anima layout properties -->
<div class="perf-box bad-box">
CPU (Width/Margin)
</div>
<!-- BIEN: Anima composite properties -->
<div class="perf-box good-box">
GPU (Transform)
</div>
</div>Haz hover en ambas cajas. La GPU es matemáticamente perfecta; la CPU hace reflow.
Errores comunes
Practica lo aprendido
Identifica qué propiedades activan Reflow o Repaint y optimiza tus animaciones.