Animar un sitio web sin ralentizarlo

Un titular que se coloca, fotos que se deslizan al llegar, un fondo que respira: una página animada retiene la mirada. También puede volverse lenta, dar tirones, o saltar bajo el dedo justo cuando se apunta a un botón. La diferencia depende de unas pocas decisiones técnicas, siempre las mismas.

Aquí están, con lo que mide Google. Lo dice él mismo: la pertinencia del contenido va primero, y una buena experiencia en la página puede ayudar a desempatar páginas igual de útiles (Google Search Central, 2026).

Lo que el navegador anima sin esfuerzo

Para mostrar una página, el navegador hace tres cosas: calcula el lugar de cada elemento (la maquetación), dibuja los píxeles (el pintado), y luego ensambla las capas (la composición). Una animación que toca la maquetación rehace los tres pasos en cada fotograma; una animación que solo toca la composición se salta los dos primeros.

web.dev lo resume: anima transform y opacity, y evita lo que provoca maquetación o pintado. En la práctica:

• para deslizar un elemento, muévelo con transform (translate), en lugar de cambiar top o left;
• para agrandarlo, usa transform (scale), en lugar de su anchura y su altura;
• para hacerlo aparecer, juega con opacity;
• evita animar una sombra: obliga al navegador a volver a pintar en cada fotograma (web.dev).

La propiedad will-change prepara un elemento para moverse, pero crea una capa que también tiene un coste. web.dev aconseja usarla solo cuando se ha observado un problema.

El defecto está extendido: el 40 % de las páginas móviles contiene al menos una animación «no compuesta», que no puede conformarse con la composición (Web Almanac 2025).

Que nada salte: el CLS

El Cumulative Layout Shift (CLS) mide los elementos que se mueven sin que el visitante lo pida: el párrafo que baja mientras lo lees, el botón que se escapa bajo el dedo. Google lo considera bueno a 0,1 o menos, malo por encima de 0,25, cuando tres visitas de cada cuatro alcanzan el umbral (el percentil 75, web.dev). El 81 % de los sitios alcanza el umbral bueno en móvil (Web Almanac 2025).

Las animaciones entran por tres puertas:

1. Cambiar top, left, width o height de un elemento lo desplaza, empuja a menudo a sus vecinos, y cuenta como un desplazamiento. Una animación con transform no cuenta (web.dev).
2. Hacer aparecer un bloque que no tenía sitio reservado: un banner arriba de la página, una imagen sin dimensiones. Reserva el sitio de antemano, con la anchura y la altura de la imagen o una proporción.
3. Animar al desplazarse. Los desplazamientos que ocurren menos de medio segundo después de un clic, un toque o una tecla se perdonan; desplazarse no forma parte de ellos. Un bloque que crece mientras se recorre la página cuenta, pues, por completo.

La regla cabe en una frase: un elemento que aparece lo hace en su sitio, con un fundido o deslizándose con transform, sin cambiar de tamaño.

Responder rápido: el INP

El Interaction to Next Paint (INP) mide el tiempo entre un clic, un toque o una tecla y el siguiente fotograma en pantalla, durante toda la visita. Google lo considera bueno a 200 milisegundos o menos, malo por encima de 500 (web.dev).

El culpable habitual es el hilo principal del navegador, el que ejecuta el JavaScript y responde a los gestos. Ocupado con tareas largas, retrasa la respuesta cuando el visitante toca un botón (web.dev). Un script que recalcula la posición de cada elemento en cada movimiento de la rueda, para saber qué animar, es el ejemplo clásico. MDN lo recuerda: estos cálculos se ejecutan en el hilo principal, y una sola rutina de este tipo puede bastar para ralentizar la página.

Para lanzar una animación cuando un elemento entra en la pantalla, la API Intersection Observer avisa al script en el momento adecuado, sin hacerle trabajar en cada movimiento (MDN).

El teléfono es el verdadero banco de pruebas: el 97 % de los sitios tiene un buen INP en ordenador, solo el 77 % en móvil (Web Almanac 2025). Prueba en un teléfono modesto, además del tuyo.

Las animaciones ligadas al desplazamiento en CSS

El CSS sabe ya ligar una animación al desplazamiento, sin una línea de JavaScript. La propiedad animation-timeline acepta dos referencias (MDN):

• scroll() sigue el avance en la página: una barra de lectura que se llena, un fondo que cambia de tono;
• view() sigue el paso de un elemento por la pantalla: una foto que se descubre al entrar, un titular que se coloca.

Su interés es la fluidez. Chrome comparó una barra de progreso escrita en JavaScript y la misma en CSS, con carga elevada: la versión JavaScript daba tirones, la versión CSS seguía el desplazamiento (Chrome for Developers, 2023).

Su límite es la compatibilidad. A 22 de octubre de 2026, MDN las sigue clasificando como de disponibilidad limitada: Chrome y Edge las admiten desde julio de 2023, Safari desde su versión 26 de septiembre de 2025, y Firefox las prepara (su versión 159, según los datos de compatibilidad de MDN). Trátalas como un extra:

• la página debe estar completa y ser legible sin ellas;
• prueba la compatibilidad con @supports antes de aplicarlas;
• colócalas bajo la condición prefers-reduced-motion: no-preference, para respetar a los visitantes que han pedido menos animación (ver un movimiento accesible).

El vídeo antes que el GIF

El GIF animado es un formato antiguo y pesado. En el ejemplo de web.dev, un GIF de 3,7 MB se convierte en un vídeo MP4 de 551 KB, o un WebM de 341 KB, para la misma animación. Un vídeo corto que se reproduce solo, en bucle, sin sonido y dentro de la página reproduce el efecto del GIF por una fracción del peso.

Para un fondo de vídeo, algunas reglas más:

• una imagen fija, la que se muestra antes de la película. Para un vídeo, Google toma para el Largest Contentful Paint el primero de dos momentos: la imagen fija cargada o el primer fotograma de la película, y considera buena una visualización en 2,5 segundos como mucho (web.dev);
• ninguna pista de sonido: un fondo no la necesita;
• una anchura adaptada a la pantalla que lo recibe, y una codificación cuidada;
• un bucle corto, discreto, que no pelea con el titular.

Probar antes de publicar

Las herramientas para desarrolladores de Chrome muestran lo que cuesta: el panel Rendimiento graba la animación, el resaltado del pintado revela lo que se vuelve a dibujar, y el contador de fotogramas señala los fotogramas perdidos (web.dev). Ralentiza el procesador en estas herramientas para ver la página como la vería un teléfono de gama de entrada.

Los umbrales de Google se miden en visitas reales, en el percentil 75: una prueba en tu ordenador da una primera idea, y el veredicto viene de tus visitantes. El detalle de las tres medidas está en nuestro artículo sobre las Core Web Vitals.

En el estudio 29webs, el vídeo de fondo se vuelve a codificar y se aligera, sin pista de sonido, y va acompañado de una imagen fija; se desvanece si los visitantes han pedido menos animación, y la imagen fija se queda.

En resumen: anima transform y opacity, reserva el sitio de lo que llega, deja libre el hilo principal para los clics, y guarda las animaciones ligadas al desplazamiento en CSS como un extra. Sustituye los GIF por vídeo, y da siempre una imagen fija a un fondo animado.