El cumulative layout shift (CLS, desplazamiento acumulado del diseño) mide cuánto se mueve de forma inesperada el contenido visible mientras la página está abierta, y una buena puntuación es 0,1 o menos en el percentil 75 de las visitas (web.dev, abril de 2023). Los valores por encima de 0,25 son malos. En el móvil, las causas habituales son imágenes sin dimensiones, anuncios e incrustaciones sin espacio reservado, banners y avisos de cookies insertados arriba, fuentes web tardías y animaciones que mueven el diseño. Localiza el elemento desplazado en DevTools y reserva su espacio antes de que cargue.
Qué es el cumulative layout shift
El CLS es la mayor ráfaga de cambios de diseño en la vida de una página, no la suma de todos. Cada cambio se puntúa como fracción de impacto por fracción de distancia. La fracción de impacto es la parte del viewport cubierta por los elementos que se movieron, y la fracción de distancia es la mayor distancia que se movió un elemento dividida entre la dimensión más grande del viewport. Los cambios separados por menos de un segundo se agrupan en una ventana de sesión de cinco segundos como máximo, y el CLS es la ventana con la puntuación más alta (web.dev). Los cambios que empiezan en los 500 ms siguientes a una acción del usuario se excluyen (web.dev, Optimize CLS, febrero de 2025).
| Valoración | CLS (p75) |
|---|---|
| Bueno | 0,1 o menos |
| Necesita mejorar | Más de 0,1 y hasta 0,25 |
| Malo | Más de 0,25 |
Son los umbrales de Google para «una buena puntuación», y web.dev recomienda comprobar el percentil 75 por separado en móvil y en ordenador.
Por qué el CLS es más difícil en el móvil
El mismo movimiento puntúa más alto en una pantalla pequeña, porque las dos fracciones se miden respecto al viewport y la dimensión más grande de un móvil es menor. Como ilustración con la fórmula anterior: imagina que un banner de cookies de 80 px de alto aparece en la parte superior de una página y empuja todo hacia abajo, en un viewport de 390 × 844 px lleno de contenido. Casi toda el área del viewport se ve afectada, así que la fracción de impacto es de aproximadamente 1,0, y la fracción de distancia es 80 / 844 = 0,095. La puntuación es de aproximadamente 0,095, a un banner de distancia del límite de 0,1. Es solo una ilustración y supone que el contenido llena el viewport.
Las causas son las mismas que en el ordenador, solo que se puntúan sobre un área menor, y web.dev señala que el tamaño de los anuncios puede variar entre formatos de dispositivo, así que un hueco reservado para el tamaño de escritorio puede no servir en el móvil.
El CLS tampoco se mide en todos los navegadores. La biblioteca web-vitals indica que onCLS() solo funciona en Chromium, mientras que sus otras funciones también funcionan en Firefox y Safari (README de web-vitals). Web-features 3.44.0 (octubre de 2026) muestra la Layout Instability API solo en Chrome y Edge. Por eso, el CLS recogido en campo con esa biblioteca cubre los navegadores basados en Chromium, y una visita con Safari en un iPhone no informa de ningún CLS a través de ella.
Qué se desplaza en el móvil y cómo corregirlo
Cada causa tiene una solución que reserva el espacio antes de que llegue el contenido. Según la guía de web.dev para optimizar el CLS (febrero de 2025):
| Causa | Solución |
|---|---|
| Imágenes y vídeo sin dimensiones | Atributos width y height, o aspect-ratio en CSS |
| Anuncios, incrustaciones e iframes | Reserva espacio con min-height o aspect-ratio; mantén un marcador de posición si no llega ningún anuncio |
| Banners y avisos de cookies insertados en la página | Reserva espacio con un marcador de posición, o colócalos como superposición para que no muevan la página |
| Fuentes web tardías | font-display: optional, una fuente de reserva parecida, métricas de la fuente de reserva ajustadas al tamaño |
| Animaciones | Anima transform en lugar de top, left o box-shadow |
Imágenes y vídeo
Indica el tamaño intrínseco de cada imagen para que el navegador pueda reservar el espacio antes de que llegue el archivo:
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">img {
height: auto;
width: 100%;
}En las imágenes adaptables, web.dev dice que hay que mantener la misma proporción en todos los candidatos de srcset y, en <picture>, poner width y height en cada <source> y en el <img>. Un formato de imagen nuevo solo cambia el tamaño del archivo, así que no arregla esto; el patrón con <picture> está en WebP o AVIF. aspect-ratio es Baseline de disponibilidad amplia desde marzo de 2024 (web-features 3.44.0).
Anuncios, incrustaciones y banners
Reserva el espacio del hueco con el menor tamaño que esperes y usa una media query cuando el tamaño sea distinto en el móvil:
.ad-slot { min-height: 250px; }
@media (min-width: 768px) {
.ad-slot { min-height: 90px; }
}Las dos alturas son ejemplos; usa los tamaños de tus anuncios. Web.dev añade tres consejos: usar como mínimo el menor tamaño esperado, mostrar un marcador de posición en lugar de colapsar el espacio cuando no llega ningún anuncio, y colocar el contenido de carga tardía más abajo en el viewport, ya que el contenido insertado cerca de la parte superior causa cambios mayores. En un aviso de cookies, hazlo una superposición o reserva su altura desde el primer renderizado, en lugar de empujar la página hacia abajo cuando un script decide mostrarlo.
Fuentes web
Tanto el destello de texto invisible como el destello de texto sin estilo pueden causar desplazamientos, porque el texto invisible se maqueta igualmente con la fuente de reserva, según web.dev. Sugiere font-display: optional y una fuente de reserva parecida, métricas de reserva ajustadas al tamaño y precargar las fuentes críticas. Los valores y el código de precarga y de fuente de reserva están en la guía de font-display swap.
Animaciones y el botón de retroceso
Anima con transform, que no provoca maquetación; web.dev señala que las animaciones compuestas de translate no cuentan para el CLS. Haz también que las páginas sean aptas para la caché de ida y vuelta (back/forward cache), ya que una página restaurada aparece tal como la dejó el usuario y sin desplazamientos de carga repetidos. Eso no ayuda en la primera carga.
Cómo encontrar los cambios de diseño
Usa herramientas de laboratorio para encontrar el elemento y datos de campo para ver si los usuarios reales lo sufren. Web.dev enumera estas vías:
- PageSpeed Insights: compara el CLS de campo (del Chrome UX Report) con el CLS de laboratorio de Lighthouse. Una diferencia grande suele indicar desplazamientos posteriores a la carga, que una prueba de laboratorio no ve.
- Lighthouse: sus auditorías enumeran los elementos desplazados y su contribución, pero a menudo muestran el elemento afectado y no la causa de fondo.
- Panel Rendimiento (Performance) de DevTools: graba una traza y abre la pista «Layout shifts». Las barras moradas marcan grupos de desplazamientos, un rombo mayor es un desplazamiento mayor, y el resumen muestra la hora de inicio, la puntuación y los elementos desplazados. El análisis «Layout shift culprits» enumera el CLS total y las causas probables (web.dev).
Para ver qué elemento se desplazó a los visitantes reales, añade la versión con atribución de web-vitals, que informa del elemento, el momento y el valor del mayor desplazamiento:
import {onCLS} from 'web-vitals/attribution';
onCLS(({value, rating, attribution}) => {
console.log(rating, value, {
target: attribution.largestShiftTarget,
time: attribution.largestShiftTime,
score: attribution.largestShiftValue,
});
});Los desplazamientos dentro de iframes no se pueden medir con las API web, pero aparecen en el Chrome UX Report, según web.dev. Para saber cómo ejecutar Lighthouse y el resto de herramientas, consulta la guía de auditoría móvil con Lighthouse y la guía de pruebas de velocidad en móvil.
Comprueba el diseño con el ancho de un móvil
Un diseño que cambia entre el ordenador y el móvil se detecta mejor con el ancho de un móvil. Mobile View Extension recarga la pestaña con el user agent, el tamaño de pantalla y la densidad de píxeles de un móvil, para que veas la versión móvil de la página y observes qué se mueve mientras carga. No mide el CLS ni ninguna métrica de velocidad, y funciona con la conexión de tu ordenador, así que un banner o un anuncio que desplaza la página en un móvil lento puede cargar demasiado rápido para notarlo. Confírmalo con las herramientas anteriores. Para otros motivos por los que una página se ve distinta en el móvil, consulta por qué un sitio web se ve diferente en el móvil.
Preguntas frecuentes
¿Qué es una buena puntuación de CLS?
Una buena puntuación de CLS es 0,1 o menos, y todo lo que supere 0,25 es malo, medido en el percentil 75 de las cargas de página (web.dev, abril de 2023). El intervalo entre 0,1 y 0,25 necesita mejorar.
¿Qué causa los cambios de diseño en el móvil?
Las causas son imágenes y vídeo sin dimensiones, anuncios, incrustaciones e iframes sin espacio reservado, banners y avisos de cookies insertados, fuentes web que se renderizan más grandes o más pequeñas que la fuente de reserva, y animaciones que cambian propiedades de maquetación. El mismo movimiento puntúa más alto en un móvil porque las fracciones se miden respecto a un viewport menor.
¿Cómo averiguo qué causa el CLS?
Graba una traza en el panel Rendimiento de DevTools, abre la pista «Layout shifts» y revisa los elementos desplazados en el resumen. Para los visitantes reales, usa la versión con atribución de web-vitals para informar de largestShiftTarget.
¿El CLS afecta al SEO?
Google recomienda tener buenas métricas web principales (Core Web Vitals) para tener éxito en la Búsqueda y dice que coinciden con lo que sus sistemas principales de posicionamiento buscan recompensar; no las llama factor de posicionamiento directo (Google Search Central, actualizado en diciembre de 2025). El efecto directo recae en los visitantes que pierden el punto de lectura cuando la página salta.