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

¿Qué es el Cumulative Layout Shift (CLS)?

El 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 nuevo contenido en la página. Calcula una puntuación basada en cuánto contenido de la página se mueve inesperadamente y qué tan lejos se mueve. Estos cambios de contenido son muy molestos, haciendo que pierdas tu lugar en un artículo que habías empezado a leer o, peor aún, haciendo que hagas 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 tu puntuación de CLS está entre 0,1 y 0,25, necesita mejora. Cualquier puntuación de CLS superior a 0,25 se considera deficiente. Para aprobar los Core Web Vitals en lo que respecta al Cumulative Layout Shift, al menos el 75% de tus visitantes necesitan tener una puntuación de CLS "buena".

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

El Cumulative Layout Shift (CLS) está vinculado tanto al rendimiento web como a la experiencia de usuario porque impacta directamente en cuán estable y predecible se siente una página web mientras se carga. Aquí explicamos por qué es importante:

• UX, engagement y percepción de marca: Los cambios de diseño inesperados interrumpen el flujo del usuario, dificultando encontrar información, hacer clic en botones e interactuar con la página como se pretende. Esta frustración puede llevar a malas experiencias donde los usuarios abandonan completamente el sitio web. La experiencia de usuario de un sitio web se refleja en la marca detrás de él. Los cambios de diseño frecuentes pueden dar la impresión de un sitio web mal diseñado o mal mantenido, interrumpir el engagement del usuario y llevar a una disminución de la interacción y potencialmente mayores tasas de rebote.
• 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 buscadores: Los Core Web Vitals son un factor de posicionamiento pequeño pero significativo en Google. Google, junto con otros motores de búsqueda, prioriza los sitios web que ofrecen una buena experiencia de usuario. El CLS es una de las métricas de Core Web Vitals que Google considera al posicionar sitios web. Optimizar el CLS puede darle a tu 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});

Cálculo del CLS

El CLS se calcula usando 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 desplazado. La fracción de distancia mide qué tan lejos se ha desplazado el contenido. Si, por ejemplo, el 50% de la página (cuánto) se ha desplazado un 25% (qué tan lejos) 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 esperas. Cuando haces clic en un enlace de "cargar más elementos", por ejemplo, esperarías que aparecieran más elementos en la página y que el contenido de la página se desplazara.

Por eso 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 como respuesta se añade nuevo contenido a la página (por ejemplo, un menú desplegable), el cambio de diseño será excluido del CLS. Para ser precisos: los cambios de diseño que ocurren dentro de los 500 milisegundos posteriores a una interacción del usuario serán excluidos de los cálculos.

Sesiones de cambio de diseño

Cuando se introdujo el CLS por primera vez, algunos sitios fueron injustamente penalizados con una mala puntuación de CLS. Por ejemplo, una página que implementa scroll infinito habría obtenido el impacto del contenido recién añadido sumado a la puntuación total de CLS con cada nuevo desplazamiento. Por eso el CLS ahora se calcula en sesiones. Cada sesión tiene una duración máxima de 5 segundos y un intervalo de 1 segundo entre 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 en la última sesión la puntuación de CLS es 0, la puntuación final de CLS será la más alta de las tres: 0,15.

CLS y los Core Web Vitals

El Cumulative Layout Shift (CLS) es una métrica importante y centrada en el usuario para medir la estabilidad visual. El Cumulative Layout Shift (CLS) forma 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.

Cómo medir problemas de CLS

1. Usa Lighthouse para encontrar Cumulative Layout Shifts

El método más fácil para encontrar cambios de diseño es usar Lighthouse en tu propio navegador Chrome. Simplemente ejecuta una auditoría de Lighthouse haciendo clic derecho en cualquier parte de la página. Luego selecciona inspeccionar elemento, selecciona la pestaña Lighthouse en la consola abierta y ejecuta la auditoría.

Los resultados de la auditoría mostrarán la puntuación del Cumulative Layout Shift (CLS). Desplázate hasta Diagnósticos y expande la información del Cumulative Layout Shift para ver qué nodos están causando el cambio de diseño.

Para ser honesto, nunca uso realmente este método. La falta de detalles sobre la distancia exacta del cambio de diseño hace que estos resultados sean más difíciles de interpretar.

2. Usa el CLS Visualizer para encontrar Cumulative Layout Shifts

El CLS Visualizer es una extensión de Chrome escrita por mí. Con un solo clic en un botón, todos los cambios de diseño de la página se visualizan. Esta es la primera solución a la que recurro cuando intento determinar un cambio de diseño en una página. Es fácil y proporciona una excelente visión general visual del Cumulative Layout Shift.

3. Usa la pestaña Performance de Chrome para encontrar CLS

Sin duda, la mejor manera de depurar un cambio de diseño es a través de la pestaña Performance de Chrome. Para abrir la pestaña de rendimiento, navega a cualquier página en Chrome y usa esta combinación de atajos:

• Presiona Ctrl+Shift+I (Abrir DevTools)
• Presiona Ctrl+Shift+E (Iniciar perfilado y recargar página)

Ahora inspecciona la línea de tiempo fotograma a fotograma pasando el ratón sobre la línea de tiempo en la parte superior y busca cambios de diseño (los cambios de diseño también están coloreados en rojo en la sección Experience de la pestaña Performance).

4. Usa herramientas RUM como CoreDash

RUM significa Real User Monitoring y los datos RUM pueden proporcionar información valiosa en tiempo real sobre los Core Web Vitals. Herramientas RUM como CoreDash pueden desglosar los Cumulative Layout Shifts en segmentos como navegador, elemento, tipo de navegación, URL específica o tipo de página. Esto ayudará a identificar y corregir las páginas con bajo rendimiento y los elementos problemáticos.

Causas comunes del Cumulative Layout Shift y cómo solucionarlas

El origen de todos los cambios de diseño es básicamente el mismo. En algún momento, un elemento que estaba colocado 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, iframes o vídeos sin dimensiones explícitas
• Anuncios que se cargan tarde en el viewport
• Contenido inyectado dinámicamente
• Animaciones CSS que usan propiedades que afectan el diseño
• Interacciones de usuario lentas
• Fuentes web con fallbacks no coincidentes

CLS causado por imágenes, vídeos e iframes

Las imágenes, los vídeos y los iframes son los sospechosos habituales cuando se trata del Cumulative Layout Shift, ya que estos elementos constituyen la mayoría de los problemas de CLS. Para una guía detallada sobre esta causa específica, consulta cómo solucionar el cambio de diseño causado por imágenes de tamaño automático.

Los cambios de diseño causados por imágenes, vídeos o iframes siempre se deben a dimensiones faltantes. Lo más común es que la altura y el ancho del elemento no estén definidos en el HTML. Un patrón bueno y común es establecer el ancho intrínseco de la imagen en el HTML y usar estilos para escalar automáticamente y contener la imagen dentro de su contenedor padre.

Establece atributos explícitos de ancho y alto

La forma más simple y efectiva de prevenir el CLS por imágenes e iframes es incluir siempre atributos width y height directamente en el HTML. Los navegadores modernos usan estos atributos para calcular la relación de aspecto antes de que el recurso se cargue, reservando la cantidad correcta de espacio.

<!-- Images: always include width and height -->
<img src="hero.jpg" width="800" height="450" alt="Hero image">

<!-- Iframes: same principle -->
<iframe src="https://example.com/embed"
    width="560" height="315"
    title="Embedded content">
</iframe>

<!-- Videos: always include dimensions -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<style>
img, iframe, video {
    max-width: 100%;
    height: auto;
}
</style>

Usa la propiedad CSS aspect-ratio

Para diseños responsivos o cuando las dimensiones exactas en píxeles no están disponibles, la propiedad CSS aspect-ratio ofrece una forma alternativa de reservar espacio. Esto es especialmente útil para contenedores que albergan contenido dinámico o medios incrustados.

<style>
/* Reserve space for a 16:9 video container */
.video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #f0f0f0;
}

/* Reserve space for a square image */
.avatar {
    aspect-ratio: 1 / 1;
    width: 80px;
    object-fit: cover;
}

/* Responsive iframe container */
.embed-container {
    aspect-ratio: 560 / 315;
    width: 100%;
}
.embed-container iframe {
    width: 100%;
    height: 100%;
}
</style>

CLS causado por fuentes web

Un Cumulative Layout Shift puede ser causado por fuentes web. Las fuentes web son fuentes que no están instaladas en tu ordenador o teléfono local sino que se descargan de internet. Mientras la fuente web aún no se ha descargado, la página generalmente se renderiza con una fuente fallback. El tamaño de esta fuente fallback puede diferir de la fuente final. En este ejemplo, la fuente fallback es ligeramente más pequeña que la fuente web final. Para más información, consulta cómo asegurar que el texto permanezca visible durante la carga de la fuente web.

Hay varios métodos para solucionar el cambio de diseño causado por fuentes web. Se basan en dos técnicas:

1. Hacer que la fuente fallback coincida más estrechamente con la fuente web. La forma más efectiva es sobrescribiendo los descriptores @font-face.

2. Acelerar las fuentes web. Esto las hará disponibles para el navegador antes de que el navegador comience a renderizar. Una forma común de hacerlo es auto-alojar tus fuentes web y precargar tus fuentes web críticas.

Coincidencia de fuente fallback con sobrescritura de métricas

La técnica más efectiva para eliminar el CLS por fuentes web es crear una definición de fuente fallback que coincida estrechamente con las dimensiones de tu fuente web. Usando los descriptores size-adjust, ascent-override, descent-override y line-gap-override, puedes hacer que la fuente fallback ocupe un espacio prácticamente idéntico. Combinado con font-display: swap, esto asegura que el texto sea visible inmediatamente con un cambio de diseño mínimo cuando la fuente web se carga.

<style>
/* Define a matched fallback font */
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* Use the web font with the matched fallback */
@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

<!-- Preload the critical web font for faster loading -->
<link rel="preload" href="/fonts/myfont.woff2"
    as="font" type="font/woff2" crossorigin>

Herramientas como el Fallback Font Generator pueden calcular automáticamente los valores de sobrescritura correctos para tu combinación de fuentes específica. Para Google Fonts específicamente, auto-alojar tus fuentes te da control total sobre las declaraciones font-face y la estrategia de precarga.

CLS causado por animaciones CSS

Las animaciones y transiciones CSS pueden provocar cambios de diseño inesperados cuando animan propiedades que afectan el diseño de los elementos circundantes. Propiedades como top, left, width, height, margin y padding hacen que el navegador recalcule el diseño de toda la página, lo que resulta en CLS. Para un recorrido detallado, consulta cómo solucionar el cambio de diseño causado por transiciones CSS.

La solución es usar propiedades CSS compuestas como transform y opacity para las animaciones. Estas propiedades son gestionadas por el compositor de la GPU y no provocan recálculos de diseño, por lo que producen cero CLS.

<style>
/* BAD: Animating top/left causes layout shifts */
.slide-in-bad {
    position: relative;
    animation: slide-bad 0.3s ease-out;
}
@keyframes slide-bad {
    from { top: -50px; opacity: 0; }
    to   { top: 0; opacity: 1; }
}

/* GOOD: Animating transform does NOT cause layout shifts */
.slide-in-good {
    animation: slide-good 0.3s ease-out;
}
@keyframes slide-good {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
</style>

Según el HTTP Archive Web Almanac, el 39% de las páginas móviles y el 42% de las páginas de escritorio tienen animaciones no compuestas que contribuyen al CLS. Siempre verifica tus animaciones para asegurarte de que solo usen transform y opacity en lugar de propiedades que afectan el diseño.

Usa la contención CSS para aislar cambios de diseño

La propiedad CSS contain indica al navegador que el contenido de un elemento es independiente del resto de la página. Esto limita el alcance de los recálculos de diseño y puede evitar que los cambios de diseño se propaguen a los elementos circundantes.

<style>
/* Isolate ad containers from the rest of the page */
.ad-slot {
    contain: layout style;
    min-height: 250px;
}

/* For off-screen content, use content-visibility */
.below-fold-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
</style>

La declaración contain: layout asegura que cualquier cambio de tamaño dentro del elemento no provocará recálculos de diseño para los elementos fuera de él. La propiedad content-visibility: auto va más allá al permitir que el navegador omita por completo el renderizado del contenido fuera de la pantalla, con contain-intrinsic-size proporcionando un tamaño estimado para evitar cambios de diseño cuando el contenido entra en la vista al desplazarse.

Problemas de CLS causados por interacciones de usuario lentas

En el siguiente ejemplo, el botón de cargar más claramente provoca un cambio de diseño. Sin embargo, el cambio de diseño no se añadirá a las métricas de CLS. Esto se debe a que este cambio de diseño es intencional.

Un navegador lo sabrá porque los elementos ahora visibles tienen un atributo llamado "hadRecentInput". Cuando este se establece en verdadero Y el cambio de diseño ocurre dentro de los 500 ms del evento de entrada (el clic en el botón), el cambio de diseño no será reportado por el navegador.

Asegúrate de que las interacciones de usuario se completen en menos de 500 ms. Si una interacción tarda más que eso, cualquier cambio de diseño resultante contará para la puntuación de CLS. Esto es particularmente relevante para las solicitudes AJAX que inyectan nuevo contenido. Para consejos sobre cómo optimizar elementos interactivos, consulta cómo construir un widget de chat con Core Web Vitals perfectos.

Problemas de CLS causados por AJAX y contenido inyectado dinámicamente

AJAX permite que las páginas web se actualicen de forma asíncrona intercambiando datos con un servidor web en segundo plano. Inyectar nuevo contenido en cualquier página web podría provocar un cambio de diseño masivo. Por eso es aconsejable reservar el espacio que se usará para el nuevo contenido. No conoces la altura del nuevo contenido de antemano, pero lo que puedes hacer es hacer una estimación fundamentada.

Por ejemplo, si el contenido AJAX promedio ocupa el 50% de la pantalla, es aconsejable reservar ese 50%. Cuando el nuevo contenido termina ocupando el 40 o el 60% de la pantalla, el CLS (50% menos 40% = 10% de fracción de distancia) sigue siendo mucho menor que una fracción de distancia del 50%.

Aquí tienes un ejemplo de cómo hacerlo:

<style>
   #ajax { height: 400px; }
   #ajax.loaded { height: auto; }
</style>
<script>
   fetch('/ajax-content')
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML = result.html;
      el.classList.add('loaded');
   })
</script>

CLS post-carga: contenido dinámico y elementos de carga tardía

Los cambios de diseño no solo ocurren durante la carga inicial de la página. El CLS post-carga es causado por contenido que aparece o cambia de tamaño después de que la página ya se ha renderizado. Las causas comunes incluyen:

• Anuncios de carga tardía: Las redes publicitarias a menudo inyectan contenido segundos después de que la página se ha cargado. Si el espacio del anuncio no tiene espacio reservado, el anuncio empuja todo el contenido circundante hacia abajo.
• Banners de consentimiento de cookies: Los banners que empujan el contenido de la página hacia abajo en lugar de superponerse causan un CLS significativo. Usa un patrón de superposición (position: fixed) o reserva espacio en la parte superior de la página.
• Contenido con carga diferida por encima del pliegue: Contenido cargado mediante Intersection Observer que inicialmente estaba oculto pero aparece en el viewport sin espacio reservado.
• Scripts de pruebas A/B: Las herramientas de pruebas que modifican el DOM después del renderizado inicial pueden causar cambios inesperados. Ejecuta las modificaciones de las pruebas A/B del lado del servidor o dentro del HTML inicial cuando sea posible.
• Implementaciones de scroll infinito: El nuevo contenido añadido al final de una lista puede causar cambios si altera el diseño de los elementos existentes. Asegúrate de que el nuevo contenido solo se añada debajo de la posición de desplazamiento actual.

El modelo de ventana de sesión (descrito anteriormente) significa que incluso los cambios post-carga cuentan para el CLS si resultan estar dentro de la peor sesión. Monitoriza los datos de atribución de CLS en CoreDash para identificar qué elementos se desplazan después de la carga.

Solucionar problemas de CLS causados por anuncios

Los anuncios a menudo se cargan significativamente más tarde en la página. Esto hace que los Cumulative Layout Shifts causados por anuncios sean especialmente molestos. Cuando múltiples anuncios se cargan en el viewport visible, la página simplemente no se queda quieta. Para solucionar esto, reserva el espacio para los anuncios, especialmente los anuncios en el viewport visible.

<style>
/* Reserve space for rectangle mobile ad */
.ad {
    min-height: 250px;
    background: #dedede;
    contain: layout style;
}
/* Reserve space for banner desktop ad */
@media only screen and (min-width: 600px) {
    .ad { min-height: 90px; }
}
</style>

Caso de estudio: Rakuten 24 y el impacto empresarial del CLS

Rakuten 24, una importante plataforma de comercio electrónico japonesa, realizó un estudio detallado sobre el impacto del Cumulative Layout Shift en sus métricas de negocio. Al reducir el CLS en 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 el mismo grupo con CLS mejorado.
• Disminución del 15,20% en la tasa de rebote entre los visitantes con experiencias de página estables.

Estas cifras demuestran que el CLS no es simplemente una métrica técnica. La inestabilidad visual cuesta directamente ingresos a las empresas al frustrar a los usuarios durante su navegación y proceso de compra. Cuando los elementos se desplazan inesperadamente, los usuarios pierden confianza, hacen clics erróneos 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 de CLS

Los datos de CoreDash muestran que el CLS es el Core Web Vital con mejor rendimiento, con el 92,8% de las cargas de página en corewebvitals.io alcanzando una puntuación "buena" y prácticamente ninguna diferencia entre dispositivos móviles y de 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 dispositivo.

Esto contrasta con métricas como LCP e INP, donde el rendimiento móvil es significativamente peor que el de escritorio. El CLS es excepcionalmente mejor en móvil que en escritorio en la web en general, lo cual es lo inverso de todos los demás Core Web Vitals.

Globalmente, según el Web Almanac 2025, el panorama es menos optimista:

• El 72% de los sitios web alcanzan buenas puntuaciones de CLS en general, mientras que el 11% tienen un CLS deficiente.
• El 66% de las páginas móviles tienen al menos una imagen sin dimensiones definidas (bajando del 72% en 2022, pero sigue siendo un importante 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 global, pero los datos revelan que las imágenes sin dimensiones y las animaciones no compuestas siguen siendo las dos causas más comunes. Abordar estos dos problemas por sí solos eliminaría los cambios de diseño para una gran parte de la web.

Preguntas frecuentes sobre CLS

Guías relacionadas

Explora estas guías detalladas para técnicas específicas de optimización del CLS:

• Solucionar el cambio de diseño causado por transiciones CSS: Aprende a identificar y reemplazar animaciones CSS que afectan el diseño con alternativas compuestas.
• Solucionar el cambio de diseño causado por imágenes de tamaño automático: Un recorrido completo para añadir dimensiones adecuadas a las imágenes y contenedores responsivos.
• Auto-alojar Google Fonts: Reduce el CLS por carga de fuentes auto-alojando las fuentes con estrategias adecuadas de font-display y precarga.
• Asegurar que el texto permanezca visible durante la carga de la fuente web: Configura font-display y las sobrescrituras 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 caso de estudio sobre la implementación de widgets de terceros sin introducir regresiones de CLS, INP o LCP.

Para una visión completa de todas las métricas de los Core Web Vitals y las estrategias de optimización, visita la descripción general de los Core Web Vitals o usa la Checklist definitiva de los Core Web Vitals para auditar tu sitio.