CLS
Cumulative Layout Shift
El CLS mide la estabilidad visual de una página: cuánto se mueven los elementos en pantalla de forma inesperada mientras carga. Un CLS alto destruye la experiencia —el usuario intenta hacer click en un botón y el contenido se mueve justo en ese momento.
A diferencia de LCP e INP, el CLS es adimensional: no es tiempo sino una puntuación que combina cuánto espacio visual se desplazó y qué distancia recorrió. Un CLS de 0 significa que no hubo ningún shift inesperado.
La fórmula del CLS: impact fraction x distance fraction
Layout Shift Score = Impact Fraction x Distance Fraction
Impact Fraction
La fraccion del viewport afectada por el shift. Si un elemento ocupa el 50% del viewport y se mueve, la impact fraction es 0.5 como minimo. Se calcula sumando el area inicial y final del elemento dentro del viewport.
Distance Fraction
La distancia maxima que recorre cualquier elemento afectado, expresada como fraccion del viewport. Si un elemento se desplaza hacia abajo 100px en un viewport de 800px, la distance fraction es 0.125.
El CLS total es la suma de los layout shift scores de todos los shifts inesperados durante la vida de la pagina. Google usa el percentil 75 de sesiones de usuarios para calcular el CLS reportado en datos de campo.
Causas principales de CLS alto y cómo corregirlas
Imágenes sin dimensiones declaradas
Impacto AltoCuando el navegador carga el HTML sin encontrar width y height en el elemento img, no sabe cuánto espacio reservar. Cuando la imagen llega del servidor, el navegador la inserta y empuja todo el contenido debajo de ella.
Fix
Siempre declarar width y height en el atributo HTML del elemento img. En Next.js, el componente Image de next/image lo hace automáticamente. Para imágenes con aspect-ratio variable, usar aspect-ratio en CSS.
Ads, embeds e iframes sin espacio reservado
Impacto AltoLos bloques de publicidad, videos embebidos o iframes que se insertan dinámicamente sin contenedor de tamaño predefinido son la fuente de CLS más frustrante para el usuario: el contenido se desplaza justo cuando estaba leyendo o a punto de hacer click.
Fix
Crear contenedores con min-height fijo o con aspect-ratio reservado antes de que el ad o embed cargue. Para ads de tamaño variable, usar el tamaño máximo esperado como contenedor. Preferir posiciones de ad que no estén arriba del viewport.
Fuentes web sin font-display controlado
Impacto MedioSin la declaración correcta de font-display, el navegador puede bloquear el texto hasta que la fuente cargue (FOIT) o mostrarlo con la fuente de sistema y luego cambiar (FOUT sin control). El cambio entre fuente de sistema y fuente web puede desplazar texto y elementos circundantes.
Fix
Usar font-display: swap para que el texto sea visible inmediatamente con la fuente de sistema mientras carga la fuente web. Usar size-adjust para aproximar el tamaño de la fuente de sistema a la fuente web y minimizar el shift de la transición.
Elementos insertados dinámicamente arriba del viewport
Impacto MedioBanners de cookies, notificaciones, barras de alerta o cualquier elemento que se inserta en el DOM por encima del contenido visible empuja todo lo que está debajo. Si el usuario ya está leyendo, el contenido se mueve sin que haya iniciado la acción.
Fix
Insertar elementos dinámicos siempre debajo del contenido visible, nunca encima. Para banners de cookies o notificaciones, usar posición fija (fixed) o sticky para que no afecten el flujo del documento. Los shifts iniciados por interacción del usuario no se penalizan en CLS.
Animaciones que cambian propiedades de layout
Impacto MedioAnimaciones CSS o JavaScript que modifican propiedades que afectan el flujo del documento —width, height, top, left, margin, padding— fuerzan al navegador a recalcular el layout. Estos recalculos pueden generar layout shifts medidos en CLS.
Fix
Animar exclusivamente propiedades que el navegador puede componer sin afectar el layout: transform (translateX, translateY, scale, rotate) y opacity. Estas propiedades pueden ser animadas por la GPU sin desencadenar layout recalculations.
Lo que NO cuenta como CLS
No todos los cambios de layout penalizan el CLS. Google distingue entre shifts inesperados —que el usuario no provocó— y shifts iniciados por el usuario, que son esperados y no generan fricción.
Shifts de layout iniciados por el usuario — si el usuario hace click en un botón que expande contenido, ese shift no penaliza el CLS.
Shifts iniciados dentro de 500ms después de una interacción del usuario — el navegador considera que el usuario causó el cambio de forma intencional.
Elementos fuera del viewport (invisibles para el usuario) — el CLS solo mide lo que ocurre en el área visible.
Animaciones con transform y opacity — no generan layout shifts porque no afectan el flujo del documento.
Cómo detectar y medir el CLS
Chrome DevTools — Layout Shift Regions
Abre DevTools, ve a Rendering (tres puntos > More tools) y activa 'Layout Shift Regions'. Los shifts se marcan visualmente en azul en la página mientras navegas. La forma más directa de ver qué elementos causan CLS.
PageSpeed Insights
Muestra el CLS de campo (CrUX) y el CLS de laboratorio (Lighthouse). La sección de diagnóstico identifica los elementos que causaron los shifts más grandes en el análisis de laboratorio.
Google Search Console — Core Web Vitals
Muestra URLs agrupadas por estado de CLS (Bueno / Mejorar / Pobre) con datos reales de usuarios. Es la fuente que Google usa para el Page Experience ranking signal.
Lighthouse
El audit de CLS en Lighthouse muestra los elementos con mayor puntaje de shift y el momento en que ocurrieron. Útil para reproducir el problema en laboratorio antes de corregirlo.
Continuar con LCP o INP
¿El contenido de tu sitio se mueve al cargar en mobile?
El CLS alto es uno de los problemas mas frustrantes para el usuario y uno de los mas faciles de corregir con el diagnostico correcto. Lo identificamos elemento por elemento con datos reales de campo, no solo con Lighthouse.
Ultima actualizacion: 2026-06-22 · Sistema: ATLAS D01-SEO · Autor: Andres Castrejon