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

¿Qué es 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 basándose en qué parte 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 has comenzado 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 mejorar. Cualquier puntuación de CLS superior a 0.25 se considera deficiente. Para aprobar los Core Web Vitals en cuanto al Cumulative Layout Shift, al menos el 75% de tus visitantes deben tener una puntuación "buena" de CLS.

Importancia del CLS en el rendimiento web y la user experience

El Cumulative Layout Shift (CLS) está vinculado tanto al rendimiento web como a la user experience porque impacta directamente en qué tan estable y predecible se siente una página web mientras carga. Aquí te explicamos por qué importa:

• 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 según lo previsto. Esta frustración puede llevar a malas experiencias donde los usuarios abandonan el sitio web por completo. La user experience de un sitio web se refleja en la marca que lo respalda. Los frecuentes cambios de diseño pueden dar la impresión de un sitio web mal diseñado o mantenido, interrumpir el engagement del usuario y conducir a 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 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 user experience. El CLS es una de las métricas de Core Web Vitals que Google considera al clasificar los 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('Cambio de diseño:', 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 qué tan lejos se ha movido el contenido. Si, por ejemplo, el 50% de la página (cuánto) se ha movido el 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 aquellos que no esperas. Cuando haces clic en un enlace de "cargar más elementos", por ejemplo, esperarías que aparezcan más elementos en la página y que el contenido de la página se mueva.

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 contenido nuevo 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 al user input serán excluidos de los cálculos.

Sesiones de cambios de diseño

Cuando el CLS se introdujo por primera vez, algunos sitios fueron castigados injustamente con una mala puntuación de CLS. Por ejemplo, una página que implementa el scroll infinito habría obtenido el impacto del contenido recién agregado sumado a la puntuación total de CLS por cada nuevo scroll. 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 mayor puntuación de CLS se convertirá en la puntuación de CLS final.

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.

El CLS y los Core Web Vitals

El 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.

Cómo medir problemas de CLS

1. Usa Lighthouse para encontrar el Cumulative Layout Shift

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

Los resultados de la auditoría mostrarán la puntuación del Cumulative Layout Shift (CLS). Desplázate hacia abajo 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 yo mismo. 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 el Cumulative Layout Shift

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

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

Por lejos, 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 Performance, navega a cualquier página en Chrome y usa esta combinación de atajos:

• Presiona Ctrl+Shift+I (Abre las Dev Tools)
• Presiona Ctrl+Shift+E (Inicia el profiling y recarga la página)

Ahora inspecciona la línea de tiempo frame por frame 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 de 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 valiosos insights en tiempo real sobre los Core Web Vitals. Herramientas RUM como Core/Dash pueden desglosar el Cumulative Layout Shift en segmentos como navegador, elemento, tipo de navegación, URL específica o tipo de página. Esto ayudará a identificar y solucionar las páginas con bajo rendimiento y los elementos infractores.

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 por 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 videos sin dimensiones explícitas
• Anuncios que cargan tarde en el viewport
• Contenido inyectado dinámicamente
• Animaciones CSS que utilizan propiedades que desencadenan cambios de diseño
• Interacciones de usuario lentas
• Fuentes web con fallbacks que no coinciden

CLS causado por imágenes, videos e iframes

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

Los cambios de diseño causados por imágenes, videos o iframes siempre son causados por la falta de dimensiones. Lo más común es que esto suceda porque el height y el width del elemento no están definidos en el HTML. Un patrón común y de buena práctica es establecer el ancho intrínseco de la imagen en el HTML y usar CSS para escalar automáticamente y contener la imagen en su contenedor principal.

Establece atributos explícitos de width y height

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

<!-- Imágenes: siempre incluye width y height -->
<img src="hero.jpg"  alt="Imagen principal">

<!-- Iframes: mismo principio -->
<iframe src="https://example.com/embed"
    
    title="Contenido incrustado">
</iframe>

<!-- Videos: siempre incluye dimensiones -->
<video  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 no se dispone de dimensiones exactas en píxeles, la propiedad CSS aspect-ratio proporciona una forma alternativa de reservar espacio. Esto es especialmente útil para contenedores que albergan contenido dinámico o medios incrustados.

<style>
/* Reserva espacio para un contenedor de video 16:9 */
.video-wrapper {
    
    width: 100%;
    background: #f0f0f0;
}

/* Reserva espacio para una imagen cuadrada */
.avatar {
    
    width: 80px;
    object-fit: cover;
}

/* Contenedor de iframe responsivo */
.embed-container {
    
    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 computadora 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 obtener más información, consulta cómo garantizar que el texto permanezca visible durante la carga de la fuente web.

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

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

2. Acelerar las fuentes web. Esto las pondrá a disposición del navegador antes de que el navegador comience a renderizar. Una forma común de hacer esto es alojar tus propias fuentes web y hacer preload de tus fuentes web críticas.

Emparejamiento de fuentes fallback con anulación de métricas

La técnica más efectiva para eliminar el CLS de las 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 casi idéntico. Combinado con font-display: swap, esto garantiza que el texto sea visible de inmediato con un cambio de diseño mínimo cuando se cargue la fuente web.

<style>
/* Define una fuente fallback emparejada */
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    
    
    
    
}

/* Usa la fuente web con el fallback emparejado */
@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    
}

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

<!-- Haz preload de la fuente web crítica para una carga más rápida -->
<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 anulación correctos para tu par de fuentes específico. Específicamente para Google Fonts, alojar tus propias fuentes te da un 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 layout de los elementos circundantes. Propiedades como top, left, width, height, margin y padding hacen que el navegador vuelva a calcular el diseño de toda la página, lo que resulta en un CLS. Para obtener un tutorial detallado, consulta cómo solucionar el cambio de diseño causado por transiciones CSS.

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

<style>
/* MALO: Animar top/left causa cambios de diseño */
.slide-in-bad {
    position: relative;
    animation: slide-bad 0.3s ease-out;
}
@keyframes slide-bad {
    from {  }
    to   {  }
}

/* BUENO: Animar transform NO causa cambios de diseño */
.slide-in-good {
    animation: slide-good 0.3s ease-out;
}
@keyframes slide-good {
    from {  }
    to   {  }
}
</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. Verifica siempre tus animaciones para asegurarte de que solo usen transform y opacity en lugar de propiedades que desencadenan cambios de diseño.

Usa CSS containment para aislar los cambios de diseño

La propiedad CSS contain le dice 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>
/* Aísla los contenedores de anuncios del resto de la página */
.ad-slot {
    
    min-height: 250px;
}

/* Para contenido fuera de la pantalla, usa content-visibility */
.below-fold-section {
    
    
}
</style>

La declaración contain: layout garantiza que cualquier cambio de tamaño dentro del elemento no desencadenará 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 se desplace a la vista.

Problemas de CLS causados por interacciones lentas del usuario

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

Un navegador sabrá esto porque los elementos ahora visibles tienen un atributo llamado "hadRecentInput". Cuando esto 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 del usuario se completen en un plazo 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 contenido nuevo. Para obtener consejos sobre cómo optimizar los elementos interactivos, consulta cómo crear 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 asincrónicamente intercambiando datos con un servidor web en segundo plano. Inyectar contenido nuevo en cualquier página web podría provocar un cambio de diseño masivo. Es por eso que es prudente reservar el espacio que se utiliza para el contenido nuevo. No conoces la altura del contenido nuevo de antemano, pero lo que sí puedes hacer es tomar una estimación informada.

Por ejemplo, si el contenido AJAX promedio ocupa el 50% de la pantalla, es inteligente 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í hay un ejemplo de cómo hacer esto:

<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 ha cargado. Si el espacio publicitario no tiene espacio reservado, el anuncio empuja hacia abajo todo el contenido circundante.
• 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. Utiliza un patrón de superposición (position: fixed) o reserva espacio en la parte superior de la página.
• Contenido de carga diferida en la mitad superior de la página: Contenido cargado a través del Intersection Observer que inicialmente estaba oculto pero aparece en el viewport sin espacio reservado.
• Scripts de pruebas A/B: Las herramientas de prueba que modifican el DOM después del render inicial pueden causar cambios inesperados. Ejecuta las modificaciones de las pruebas A/B en el lado del servidor o dentro del HTML inicial cuando sea posible.
• Implementaciones de scroll infinito: El nuevo contenido agregado en la parte inferior de una lista puede causar cambios si altera el diseño de los elementos existentes. Asegúrate de que el nuevo contenido solo se agregue debajo de la posición actual de scroll.

El modelo de ventana de sesión (descrito anteriormente) significa que incluso los cambios post-carga cuentan para el CLS si caen dentro de la peor sesión. Monitorea los datos de atribución de tu CLS en Core/Dash para identificar qué elementos se mueven después de la carga.

Soluciona los problemas de CLS causados por anuncios

A menudo, los anuncios se cargarán significativamente más tarde en la página. Esto hace que los Cumulative Layout Shifts causados por los anuncios sean especialmente molestos. Cuando varios anuncios se están cargando en el viewport visible, la página simplemente no se quedará quieta. Para solucionar esto, reserva el espacio para los anuncios, especialmente los anuncios en el viewport visible.

<style>
/* Reserva espacio para el anuncio móvil rectangular */
.ad {
    min-height: 250px;
    background: #dedede;
    
}
/* Reserva espacio para el anuncio de banner de escritorio */
@media only screen and (min-width: 600px) {
    .ad { min-height: 90px; }
}
</style>

Caso de estudio: Rakuten 24 y el impacto comercial 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 comerciales. Al reducir el CLS en sus páginas de productos y categorías, Rakuten 24 logró resultados notables:

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

Estos números demuestran que el CLS no es meramente una métrica técnica. La inestabilidad visual cuesta directamente ingresos 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 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.

Qué muestran los datos del CLS en el mundo real

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 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) logran 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. El CLS es únicamente mejor en móviles que en escritorio a través de la web en general, lo cual es lo contrario de cualquier otro Core Web Vital.

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

• El 72% de los sitios web logra buenas puntuaciones de CLS en general, mientras que el 11% tiene un CLS deficiente.
• El 66% de las páginas móviles tiene al menos una imagen sin tamaño (por debajo del 72% en 2022, pero aún sigue siendo un gran contribuyente al CLS).
• El 39% de las páginas móviles tiene animaciones no compuestas que contribuyen al CLS.
• Solo el 11% de las páginas hace preload de las 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 solo estos dos problemas eliminaría los cambios de diseño para una gran parte de la web.

Preguntas frecuentes sobre el CLS

Guías relacionadas

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

• Solucionar el cambio de diseño causado por transiciones CSS: Aprende a identificar y reemplazar las animaciones CSS que desencadenan cambios de diseño con alternativas compuestas.
• Solucionar el cambio de diseño causado por el ajuste automático del tamaño de imágenes: Un tutorial completo para agregar las dimensiones adecuadas a las imágenes y los contenedores responsivos.
• Aloja tus propias fuentes de Google Fonts: Reduce el CLS al cargar fuentes alojándolas tú mismo con las estrategias de precarga y font-display adecuadas.
• Garantizar que el texto permanezca visible durante la carga de la fuente web: Configura font-display y las anulaciones de métricas de fuentes para eliminar los cambios de diseño por intercambio de fuentes.
• Crea un widget de chat con Core Web Vitals perfectos: Un caso de estudio sobre la implementación de widgets de terceros sin introducir regresiones en 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, visita el resumen de Core Web Vitals o utiliza la Checklist definitiva de Core Web Vitals para auditar tu sitio.