CLS (Cumulative Layout Shift): qué es y cómo evitarlo

El CLS (Cumulative Layout Shift) mide la suma total de todos los cambios de diseño inesperados que ocurren en una página durante su carga. En términos simples: es la métrica que cuantifica cuánto «saltan» los elementos visuales antes de que la página quede estable.

Un buen CLS es 0.1 o menos. Si supera 0.25, Google lo considera un score deficiente y penaliza tu posicionamiento en búsqueda.

Por qué el CLS importa (y qué lo causa)

Imagina que estás leyendo un artículo en el móvil, vas a tocar un enlace y, en ese preciso momento, una imagen sin dimensiones termina de cargar y empuja todo el texto hacia abajo. Acabas de hacer clic en el botón equivocado. Eso es un layout shift — y sucede millones de veces al día en sitios con CLS alto.

Las causas más frecuentes son:

• Imágenes sin atributos width y height: el navegador no reserva espacio hasta que descarga la imagen.
• Anuncios, embeds e iframes sin dimensiones fijas: aparecen de la nada y desplazan el contenido circundante.
• Fuentes web (FOUT/FOIT): cuando la fuente descargada tiene métricas distintas a la fuente de respaldo, el texto cambia de tamaño.
• Contenido inyectado dinámicamente: banners, popups o widgets que se insertan sobre contenido ya visible.
• Animaciones CSS con propiedades que afectan el layout: usar top, left, margin en lugar de transform.

Cómo se calcula el CLS

Cada layout shift individual se calcula multiplicando dos factores:

• Fracción de impacto: qué porcentaje del viewport se vio afectado.
• Fracción de distancia: qué tan lejos se movió el elemento más alejado, como fracción del viewport.

El CLS total es la suma de todos esos valores individuales durante la vida de la página (con ventanas de sesión de 5 segundos para agrupar shifts consecutivos).

Por eso un solo anuncio grande que aparece en la parte superior de la página puede disparar el CLS por encima de 0.5 de golpe.

Cómo medir tu CLS actual

Antes de corregir, mide. Estas herramientas te dan el dato:

El reporte de Core Web Vitals en Search Console es el más importante porque usa datos reales de Chrome (CrUX). Si ahí apareces en rojo, Google ya está penalizando tu sitio.

Técnicas concretas para reducir el CLS

1. Siempre declara dimensiones en imágenes y videos

Añade width y height a todas tus etiquetas <img>. Los navegadores modernos calculan automáticamente el aspect ratio y reservan el espacio necesario antes de descargar la imagen:

<img src="foto.jpg" width="800" height="450" alt="Descripción de la imagen">

Para imágenes responsivas, combina esto con max-width: 100% en CSS. El navegador calcula el espacio proporcional incluso antes de que la imagen llegue.

2. Reserva espacio para anuncios e iframes

Si usas publicidad (Google Ads, redes de display) o embeds de terceros, define un contenedor con dimensiones mínimas fijas mediante CSS:

.ad-slot {
  min-height: 250px;
  width: 300px;
}

Así, aunque el anuncio tarde en cargar, el espacio ya está reservado y ningún elemento de la página se desplazará.

3. Controla las fuentes web con font-display

Usa font-display: optional o font-display: swap junto con font metrics override para minimizar el impacto visual cuando cambia de fuente de respaldo a fuente descargada:

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.woff2') format('woff2');
  font-display: optional;
}

optional es la opción más agresiva: si la fuente no está en caché, el navegador simplemente usa la del sistema sin intentar el swap y elimina el shift completamente.

4. Evita insertar contenido sobre el existente

Los banners de cookies, popups de newsletter y notificaciones que aparecen en la parte superior desplazan todo el contenido hacia abajo. Colócalos en posiciones fijas (position: fixed o position: sticky) que no afecten el flujo del documento, o bien muéstralos antes de que el usuario pueda interactuar con la página.

5. Anima con transform, nunca con propiedades de layout

Si necesitas animar elementos, usa transform y opacity. Estas propiedades se procesan en la GPU y no provocan reflows:

/* Malo — provoca layout shift */
.alerta { transition: top 0.3s; }

/* Bueno — solo compositing */
.alerta { transition: transform 0.3s; }

CLS en WordPress: soluciones rápidas

Si tu sitio corre en WordPress, los plugins de rendimiento facilitan gran parte del trabajo:

• WP Rocket: incluye opciones para precargar fuentes y optimizar imágenes con dimensiones automáticas.
• Imagify / ShortPixel: convierten imágenes a WebP y pueden añadir atributos de tamaño automáticamente.
• Autoptimize: permite controlar la carga de fuentes y diferir scripts que podrían provocar shifts.

Para un diagnóstico más completo de tu sitio, revisa los demás artículos en nuestra sección de optimización de rendimiento web.

Conclusiones clave

• El CLS mide la inestabilidad visual de una página; el umbral de «bueno» es ≤ 0.1.
• Las imágenes sin dimensiones y los anuncios sin contenedor son las causas número uno.
• Declarar width y height en cada <img> es la corrección con mayor impacto y menor esfuerzo.
• Reserva espacio para contenido de terceros (ads, embeds) antes de que cargue.
• Usa font-display: optional para eliminar el shift causado por fuentes web.
• Anima solo con transform/opacity, nunca con propiedades que afecten el flujo.

¿Quieres mejorar el CLS y todos tus Core Web Vitals de forma profesional? En elenlace.com auditamos y optimizamos sitios web para que cumplan los estándares de Google y conviertan mejor.

Preguntas frecuentes

¿El CLS afecta directamente mi posicionamiento en Google?

Sí. Desde mayo de 2021, el CLS forma parte de las señales de Page Experience que Google usa como factor de ranking. Un CLS deficiente (mayor a 0.25) puede hacerte perder posiciones frente a competidores con sitios más estables visualmente.

¿Cuánto tarda en reflejarse la mejora del CLS en Search Console?

Google actualiza el reporte de Core Web Vitals en Search Console aproximadamente cada 28 días, usando datos de usuarios reales acumulados en ese periodo. Verás las mejoras reflejadas dentro de 4 a 6 semanas después de implementar los cambios.

¿El CLS se mide igual en móvil que en escritorio?

Se mide con la misma fórmula, pero los valores suelen diferir porque los viewports son distintos y los elementos se redistribuyen de forma diferente. Es común que el CLS en móvil sea más alto; revisa ambos reportes en Search Console de forma independiente.

¿Puedo tener CLS alto aunque mis imágenes tengan dimensiones?

Sí. Las imágenes son la causa más común, pero no la única. Fuentes web con métricas diferentes a su fallback, anuncios sin contenedor, scripts que insertan contenido dinámico y animaciones mal implementadas también generan layout shifts significativos.

¿Prefieres que lo hagamos por ti? En El Enlace resolvemos hosting y desarrollo web profesional.

Compara proveedores

Otros proveedores y guías que vale la pena comparar:

• IONOS
• GoDaddy
• HostGator México