Cómo la animación afecta a los Core Web Vitals (LCP, INP y CLS)
Cómo las animaciones y los tiempos de ejecución de las animaciones afectan a LCP, INP y CLS, y formas prácticas de mantener el movimiento rico sin perjudicar a Core Web Vitals.
Idea clave
La animación puede dañar los tres Core Web Vitals: archivos de animación pesados y tiempos de ejecución pueden retrasar LCP, la animación impulsada por JavaScript puede bloquear el hilo principal y empeorar INP, y animar propiedades de diseño o cargar animaciones sin espacio reservado causa CLS. Mantenga el contenido principal independiente de la animación, realice tiempos de ejecución de carga diferida en la mitad inferior de la página, anime la transformación y la opacidad y reserve espacio para cada elemento animado.
Las tres métricas y sus objetivos
Core Web Vitals de Google, documentado en web.dev, mide la carga (Pintura con contenido más grande, buena en 2,5 segundos o menos), capacidad de respuesta (Interacción con la siguiente pintura, buena en 200 milisegundos o menos) y estabilidad visual (Cambio de diseño acumulativo, buena en 0,1 o menos), medida en el percentil 75 de las cargas de páginas reales.
LCP: no hagas que el héroe espere la animación
Si el elemento más grande en la pantalla es una animación que necesita un tiempo de ejecución y un archivo para cargar primero, LCP espera ambos. Primero, renderice una imagen estática o texto real, luego mejórelo y cargue tiempos de ejecución de animación solo para el contenido cerca o debajo de la página cuando sea necesario.
INP: mantiene libre el hilo principal
INP mide la rapidez con la que la página responde a toques y clics. Web.dev explica que las tareas largas en el hilo principal retrasan la respuesta a la entrada. La animación que ejecuta JavaScript complejo en cada cuadro, o muchas animaciones que comienzan a la vez, pueden causar exactamente eso. Prefiere las transiciones CSS en transformación y opacidad para efectos simples, pausa las animaciones fuera de la pantalla y evita comenzar un trabajo pesado en respuesta a una interacción.
CLS: reservar espacio y animar transformar
Web.dev recomienda usar la propiedad de transformación CSS para animar sin activar cambios de diseño: escalar en lugar de cambiar el ancho y el alto, traducir en lugar de cambiar hacia arriba o hacia la izquierda. Asigne a cada elemento animado, incluidas las animaciones basadas en lienzo, dimensiones fijas antes de que se cargue, para que la página no salte cuando aparezca.
Tiempos de ejecución del lienzo
Los tiempos de ejecución basados en lienzo, como el renderizador de lienzo de Lottie, Rive y ExodeUI, dibujan fuera del DOM, lo que evita el trabajo de diseño por cuadro pero agrega un tiempo de ejecución para descargar y ejecutar. Mida las ventajas y desventajas de su página: cargue de forma diferida el tiempo de ejecución, dimensione el lienzo en CSS desde el principio y pruebe en teléfonos de gama media.
Principios clave para recordar
- Objetivos: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 en el percentil 75
- No haga que el elemento LCP dependa de un tiempo de ejecución de animación
- Mantenga el hilo principal libre durante las interacciones.
- Animar transformación y opacidad; reservar espacio para elementos animados
- Tiempos de ejecución de carga diferida y pruebas en teléfonos de gama media
Preguntas frecuentes
Fuentes
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev