Has vivido el CLS aunque no supieras que tenía nombre: estás a punto de hacer clic en un botón y justo antes de que tu dedo lo toque, aparece un banner encima y el botón baja. Acabas de hacer clic en el banner. Eso es un layout shift. El CLS (Cumulative Layout Shift) cuantifica cuánto ocurre eso en tu página y tiene impacto directo en el SEO.

¿Cómo se calcula el CLS?

Cada layout shift individual se calcula multiplicando la fracción del viewport que se ha movido (impact fraction) por la distancia que se ha movido en relación al viewport (distance fraction). El CLS final es la suma de todos los layout shifts agrupados en ventanas de tiempo de 5 segundos.

A partir de 2022, Google aplica el "windowed CLS": agrupa los shifts en ventanas de 5 segundos con un máximo de 1 segundo entre shifts consecutivos, y reporta la ventana con mayor CLS acumulado. Esto beneficia a páginas largas con contenido que carga en fases.

Causa 1: Imágenes y vídeos sin dimensiones definidas

La causa más común de CLS. Cuando una imagen carga sin que el navegador sepa su tamaño de antemano, el navegador no reserva espacio para ella y el contenido circundante se desplaza cuando aparece.

html

<!-- Incorrecto: el navegador no sabe el tamaño hasta que carga la imagen -->
<img src="/foto.jpg" alt="Descripción">

<!-- Correcto: define siempre width y height -->
<img src="/foto.jpg" alt="Descripción" width="800" height="600">

<!-- En CSS responsivo, mantén el aspect-ratio con la técnica de padding -->
<style>
  .imagen-contenedor {
    aspect-ratio: 4 / 3; /* Reserva el espacio correcto */
    width: 100%;
  }
  .imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

Causa 2: Anuncios, embeds e iframes sin espacio reservado

Los anuncios son la causa número uno de CLS en sitios con publicidad. Cuando el anuncio carga después del contenido y empuja el texto hacia abajo, produce un shift enorme. Lo mismo ocurre con embeds de redes sociales, videos de YouTube y otros iframes.

•Reserva siempre un espacio mínimo para los slots de anuncios antes de que carguen — usa min-height en el contenedor del anuncio.
•Evita insertar anuncios encima de contenido que ya es visible en pantalla.
•Para embeds de YouTube, usa la técnica de placeholder con la miniatura del video — carga el iframe real solo cuando el usuario hace clic.
•Define width y height en todos los iframes, o usa aspect-ratio para que el navegador reserve el espacio.

Causa 3: Fuentes web con FOUT (Flash of Unstyled Text)

Cuando el navegador muestra primero el texto con la fuente del sistema y luego lo sustituye por la fuente web, si ambas fuentes tienen métricas distintas (altura de línea, espaciado), el texto reflow ocupa un espacio diferente y produce un layout shift.

•Usa font-display: optional para fuentes decorativas — el navegador solo aplica la fuente web si ya está en caché, evitando el FOUT.
•Ajusta las métricas de la fuente fallback con las propiedades size-adjust, ascent-override y descent-override para que se parezca a la fuente web.
•Preloada las fuentes críticas para que estén disponibles antes del primer renderizado.

css

/* Técnica size-adjust para aproximar la fuente fallback a la web font */
@font-face {
  font-family: 'MiFuenteFallback';
  src: local('Arial');
  size-adjust: 105%;         /* Ajusta el tamaño para que ocupe el mismo espacio */
  ascent-override: 90%;      /* Ajusta la altura de los caracteres */
  descent-override: 20%;     /* Ajusta el espacio debajo de la línea base */
}

Causa 4: Contenido inyectado dinámicamente

Los banners de cookies, los pop-ups de bienvenida, las barras de notificación y cualquier contenido que se inyecte en el DOM después del renderizado inicial pueden producir CLS si se insertan encima o entre el contenido existente.

•Los banners de cookies deben ser overlays que aparecen encima del contenido (position: fixed o position: sticky), no elementos que empujan el contenido.
•Si necesitas insertar contenido dinámico, hazlo al final del DOM — fuera del viewport visible — en lugar de al principio.
•Para animaciones de entrada, usa transform y opacity — no cambian el layout. Evita animar height, width, margin o padding.

Causa 5: Animaciones CSS que afectan al layout

Las animaciones CSS que modifican propiedades que afectan al layout (height, width, margin, padding, top, left) causan reflows en el navegador y pueden producir shifts. Las animaciones que usan transform y opacity son mucho más eficientes y no producen CLS.

css

/* Incorrecto: anima propiedades que afectan al layout */
@keyframes slide-in-bad {
  from { margin-top: -100px; }
  to { margin-top: 0; }
}

/* Correcto: usa transform que no afecta al layout de otros elementos */
@keyframes slide-in-good {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Cómo identificar qué está causando tu CLS

El Monitor Core Web Vitals de iRankly te muestra el CLS actual de cada URL junto a las recomendaciones específicas. Para un análisis más detallado, abre Chrome DevTools → Performance → graba mientras la página carga y busca los bloques rojos de "Layout Shift" en el timeline. Haz clic en cada uno para ver qué elemento causó el shift.

Prueba la herramienta gratis

Analiza tus URLs con Monitor Core Web Vitals de iRankly. Sin registro, sin tarjeta.

Usar herramienta gratis

La extensión de Chrome "Web Vitals" muestra el CLS en tiempo real mientras navegas por tu sitio. Es la forma más rápida de detectar qué interacciones o fases de carga producen los shifts más grandes.

Las otras dos métricas y cómo aplicarlo en WordPress:

CLS: Qué es el Cumulative Layout Shift y Cómo Eliminarlo