Cumulative Layout Shift (CLS): Definición, Causas, Fixes
CLS es un Core Web Vital midiendo shifts visuales inesperados. Score ≤ 0.1 = bueno. Causado por dimensiones imagen faltantes, ads dinámicos, fonts tardías.
¿Qué es Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) es un Core Web Vital que mide la cantidad total de shift visual inesperado que sucede durante el lifetime de una página. Cada vez que contenido salta porque una imagen carga tarde, un ad inyecta o una font swappea, eso es un layout shift — y es frustrante para usuarios.
CLS es uno de tres Core Web Vitals (con LCP e INP) que Google usa como señal ranking search.
Cómo se mide CLS
CLS = suma de scores layout shift. Cada shift score = impact fraction × distance fraction.
| CLS | Rating |
|---|---|
| ≤ 0.1 | Bueno |
| 0.1 - 0.25 | Necesita mejora |
| > 0.25 | Pobre |
Qué causa CLS
| Causa | Por qué | Fix |
|---|---|---|
| Imágenes sin width/height | Navegador no sabe espacio | Setear attrs width + height |
| Ads, embeds, iframes | Inyectan contenido tamaño desconocido | Reservar espacio |
| Web fonts cargando tarde | Fallback se swappea con web font | font-display: optional |
| Contenido dinámico arriba | Contenido inyectado arriba pushea todo abajo | Append abajo |
| Animaciones que cambian layout | Animar height/width | Usar transform |
| Cookie/GDPR banners | Top banner pushea contenido abajo | Position fixed |
Fixes CLS comunes
1. Siempre especificar dimensiones imagen
<img src="hero.jpg" alt="Hero" width="1200" height="675">2. Reservar espacio para ads/embeds
<div class="ad-slot" style="min-height: 250px;"></div>3. Optimizar web fonts
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: optional;
size-adjust: 95%;
}4. Transform en vez de layout properties
.menu { transition: transform 0.3s; transform: translateY(0); }Midiendo CLS
| Herramienta | Tipo |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + field |
| Chrome DevTools | Lab |
| Web Vitals Chrome extension | Field |
| web-vitals.js | Programmatic, RUM |
| Search Console CWV report | Field |
| CrUX Dashboard | Field, público |
Mejores prácticas CLS
- Width/height en imágenes y videos.
- Reservar espacio para todo lo que carga tarde.
- font-display: optional para fonts non-críticas.
- Match fallback font metrics.
- Animaciones transform.
- Skeleton screens.
- No inyectar arriba contenido existente.
- Testear en devices lentos.
Pitfalls CLS comunes
- Imagen responsive sin aspect ratio.
- Web fonts que resizean texto.
- Ads lazy-loaded sin espacio reservado.
- Click handlers en elementos shifting.
- Carousels auto-rotantes.
- Imagen hero cargando tarde.
FAQ: Cumulative Layout Shift
¿Qué es buen score CLS?
≤ 0.1 es bueno.
¿Afecta CLS al SEO?
Sí — Core Web Vital, señal ranking.
¿Cómo fixear imágenes causando CLS?
Siempre setear atributos width y height.
¿Cuentan scrolling e interacciones usuario en CLS?
No. Shifts dentro 500ms de input usuario excluidos.
¿Cómo afecta font-display a CLS?
font-display: optional + size-adjust para mejor CLS.
¿Puedo tener CLS = 0?
Posible pero raro.
¿Qué es session window?
Ventana 5-segundos de shifts consecutivos.
Cacha regresiones CLS con LoadFocus
LoadFocus corre auditorías Lighthouse desde 25+ regiones y trackea CLS over time. Regístrate en loadfocus.com/signup.
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus — la misma plataforma que potencia todo lo que acabas de leer.