Respuesta corta: el Cumulative Layout Shift (CLS) mide cuánto se mueve el contenido visible de una página cuando el visitante no lo espera. Toma la mayor ráfaga de cambios de diseño de toda la vida de la página. Un buen CLS es de 0.1 o menos, y por encima de 0.25 es deficiente.
Cómo se calcula el CLS
Un cambio de diseño ocurre cuando un elemento visible cambia su posición inicial de un fotograma al siguiente. Un elemento nuevo, o uno que cambia de tamaño, solo cuenta si mueve otros elementos visibles. Cada cambio recibe una puntuación: la fracción de impacto multiplicada por la fracción de distancia, que miden cuánta pantalla afectan los elementos que se mueven y cuánto se desplazan.
Los cambios separados por menos de 1 segundo forman una ventana de sesión, que dura como mucho 5 segundos. El CLS es la puntuación de la peor ventana, no la suma de todos los cambios de la página.
Los cambios que ocurren dentro de los 500 milisegundos siguientes a un toque, un clic o una tecla no cuentan, porque el visitante los espera. Desplazarse, arrastrar o pellizcar la pantalla no tienen esa excepción.
Causas frecuentes y cómo corregirlas
Estas son las causas más comunes de un CLS deficiente según web.dev, más las animaciones.
| Causa | Qué pasa | Cómo se corrige |
|---|---|---|
| Imágenes y videos sin dimensiones | El navegador no sabe su tamaño y el contenido de abajo se mueve al cargarlas | width y height, o aspect-ratio |
| Anuncios, elementos incorporados e iframes sin espacio reservado | El hueco crece cuando llega su contenido y empuja la página | Reserva el espacio con min-height o aspect-ratio |
| Banners y formularios que surgen de repente | Aparecen arriba o abajo y empujan el contenido | Reserva su espacio con un marcador de posición, o superponlos |
| Fuentes web | Cuando la fuente web sustituye a la de resguardo, el bloque de texto y lo que lo rodea se desplazan | font-display: optional, una fuente de resguardo más parecida con size-adjust y precarga de las fuentes críticas |
| Animaciones de top, left, width o height | Cambiar esas propiedades mueve otro contenido | Anima con transform |
De web.dev, «Cómo optimizar el cambio de diseño acumulado», consultada el 3 de noviembre de 2026.
Cómo corregir el CLS
- Revisa tus datos de campo en PageSpeed Insights o en Search Console, porque las pruebas de laboratorio solo ven la carga.
- Pasa Lighthouse para ver qué elementos se movieron y mira encima de ellos: la causa suele ser un elemento nuevo insertado ahí.
- Dale a cada imagen y video sus atributos width y height, o reserva el espacio con aspect-ratio en el CSS.
- Reserva espacio para anuncios, elementos incorporados e iframes con min-height o aspect-ratio.
- Muestra banners y formularios solo después de un toque o un clic, reserva su espacio de antemano o ponlos por encima del contenido.
- Carga las fuentes para que el cambio no mueva el texto: font-display: optional, una fuente de resguardo más parecida con size-adjust y precarga de las críticas. Nuestra guía de fuentes para una web explica cuáles elegir.
- Anima con transform en lugar de top, left, width o height.
web.dev también recomienda que tus páginas sean aptas para la caché de atrás/adelante (bfcache): una página que se restaura desde ella vuelve a empezar con un CLS de cero. Nuestras guías de Core Web Vitals, de PageSpeed Insights y de la carga diferida de imágenes amplían los pasos 1, 2 y 3.
Cómo es el CLS en nuestras páginas
El 3 de noviembre medimos 4 páginas con la prueba móvil de PageSpeed Insights: la de inicio, la de servicios de SEO, el índice del blog y nuestra guía de robots.txt. En las 4, el CLS fue 0 en la prueba de laboratorio.
Lighthouse no registró ningún cambio de diseño en ninguna y no marcó ninguna imagen sin dimensiones. Nuestro aviso de cookies flota sobre la página en vez de empujarla hacia abajo, la opción de superponer que da web.dev para los banners.
Pero una prueba de laboratorio solo ve la carga. Los cambios mientras alguien se desplaza, o cuando llega contenido con carga diferida sin espacio reservado, solo aparecen en los datos de campo. Así que un 0 de laboratorio es buena señal, y los datos de campo son los que lo confirman.
Antes de dar el CLS por resuelto
- Tus datos de campo dan 0.1 o menos, no solo una prueba de laboratorio.
- Cada imagen y video tiene width y height o un aspect-ratio.
- Los anuncios, elementos incorporados e iframes tienen su espacio reservado.
- Ningún banner ni formulario empuja el contenido sin un clic.
- Las fuentes web no mueven el texto al cargar.
- Las animaciones usan transform.
RecuerdaEl CLS es la peor ráfaga de cambios inesperados de toda la visita, no solo de la carga. Reserva espacio para todo lo que llega tarde y confirma el resultado con datos de campo.
Si quieres páginas cuyo contenido no salte mientras cargan, mira nuestro servicio de diseño web.
Respuestas rápidas sobre el CLS
¿Qué es un buen CLS?
Bueno es 0.1 o menos, y deficiente, cualquier valor por encima de 0.25, según web.dev. Apunta a que al menos el 75% de las cargas de página lo cumplan, midiendo por separado los dispositivos móviles y los de escritorio.
¿Cuentan los cambios de diseño después de un clic?
No, si ocurren dentro de los 500 milisegundos siguientes a un toque, un clic o una tecla, porque el visitante los espera. Desplazarse, arrastrar o pellizcar no tienen esa excepción, así que el contenido que salta mientras alguien se desplaza sí cuenta.
¿Por qué mi CLS de laboratorio es 0 si Search Console dice que es deficiente?
Porque las pruebas de laboratorio suelen cargar la página una vez y solo ven los cambios de esa carga. Search Console usa datos de campo de visitas reales, que incluyen desplazamientos, contenido tardío e interacciones.
¿El CLS suma todos los cambios de la página?
Ya no. Antes sumaba todos los cambios de la vida de la página. Ahora agrupa los cambios que llegan seguidos en ventanas de sesión y se queda con la ventana de mayor total.
¿Las animaciones pueden empeorar el CLS?
Sí, si cambian top, left, width o height, porque eso mueve otro contenido. Las animaciones con transform, como translate o scale, no provocan un nuevo diseño, así que el contenido que las rodea no se mueve.
Fuentes
Consultadas el 3 de noviembre de 2026. web.dev: Cumulative Layout Shift (CLS) y Cómo optimizar el cambio de diseño acumulado. Nuestro caso: la prueba móvil de PageSpeed Insights en 4 páginas de nuestra web, el 3 de noviembre de 2026.