¿Qué mide CLS?

Cumulative Layout Shift es una de las tres métricas de Core Web Vitals de Google. Cuantifica los movimientos visuales inesperados de los elementos visibles durante la carga e interacción de la página. Cada vez que un elemento se mueve sin que el usuario haya provocado el cambio, suma “puntuación” al CLS de la sesión.

Es adimensional: es la suma de productos impact_fraction × distance_fraction de cada layout shift, donde:

impact_fraction es la proporción del viewport afectada por el elemento que se mueve.
distance_fraction es la distancia que se mueve, normalizada por la dimensión del viewport.

Umbrales oficiales

Bueno	Necesita mejora	Pobre
≤ 0,1	≤ 0,25	> 0,25

Aplicados al percentil 75 de visitas reales en CrUX. Desde junio de 2021, CLS solo cuenta los session windows de hasta 5 s, no toda la sesión.

Causas más frecuentes

Imágenes sin width y height: el navegador no reserva espacio y, cuando llega la imagen, todo lo que está debajo se desplaza hacia abajo.
Anuncios y embeds insertados tarde: banners de Google AdSense, Twitter embeds, calendario de Calendly aparecen segundos después del HTML inicial.
Web fonts que cambian de tamaño respecto a la fuente fallback (FOUT — Flash of Unstyled Text). Si Inter es 5 % más estrecha que Arial, todas las líneas se recolocan al cargar Inter.
CTAs flotantes, banners de cookies, botones de WhatsApp insertados tras la primera renderización.
Animaciones de transformación sin transform: translate() (usar top/left provoca layout shift; transform no).

Optimizaciones típicas

Declarar width y height en TODAS las imágenes: incluso si las redimensionas con CSS, el navegador necesita el ratio para reservar espacio.
```
<img src="hero.webp" width="1200" height="600" alt="..." />
```
Reservar espacio para banners y embeds con CSS min-height o un placeholder de aspect-ratio.
Web fonts con métricas similares al fallback: usar la API size-adjust, ascent-override, descent-override, line-gap-override (técnica conocida como fontpie o capsize).
Preload + font-display: swap para que la fuente cargue antes y el cambio sea menor (font-display).
Insertar banners de cookies en posición fija (overlay), no como elemento que empuje el contenido.
No animar top, left, width, height: usar transform: translate() y transform: scale(), que componen en GPU sin layout.

Casos especiales: interacción del usuario

CLS solo cuenta movimientos inesperados. Si el usuario hace clic en “Ver más” y se expande un acordeón, ese movimiento NO cuenta como CLS durante los 500 ms posteriores al clic. Esta excepción permite UX dinámica sin penalización.

Cómo lo medimos

PageSpeed Insights: CrUX p75 + Lighthouse lab.
Chrome DevTools Performance Insights: highlights de cada layout shift con captura visual.
Layout Shift API + web-vitals.js: medición en producción.

En smedialab.es mantenemos CLS por debajo de 0,01 declarando dimensiones explícitas en imágenes y usando una fuente fallback calibrada con fontpie para que Inter no genere reflow al cargar. En proyectos de diseño web y SEO verificamos CLS en cada deploy.

CLS — CLS — Cumulative Layout Shift