Cumulative Layout Shift (CLS): estabilidad visual

Cumulative Layout Shift (CLS) es la métrica de las Core Web Vitals que mide lo estable o inestable que se percibe una página mientras se carga y se usa. Cuando el contenido salta porque una imagen sin espacio reservado se carga más tarde o un banner de cookies se inserta, el usuario hace clic en el botón equivocado. El CLS cuantifica exactamente esa experiencia. Este artículo explica cómo se calcula la puntuación, qué causas tienen los cambios de diseño, cómo estabilizar imágenes, fuentes web, banners de consentimiento y componentes de Next.js, y por qué el CLS sigue siendo ante todo una señal de UX para usuarios humanos, mientras que los rastreadores de IA se fijan sobre todo en el HTML renderizado en el servidor.

Por qué la estabilidad visual importa a las empresas

Desde la introducción de las Core Web Vitals, el CLS es, junto con Largest Contentful Paint (LCP) e Interaction to Next Paint (INP), una señal oficial de Page Experience. INP es el miembro más reciente: el 12 de marzo de 2024 se convirtió en Core Web Vital y sustituyó a FID (fuente internacional, Google). El CLS forma parte del grupo desde el principio y es la única de las tres métricas que no describe la velocidad ni la capacidad de respuesta, sino la calma visual de la página.

La palanca de negocio es medible. En un test A/B de la tienda japonesa Rakuten 24 documentado por Google, la variante optimizada mejoró el valor de CLS en un 92,72 por ciento y aumentó a la vez los ingresos por visitante en un 53,37 por ciento y la tasa de conversión en un 33,13 por ciento (caso de estudio internacional).

Yahoo! JAPAN News redujo el CLS en datos de laboratorio de aproximadamente 0,2 a 0 y registró después un 15,1 por ciento más de páginas vistas por sesión, una duración de sesión un 13,3 por ciento mayor y una tasa de rebote 1,72 puntos porcentuales más baja (caso de estudio internacional). Estos efectos encajan con la conclusión más amplia de que un tiempo de carga móvil solo 0,1 segundos más rápido aumenta la tasa de conversión en retail un 8,4 por ciento y el gasto un 9,2 por ciento (estudio internacional, Deloitte y 55 por encargo de Google).

Para el mercado austriaco esto es relevante porque el uso es casi totalmente móvil y conectado. A principios de 2025, la penetración de internet en Austria era del 95,3 por ciento, con 8,69 millones de usuarios de internet y 13,4 millones de líneas móviles, es decir, el 147 por ciento de la población (Austria). Los cambios de diseño afectan especialmente a los smartphones, donde los viewports más pequeños y las conexiones más lentas hacen más visible cada salto.

Cómo se calcula la puntuación de CLS

El CLS mide la ventana de sesión con la suma más alta de cambios de diseño inesperados. Un cambio de diseño se produce cuando un elemento visible cambia su posición inicial entre dos fotogramas renderizados sin que lo haya provocado una interacción del usuario. La puntuación de cada desplazamiento resulta de dos factores.

• Impact Fraction: la proporción del viewport visible afectada por los elementos desplazados. Si un bloque que ocupa la mitad superior de la pantalla se mueve hacia abajo, una gran parte del viewport se ve afectada.
• Distance Fraction: la distancia que recorre el elemento más inestable, dividida entre la dimensión mayor del viewport. Describe hasta dónde salta el contenido.

La puntuación de cambio de diseño es el producto de la Impact Fraction y la Distance Fraction. El CLS no suma ingenuamente todos los valores individuales a lo largo de la vida útil de la página, sino que trabaja con ventanas de sesión: los desplazamientos se agrupan en ventanas, y cada ventana dura 5 segundos como máximo con un intervalo de 1 segundo como mucho entre desplazamientos. El valor de la ventana más alta cuenta como CLS de la página. Así se evita que las sesiones largas produzcan valores artificialmente malos.

Los umbrales están claramente definidos. Según Google, las páginas deberían aspirar a un valor de CLS de 0,1 o menos; los valores superiores a 0,25 se consideran malos, medidos en el percentil 75 de las cargas de página por separado para móvil y escritorio (fuente internacional, Google). Los valores entre 0,1 y 0,25 indican que hay margen de mejora. El percentil 75 significa que tres de cada cuatro cargas de página deben alcanzar el objetivo, no solo la media.

En dispositivos móviles, el CLS es la que mejor resultado obtiene de las tres Core Web Vitals. Según el HTTP Archive Web Almanac, en 2025 el 72 por ciento de las páginas de escritorio y el 81 por ciento de las páginas móviles alcanzan un buen valor de CLS (estudio internacional), mientras que en móvil solo el 62 por ciento logra un buen LCP y el 77 por ciento un buen INP. El avance es claro: la proporción de páginas móviles con buen CLS pasó del 60 por ciento en 2020 al 79 por ciento en 2024 (estudio internacional).

Las causas más frecuentes de los cambios de diseño

Casi todos los problemas de CLS se reducen a unos pocos patrones. Si los conoces, das rápido con los culpables.

• Imágenes, vídeos e iframes sin dimensiones: sin width y height o una relación de aspecto definida, el navegador no conoce la altura hasta que se ha cargado el archivo. Hasta entonces, el elemento no ocupa espacio; después, empuja hacia abajo el resto del contenido.
• Contenido insertado dinámicamente: los anuncios, los embeds, los banners de newsletter y, sobre todo, los diálogos de consentimiento suelen aparecer después del primer renderizado y apartan el contenido existente.
• Intercambio de fuentes web (FOUT/FOIT): el navegador muestra primero una fuente de respaldo y la sustituye por la fuente web cargada. Si las métricas tipográficas difieren, cambia el flujo del texto y el contenido se desplaza.
• Componentes de carga tardía: los widgets cargados en el cliente, los skeleton loaders con una altura incorrecta o los contenidos que solo aparecen tras la hidratación desplazan el resto de la página.

Las imágenes son la causa más frecuente y la más fácil de evitar. Según el Web Almanac 2025, el 62 por ciento de las páginas móviles y el 65 por ciento de las de escritorio no definen las dimensiones de al menos una imagen (estudio internacional). Es decir, la mayoría de las páginas deja que el navegador adivine el tamaño de al menos una imagen.

Estabilizar imágenes y contenidos multimedia

La medida individual más eficaz es comunicar al navegador de antemano las dimensiones de cada elemento multimedia. Así reserva el espacio antes de que se cargue el archivo.

• Definir width y height como atributos: los navegadores modernos calculan la relación de aspecto a partir de los atributos HTML width y height y mantienen el espacio libre aunque la imagen se escale de forma responsive con CSS. Es la palanca más rápida.
• Usar aspect-ratio en CSS: para contenedores cuya proporción es fija pero cuyas medidas concretas en píxeles varían, aspect-ratio reserva el espacio con independencia del archivo cargado.
• min-height para contenidos desconocidos: cuando la altura final no está clara, por ejemplo en listas que se cargan más tarde, una altura mínima razonable evita que el contenedor colapse.
• Usar bien el lazy loading: la carga diferida ahorra ancho de banda, pero nunca debe hacerse sin espacio reservado. Una imagen con lazy loading sin dimensiones es una de las causas de CLS más frecuentes, porque aparece de golpe justo cuando el usuario hace scroll.

Integrar fuentes web sin cambios de diseño

Las fuentes web están prácticamente en todas partes y, por tanto, son un riesgo sistemático de CLS. Según el Web Almanac 2025, el 87 por ciento de las páginas móviles usa al menos una fuente web, pero solo entre el 15 y el 16 por ciento de las páginas recurre a la precarga de fuentes (estudio internacional). El Almanac lo relaciona expresamente con el CLS: cuando el navegador sustituye una fuente de respaldo por la fuente web cargada, cambian el tamaño y la anchura del texto, y el contenido se desplaza.

• Elegir font-display con criterio: el valor swap muestra el texto de inmediato con la fuente de respaldo y la sustituye después, lo que evita el FOIT pero puede generar desplazamientos por FOUT. optional evita por completo el intercambio pasado un breve intervalo y, para la estabilidad, suele ser la opción más tranquila.
• Ajustar las métricas de respaldo: con size-adjust, ascent-override y descent-override en una regla @font-face, la fuente de respaldo se puede adaptar para que ocupe el mismo espacio que la fuente web. Así el intercambio se vuelve prácticamente invisible.
• Precargar las fuentes críticas: un hint de preload específico para la fuente más importante hace que esté disponible pronto. Dado lo poco extendida que está esta práctica, es una ventaja sencilla frente a la competencia.
• Preferir el autoalojamiento: con fuentes alojadas en tu propio servidor desaparece la conexión adicional con proveedores externos. La fuente está disponible antes y se acorta el intervalo en el que puede producirse un desplazamiento. En la región DACH (Alemania, Austria y Suiza), el autoalojamiento tiene además una ventaja en materia de RGPD, porque no se transmiten direcciones IP a servicios de fuentes externos.

El CLS en Next.js y frameworks de JavaScript

Los frameworks modernos traen sus propias trampas de CLS, pero también las herramientas adecuadas. Lo decisivo es que el contenido renderizado en el servidor conserve su geometría final en cuanto empieza la hidratación.

• Usar next/image: el componente obliga a indicar las dimensiones o fill con un contenedor definido y, así, reserva el espacio automáticamente. Esto elimina ya en la fase de desarrollo la causa de CLS más habitual relacionada con imágenes.
• Recurrir a next/font: next/font carga las fuentes en tiempo de compilación como autoalojadas, elimina las peticiones externas y calcula automáticamente las métricas de respaldo, de modo que el cambio de fuente no provoca ningún desplazamiento.
• Construir skeleton loaders a medida: los placeholders deben tener exactamente la altura del contenido posterior. Un skeleton más pequeño que el bloque final desplaza la página al sustituirse igual que si no hubiera ningún placeholder.
• Tener en cuenta SSR, streaming e hidratación: el renderizado en el servidor y el streaming entregan pronto un HTML estable. Los problemas surgen cuando el contenido cargado en el cliente aparece encima o entre bloques ya visibles. Ese contenido debe ir abajo o en áreas reservadas de forma fija.

Banners de consentimiento y anuncios de terceros sin CLS

En el ámbito del RGPD, el diálogo de consentimiento es prácticamente inevitable y una de las causas de CLS más frecuentes, porque aparece pronto y en un lugar destacado. Los espacios publicitarios se comportan de forma parecida, ya que a menudo su tamaño no se conoce hasta el tiempo de ejecución.

• Banner como superposición, no en el flujo: un diálogo de consentimiento que se muestra como superposición fija sobre el contenido no desplaza nada. En cambio, un banner que se inserta arriba en el flujo del documento y empuja todo hacia abajo genera un gran desplazamiento.
• Dimensionar de antemano los espacios publicitarios: reserva para cada espacio publicitario la altura prevista mediante slot sizing o un contenedor con aspect-ratio. Si no se carga ningún anuncio, el espacio debería colapsar de forma controlada, sin que el contenido salte.
• transform en lugar de propiedades que alteran el layout: anima las apariciones y desapariciones con transform y opacity. Estas propiedades las procesa el compositor y no provocan reflow, a diferencia de top, left, width o height.

Animaciones y renderizado eficientes

Las animaciones no compuestas son una causa de CLS infravalorada. Según el Web Almanac 2024, el 39 por ciento de las páginas móviles y el 42 por ciento de las de escritorio usan animaciones no compuestas (estudio internacional), que recalculan estilos, vuelven a maquetar el documento y redibujan píxeles.

• Animar solo transform y opacity: estas propiedades se ejecutan en la GPU y no modifican el layout. Las animaciones de propiedades geométricas como width, height o margin obligan al navegador a hacer reflow y pueden desplazar elementos vecinos.
• Usar content-visibility de forma selectiva: con content-visibility: auto, el navegador omite el renderizado de las áreas no visibles. En combinación con contain-intrinsic-size se mantiene el espacio reservado, de modo que no se produce ningún desplazamiento cuando el área entra en el viewport al hacer scroll.
• Usar CSS containment: la propiedad contain limita los efectos de layout, estilo y pintado de un elemento. Así, los cambios dentro de un contenedor no afectan al resto de la página.

Medir el CLS: laboratorio frente a campo

El CLS se puede medir en dos niveles que se complementan y a menudo difieren. Los datos de laboratorio muestran valores reproducibles en condiciones controladas; los datos de campo muestran la experiencia real de usuarios reales.

• Datos de campo (CrUX): el Chrome UX Report recopila datos reales anonimizados y es la base de la evaluación oficial en el percentil 75. El informe de Core Web Vitals de Google Search Console y PageSpeed Insights se basan en ellos.
• Datos de laboratorio (Lighthouse): Lighthouse y la parte de laboratorio de PageSpeed Insights simulan una carga de página. Son ideales para depurar, pero solo registran la carga inicial, no los desplazamientos posteriores causados por interacciones.
• Real User Monitoring con web-vitals.js: la biblioteca oficial de JavaScript mide el CLS directamente en el navegador de usuarios reales durante toda la vida útil de la página y puede enviar los valores a un sistema de analítica. Esto cierra la brecha entre el laboratorio y CrUX y hace visibles también los desplazamientos tardíos.

La diferencia más importante: los datos de laboratorio suelen medir solo la carga, pero el CLS se genera durante toda la vida útil de la página. Una página puede mostrar un CLS perfecto en la prueba de Lighthouse y aun así salir mal parada en el campo, por ejemplo porque un banner se inserta tras varios segundos o al producirse una interacción.

Errores frecuentes al optimizar el CLS

Hay patrones recurrentes que restan estabilidad, pero se pueden evitar de forma específica.

• Mirar solo los datos de laboratorio: si solo revisas Lighthouse, pasas por alto los desplazamientos tardíos causados por banners de consentimiento, anuncios o interacciones, que solo aparecen en el campo.
• Servir imágenes sin dimensiones: pese a que la solución es sencilla, según HTTP Archive esto sigue afectando a la mayoría de las páginas (62 por ciento en móvil, 65 por ciento en escritorio).
• Insertar el banner de consentimiento en el flujo del documento: un banner que empuja el contenido suele generar el mayor desplazamiento individual de toda la página.
• Animar propiedades geométricas: las animaciones de width, height, top o left provocan reflows y desplazan elementos vecinos.
• Skeleton loaders con una altura incorrecta: un placeholder que no coincide con la altura final desplaza la página al sustituirse igual que si no hubiera ningún placeholder.

CLS, Page Experience y el contexto GEO

El CLS forma parte de la Page Experience y actúa como señal complementaria, no como palanca de posicionamiento por sí sola. Con una relevancia comparable, una mejor experiencia de usuario puede inclinar la balanza, por eso el CLS se describe a menudo como criterio de desempate. Junto con LCP e INP se obtiene una imagen completa de la calidad percibida: LCP mide la rapidez con la que aparece el contenido principal; INP, la capacidad de respuesta de la página, y CLS, lo estable que se mantiene. La caché de retroceso y avance (bfcache) también influye en el CLS: el navegador restaura las páginas aptas para la bfcache, al navegar hacia atrás y hacia delante, completamente cargadas y sin nuevos cambios de diseño (fuente internacional, Google). Esto mejora además el CLS en el campo.

En el contexto de los rastreadores de IA y la Generative Engine Optimization (GEO), conviene situar bien el tema. El CLS es una señal visual para usuarios humanos que surge en el navegador mientras se calculan el layout y los píxeles. Los rastreadores de IA, en cambio, procesan sobre todo el HTML renderizado en el servidor y su estructura semántica. Un valor de CLS alto no empeora directamente la visibilidad en las respuestas de IA, porque un rastreador no percibe saltos visuales. La relación es indirecta: las medidas contra el CLS, como un server-side rendering limpio, un HTML estable desde el principio y renunciar a contenidos cargados exclusivamente en el cliente, mejoran a la vez la legibilidad para máquinas de cara a los rastreadores de IA. El CLS sigue siendo así ante todo una señal de UX para personas, mientras que la misma disciplina técnica beneficia también a la visibilidad GEO.

Más recursos y conclusión

El CLS mide la estabilidad visual de una página y debería situarse en 0,1 o menos en el percentil 75. La mayor palanca es también la más sencilla: servir imágenes, vídeos e iframes con dimensiones, porque son la causa más frecuente y la más fácil de evitar. Las fuentes web deben estar autoalojadas e integrarse con métricas de respaldo ajustadas y una estrategia de font-display; los banners de consentimiento y los anuncios necesitan espacio reservado o una superposición, y las animaciones deberían usar exclusivamente transform y opacity. En Next.js, next/image y next/font hacen automáticamente gran parte de este trabajo.

Los siguientes pasos razonables son: revisar el informe de Core Web Vitals de Search Console en busca de problemas de CLS, configurar Real User Monitoring con web-vitals.js para captar los desplazamientos tardíos en el campo y comprobar sistemáticamente que todos los elementos multimedia y los espacios de consentimiento y publicidad tengan espacio reservado. Como los efectos de negocio en los casos de estudio documentados son considerables, optimizar el CLS se traduce directamente en conversión e ingresos, con independencia del posicionamiento.