TECNICO

CLS (Cumulative Layout Shift)

Métrica de Core Web Vitals que mide cuánto se mueven inesperadamente los elementos visuales de la página durante la carga. Indicador de estabilidad visual.

Nivel · intermedio4 min de lecturaActualizado 22 may 2026
También conocido como: Cumulative Layout Shift

Definición

CLS (siglas de Cumulative Layout Shift, o desplazamiento acumulativo del diseño) es una de las tres métricas de Core Web Vitals. Mide cuánto se mueven inesperadamente los elementos visuales de la página durante toda la carga.

Si estás leyendo un texto y de repente la página da un salto porque carga una imagen tarde, o un banner aparece de golpe empujando todo hacia abajo y te hace pinchar un botón equivocado — eso es CLS alto. Una de las experiencias más frustrantes que puede ofrecer una web.

El cálculo combina dos cosas:

  • Impact fraction: cuánto del viewport afecta el movimiento
  • Distance fraction: cuánto se mueven los elementos

Se va acumulando durante la sesión de carga (de ahí "cumulative") y reportando el peor escenario.

Umbrales de Google

CLSCalificación
≤ 0.1Bueno ✅
0.1 – 0.25A mejorar ⚠️
> 0.25Pobre ❌

Es una métrica adimensional (sin unidad). Para aprobar Core Web Vitals, el percentil 75 de tus visitantes debe estar ≤ 0.1.

Causas típicas de mal CLS

  1. Imágenes sin dimensiones declaradas: el navegador reserva 0px hasta que carga, luego "salta" al tamaño real
  2. Fuentes web cargadas tarde (FOIT/FOUT): el texto cambia de tamaño cuando llega la fuente
  3. Anuncios o iframes sin contenedor fijo: aparecen y empujan el contenido
  4. Banners de cookies tardíos que se inyectan después de cargar la página
  5. Carruseles, vídeos embebidos, widgets sin tamaño reservado
  6. Animaciones que cambian width/height en lugar de transform

Cómo evitarlo

1. Reserva siempre el espacio

Para imágenes, declara width y height (o usa CSS aspect-ratio):

<!-- Bien -->
<img src="hero.jpg" alt="..." width="1200" height="800">

<!-- O en CSS -->
<style>
  .hero { aspect-ratio: 3 / 2; }
</style>

El navegador calcula el espacio antes de descargar la imagen.

2. Carga fuentes con font-display: optional o swap

@font-face {
  font-family: 'MiFuente';
  src: url('/fonts/mifuente.woff2') format('woff2');
  font-display: swap; /* o 'optional' para CLS mínimo */
}

Mejor todavía: precargar fuentes críticas (<link rel="preload">).

3. Reserva espacios para anuncios y embeds

<div style="min-height: 250px;">
  <!-- Adsense se inyectará aquí -->
</div>

4. Banner cookies al inicio, no al final

Renderiza el cookie banner antes que el contenido principal o pósicionalo en fixed para que no empuje nada.

5. Evita animar layout properties

/* Mal: cambia layout */
.btn:hover { padding: 20px; }

/* Bien: solo composite */
.btn:hover { transform: scale(1.05); }

Ejemplo práctico

Carga típica de una página con CLS alto:

0.0s ─ HTML carga, texto del artículo visible
0.8s ─ Fuente web carga, el texto cambia de tamaño  ← CLS 0.04
1.5s ─ Imagen hero aparece (sin dimensiones, salta 400px)  ← CLS 0.12
2.2s ─ Banner cookies aparece desde arriba, empuja todo  ← CLS 0.08
3.5s ─ Anuncio de AdSense aparece a mitad del artículo  ← CLS 0.06

CLS total = 0.30 ❌ Pobre

Tras optimizar:

0.0s ─ HTML + CSS con fuentes precargadas, texto correcto
0.6s ─ Imagen hero aparece en espacio reservado (no salta)
1.0s ─ Banner cookies aparece en posición fixed, no empuja
1.8s ─ Anuncio aparece en div con min-height reservado

CLS total = 0.02 ✅ Bueno

Errores comunes

  • Atajos que ocultan el problema en Lighthouse pero lo dejan en producción: Lighthouse no detecta CLS tras interacciones (clic, scroll), solo durante carga inicial. CLS real puede ser peor.
  • Asumir que CLS es solo de carga: las animaciones, transiciones y cambios reactivos del DOM tras carga también cuentan si el usuario no las inició.
  • Cargar contenido AJAX sin reservar espacio: lazy-loading de comentarios, "leer más", filtros que añaden filas... todos pueden causar CLS si no reservas su altura inicial.
  • Optimizar solo en desktop: en móvil con conexión 4G lenta, los efectos son más visibles. Mide siempre las dos vistas.
  • No medir tras añadir un nuevo widget: cada vez que añades chat, cookie consent, ads o embed nuevo, vuelve a medir CLS.

Cuándo priorizar CLS

  • Si Search Console te marca URLs en rojo en CLS — siempre primero, suele ser barato arreglarlo
  • Tras un rediseño grande
  • Tras añadir scripts de terceros (cookies, chat, ads)
  • En cualquier página crítica de conversión (landing, checkout): el usuario que pincha en el botón equivocado por un salto = pérdida directa

Referencias

Tagsrendimientometricascore-web-vitalsseo-tecnicoux
TÉRMINOS RELACIONADOS

Explora también

SEO
Core Web Vitals

Conjunto de métricas de Google que miden la experiencia real del usuario en una web — carga, interactividad y estabilidad visual. Factor de ranking desde 2021.

Leer
SEO
LCP (Largest Contentful Paint)

Métrica de Core Web Vitals que mide el tiempo hasta que el elemento más grande visible del viewport termina de renderizarse. Indicador de velocidad de carga percibida.

Leer
SEO
INP (Interaction to Next Paint)

Métrica de Core Web Vitals que mide la latencia de respuesta del sitio a interacciones del usuario (clic, tap, tecla). Reemplazó a FID en marzo 2024.

Leer
SEO
Schema markup

Código estructurado (JSON-LD) que se añade al HTML para que los buscadores entiendan el contenido y muestren resultados enriquecidos (rich snippets) en Google.

Leer
SEO
Sitemap

Archivo XML que lista todas las URLs de tu sitio para que los buscadores las descubran e indexen. Imprescindible para SEO en sitios con muchas páginas.

Leer
SEO
Crawl budget

Cantidad de páginas que el rastreador de Google está dispuesto y es capaz de visitar en un sitio durante un periodo determinado, condicionada por su autoridad y salud técnica.

Leer
← Volver al diccionario de SEO