Qué es Cumulative Layout Shift (CLS) y cómo solucionarlo

¿Qué es Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) representa la parte de "estabilidad visual" de los Core Web Vitals. El Cumulative Layout Shift (CLS) mide los movimientos de la página a medida que el contenido se renderiza o se muestra contenido nuevo en la página. Calcula una puntuación en función de qué parte de la página se mueve inesperadamente y hasta dónde se mueve. Estos cambios de contenido son muy molestos, haciendo que pierda su lugar en un artículo que ha empezado a leer o, peor aún, ¡haciendo que haga clic en el botón equivocado!

¿Qué es una buena puntuación de Cumulative Layout Shift (CLS)?

Una buena puntuación de CLS es cualquier valor entre 0 y 0.1. Si su puntuación de CLS está entre 0.1 y 0.25, necesita mejorar. Cualquier puntuación de CLS superior a 0.25 se considera deficiente. Para aprobar los Core Web Vitals para el Cumulative Layout Shift, al menos el 75% de sus visitantes deben tener una puntuación "buena" de CLS.

Importancia del CLS en el rendimiento web y la experiencia de usuario

Cumulative Layout Shift (CLS) está vinculado tanto al rendimiento web como a la experiencia de usuario (UX) porque impacta directamente en qué tan estable y predecible se siente una página web mientras se carga. He aquí por qué importa:

• UX, engagement y percepción de marca: Los cambios de diseño inesperados interrumpen el flujo del usuario, dificultando la búsqueda de información, hacer clic en botones e interactuar con la página según lo previsto. Esta frustración puede llevar a malas experiencias en las que los usuarios abandonan el sitio web por completo. La experiencia de usuario de un sitio web se refleja en la marca que hay detrás. Los cambios de diseño frecuentes pueden dar la impresión de un sitio web mal diseñado o mantenido, interrumpir el engagement del usuario y provocar una menor interacción y tasas de rebote potencialmente más altas.
• Accesibilidad: Los cambios de diseño pueden ser particularmente perjudiciales para los usuarios con discapacidades que dependen de tecnologías de asistencia o lectores de pantalla. Un diseño estable garantiza que todos puedan navegar e interactuar con el sitio web de manera efectiva.
• SEO y posicionamiento en búsquedas: Los Core Web Vitals son un factor de posicionamiento pequeño pero significativo en Google. Google, junto con otros motores de búsqueda, da prioridad a los sitios web que ofrecen una buena experiencia de usuario. CLS es una de las métricas de Core Web Vitals que Google tiene en cuenta a la hora de clasificar los sitios web. La optimización para CLS puede dar a su sitio web una ventaja competitiva en los resultados de búsqueda.

¿Cómo se mide el CLS?

El CLS de una página se puede medir con la Layout Instability API. El siguiente es un uso simple de esta API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Calculando el CLS

El CLS se calcula utilizando una fórmula simple pero elegante:

CLS = sum(impact-fraction * distance-fraction)

La fracción de impacto mide cuánto del contenido visible de la página se ha movido. La fracción de distancia mide hasta dónde se ha movido el contenido. Si, por ejemplo, el 50% de la página (cuánto) se ha movido el 25% (hasta dónde) del viewport de la página, la puntuación de CLS = 0.50 * 0.25 = 0.125.

Cambios de diseño esperados vs. inesperados

No todos los cambios de diseño son malos, solo los que no se esperan. Cuando hace clic en un enlace de "cargar más elementos", por ejemplo, esperaría que aparecieran más elementos en la página y que el contenido de la página se desplazara.

Es por eso que solo los cambios de diseño inesperados causarán una contribución al CLS. Por ejemplo, si un usuario hace clic en un botón y, en respuesta, se agrega nuevo contenido a la página (por ejemplo, un menú desplegable), el cambio de diseño se excluirá del CLS. Para ser precisos: los cambios de diseño que se producen dentro de los 500 milisegundos de la entrada del usuario se excluirán de los cálculos.

Sesiones de cambios de diseño

Cuando se introdujo por primera vez el CLS, algunos sitios fueron castigados injustamente con una mala puntuación de CLS. Por ejemplo, una página que implementa el desplazamiento infinito habría recibido el impacto del contenido recién agregado sumado a la puntuación total de CLS por cada nuevo desplazamiento. Es por eso que el CLS ahora se calcula en sesiones. Cada sesión tiene una duración máxima de 5 segundos y una brecha de 1 segundo entre los cambios de diseño. La sesión con la puntuación de CLS más alta se convertirá en la puntuación final de CLS.

Si, por ejemplo, durante la primera sesión la puntuación de CLS es 0.095, luego en la siguiente sesión el CLS es 0.15, y para la última sesión la puntuación de CLS es 0, la puntuación de CLS final será la más alta de las tres: 0.15.

CLS y los Core Web Vitals

Cumulative Layout Shift (CLS) es una métrica importante centrada en el usuario para medir la estabilidad visual. El Cumulative Layout Shift (CLS) es parte de los Core Web Vitals junto con el Largest Contentful Paint (LCP) y el Interaction to Next Paint (INP). Juntas, estas tres métricas miden el rendimiento de carga, la interactividad y la estabilidad visual.

Causas comunes de CLS

El origen de todos los cambios de diseño es básicamente el mismo. En algún momento, un elemento que se colocó encima de otro elemento ocupó más o menos espacio que antes. Esto se debe típicamente a una o más de estas causas:

Imágenes, videos e iframes sin dimensiones

Los medios sin tamaño son la causa principal de CLS en la web. Según el Web Almanac de 2025, el 62% de las páginas móviles tienen al menos una imagen sin dimensiones explícitas. Para ver la guía completa que cubre imágenes sin tamaño, videos, iframes, la trampa CSS width: auto, dirección de arte, desajustes de imágenes responsivas, lazy loading (carga diferida) e imágenes de marcador de posición, consulte Cómo las imágenes y los medios causan cambios de diseño.

Intercambios de fuentes web

Las fuentes web se descargan de Internet mientras la página se renderiza con una fuente de reserva (fallback). Cuando llega la fuente web, la diferencia de tamaño entre la fuente de reserva y la fuente final provoca un cambio de diseño. Solo el 11% de las páginas precargan fuentes web, lo que significa que la gran mayoría de la web es vulnerable al CLS por intercambio de fuentes.

La solución implica dos técnicas: hacer que la fuente de reserva coincida con la fuente web utilizando anulaciones de métricas @font-face (size-adjust, ascent-override), y acelerar la entrega de fuentes mediante el autoalojamiento (self-hosting) y la precarga de fuentes críticas. Consulte la guía para solucionar e identificar para ver ejemplos de código.

Animaciones y transiciones CSS

Las animaciones CSS que utilizan propiedades que desencadenan el diseño como top, left, width, y height hacen que el navegador vuelva a calcular el diseño en cada fotograma, produciendo CLS. Según el Web Almanac, el 39% de las páginas móviles tienen animaciones no compuestas que contribuyen al CLS. La solución es usar transform y opacity en su lugar, que se ejecutan en el compositor de la GPU y nunca desencadenan el diseño. Para ver el recorrido completo, consulte cambio de diseño causado por transiciones CSS.

Anuncios, incrustaciones y contenido inyectado dinámicamente

Los anuncios se cargan tarde y empujan el contenido hacia abajo. Los banners de consentimiento de cookies aparecen y desplazan la página. Las peticiones AJAX inyectan nuevo contenido sin reservar espacio. Todos estos son el mismo problema: aparece algo en la página que el navegador no conocía en el momento de renderizar. La solución es siempre reservar espacio con min-height y aislar el contenedor con contain: layout style. Para incrustaciones de terceros como YouTube y Google Maps, el patrón facade elimina el CLS por completo.

Cambios de diseño desencadenados por el desplazamiento

Esta es la causa de CLS que Lighthouse nunca detectará. Los encabezados que se ocultan al desplazarse, los efectos parallax y las barras de navegación que se encogen a menudo animan top o height, y el desplazamiento (scroll) no es una entrada excluyente en la especificación de Layout Instability. Cada cambio de diseño desencadenado por el desplazamiento cuenta para su puntuación de CLS. La solución: use transform: translateY() para cualquier animación desencadenada por el desplazamiento. Vea cómo las animaciones desencadenadas por desplazamiento causan CLS para ver el recorrido completo.

Encontrar y solucionar problemas de CLS

El diagnóstico de CLS sigue la misma metodología centrada en los datos de campo que los demás Core Web Vitals. Comience con Google Search Console o una herramienta RUM como CoreDash para confirmar qué páginas están afectadas y qué elementos se están moviendo. Luego, use Chrome DevTools o la extensión Core Web Vitals Visualizer para reproducir el problema localmente e identificar la causa raíz.

Para ver el proceso de diagnóstico completo paso a paso, tutoriales de herramientas, soluciones de código para cada causa y una lista de verificación de soluciones rápidas, consulte nuestra guía dedicada: Encontrar y solucionar problemas de Cumulative Layout Shift (CLS).

Estudio de caso: Rakuten 24 y el impacto empresarial del CLS

Rakuten 24, una importante plataforma japonesa de comercio electrónico, realizó un estudio detallado sobre el impacto del Cumulative Layout Shift en sus métricas empresariales. Al reducir el CLS en todas sus páginas de productos y categorías, Rakuten 24 logró resultados notables:

• Aumento del 53.37% en los ingresos por visitante para los usuarios que experimentaron un CLS bajo en comparación con aquellos con un CLS alto.
• Aumento del 33.13% en la tasa de conversión para la misma cohorte con CLS mejorado.
• Disminución del 15.20% en la tasa de rebote entre los visitantes con experiencias de página estables.

Estos números demuestran que el CLS no es simplemente una métrica técnica. La inestabilidad visual le cuesta ingresos directamente a las empresas al frustrar a los usuarios durante su viaje de navegación y compra. Cuando los elementos se mueven inesperadamente, los usuarios pierden confianza, hacen clic erróneamente y abandonan sus sesiones. El estudio de Rakuten 24 confirma que invertir en la optimización del CLS tiene un retorno de inversión medible, particularmente para los sitios de comercio electrónico donde cada interacción cuenta.

Lo que muestran los datos reales del CLS

Los datos de CoreDash muestran que CLS es el Core Web Vital con mejor rendimiento, con el 92.8% de las cargas de páginas en corewebvitals.io logrando una puntuación "buena" y prácticamente sin brecha de dispositivo entre móvil y escritorio. Tanto el escritorio (92.8% bueno) como el móvil (92.7% bueno) alcanzan puntuaciones de CLS casi perfectas, con un p75 de 0 en ambos tipos de dispositivos.

Esto contrasta con métricas como LCP e INP, donde el rendimiento móvil es significativamente peor que el de escritorio. CLS es excepcionalmente mejor en dispositivos móviles que en computadoras de escritorio en la web en general, que es lo contrario de cualquier otro Core Web Vital.

A nivel mundial, según el Web Almanac de 2025, el panorama es menos optimista:

• El 72% de los sitios web logran buenas puntuaciones de CLS en general, mientras que el 11% tiene un CLS deficiente.
• El 62% de las páginas móviles tienen al menos una imagen sin tamaño (frente al 66% en 2024, pero sigue siendo un gran contribuyente al CLS).
• El 39% de las páginas móviles tienen animaciones no compuestas que contribuyen al CLS.
• Solo el 11% de las páginas precargan fuentes web, lo que significa que la gran mayoría de los sitios son vulnerables a cambios de diseño por intercambio de fuentes.

El CLS ha mostrado una mejora constante año tras año a nivel mundial, pero los datos revelan que las imágenes sin tamaño y las animaciones no compuestas siguen siendo las dos causas más comunes. Abordar estos dos problemas por sí solo eliminaría los cambios de diseño para una gran parte de la web.

Guías relacionadas

Esta página central cubre el Cumulative Layout Shift a un alto nivel. Para obtener una guía detallada y práctica sobre cómo encontrar y solucionar problemas de CLS, explore estas guías dedicadas:

• Encontrar y solucionar problemas de CLS: La guía de diagnóstico completa paso a paso con tutoriales de herramientas, soluciones de código para cada causa y una lista de verificación de soluciones rápidas.
• Cómo las imágenes y los medios causan cambios de diseño: La guía definitiva de CLS a partir de imágenes sin tamaño, videos, iframes, dirección de arte, imágenes responsivas, lazy loading (carga diferida) y marcadores de posición.
• Solucionar el cambio de diseño causado por el tamaño automático de las imágenes: Un recorrido completo para agregar dimensiones adecuadas a imágenes y contenedores responsivos.
• Solucionar el cambio de diseño causado por las transiciones CSS: Identifique y reemplace las animaciones CSS que desencadenan el diseño con alternativas compuestas.
• Animaciones desencadenadas por el desplazamiento y CLS: La causa de CLS que Lighthouse no puede detectar, y cómo solucionarla.
• Autoalojar Google Fonts: Reduzca el CLS de carga de fuentes autoalojando fuentes con estrategias adecuadas de font-display y precarga.
• Asegurar que el texto permanezca visible durante la carga de la fuente web: Configure font-display y anulaciones de métricas de fuentes para eliminar los cambios de diseño por intercambio de fuentes.
• Construir un widget de chat con Core Web Vitals perfectos: Un estudio de caso sobre la implementación de widgets de terceros sin introducir regresiones de CLS, INP o LCP.

Para obtener una descripción general completa de todas las métricas de Core Web Vitals y estrategias de optimización, visite la descripción general de Core Web Vitals o utilice la lista de verificación definitiva de Core Web Vitals para auditar su sitio.