Cumulative Layout Shift (CLS): definición, causas y soluciones

¿Qué es Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) es una Core Web Vital que puntúa cuánto se mueve de forma inesperada el contenido visible mientras se usa una página. Es un número sin unidades: la mayor ráfaga de cambios de diseño durante la visita. Google considera bueno un valor de 0,1 o menos y deficiente uno superior a 0,25, evaluado en el percentil 75 de cargas de página, por separado en móvil y en escritorio.

Refleja el momento en que vas a pulsar un botón, la página salta y acabas tocando un anuncio. El CLS es una de las tres Core Web Vitals, junto con LCP (carga) e INP (capacidad de respuesta). La velocidad de carga se explica en la entrada del LCP.

Umbrales del CLS

Los umbrales se mantienen en web.dev.

Cómo se calcula el CLS

Cada cambio inesperado recibe una puntuación: puntuación del cambio = fracción de impacto x fracción de distancia.

• Fracción de impacto: el área visible combinada de los elementos inestables, antes y después del cambio, como fracción de la ventana.
• Fracción de distancia: la mayor distancia que se movió un elemento inestable, como fracción de la dimensión más grande de la ventana.

Los cambios se agrupan en ventanas de sesión: ráfagas con menos de 1 segundo entre cambios y 5 segundos como máximo en total. El CLS es la puntuación de la peor ventana, no la suma de toda la visita. Se excluyen los cambios que ocurren dentro de los 500 milisegundos posteriores a un toque, clic o pulsación de tecla, porque los provocó el visitante. Hacer scroll, arrastrar y el zoom con pellizco no cuentan como esa interacción.

Ejemplo: un banner que empuja el artículo hacia abajo

Supón que una imagen ocupa la mitad de la ventana y un banner de carga tardía la empuja hacia abajo un cuarto de la altura. El área afectada antes y después cubre tres cuartos de la ventana (fracción de impacto 0,75) y la fracción de distancia es 0,25. El cambio puntúa 0,75 x 0,25 = 0,1875, que por sí solo ya cae en el rango de necesita mejorar. Las cifras son ilustrativas; las páginas reales tienen muchos cambios pequeños.

Qué causa los cambios de diseño

Cómo corregir el CLS

Da a cada imagen y vídeo sus dimensiones, para que el espacio exista antes de que llegue el archivo (el resto de la lista de imágenes está en tamaño de imagen):

<!-- shifts the page when it loads -->
<img src="/img/banner.jpg" alt="Sale banner">

<!-- reserves the space up front -->
<img src="/img/banner.jpg" alt="Sale banner" width="1200" height="400">

• Reserva espacio para el contenido que carga después, como anuncios, contenido incrustado y avisos de cookies, con una altura fija o mínima.
• No insertes contenido nuevo encima de lo que el visitante ya está leyendo, salvo que lo haya pedido.
• Usa transform: translate() y transform: scale() para animaciones de movimiento y tamaño en lugar de cambiar top, height o width, como recomienda web.dev.
• Para el contenido que aparece tras un clic, muestra un indicador de carga de tamaño fijo.

Errores comunes con el CLS

• Añadir dimensiones a la imagen principal pero olvidar el logo, los avatares y las imágenes del artículo.
• Colapsar un hueco de anuncio cuando ningún anuncio lo llena, de modo que el contenido de debajo salta.
• Probar solo la primera pantalla, cuando los cambios ocurren más abajo o más tarde en la visita.
• Fiarse solo de una puntuación de laboratorio, que suele terminar poco después de la carga, mientras los visitantes reales viven toda la visita.

Cómo medir el CLS

Lighthouse y Chrome DevTools muestran los cambios de una única carga controlada, lo que ayuda a localizar el elemento. Los datos de campo de visitantes reales, como el monitoreo de usuarios reales que recopiles tú mismo o el Chrome UX Report, cubren toda la visita y deciden el resultado de las Core Web Vitals. Para registrar el CLS con la biblioteca web-vitals de Google:

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

El CLS en las pruebas y la monitorización

La monitorización de velocidad de página de LoadFocus ejecuta auditorías de Lighthouse programadas desde 25 regiones en la nube y registra las Core Web Vitals, incluido el CLS, de modo que un cambio de plantilla que empiece a mover contenido se vea como tendencia. El verificador gratuito de Core Web Vitals muestra el CLS de usuarios reales de Chrome para una URL en el percentil 75. Las correcciones paso a paso de las tres métricas están en nuestra guía de optimización de Core Web Vitals. Para leer más: cómo monitorizar las Core Web Vitals con alertas e informes y 10 pasos para una web más rápida.

Preguntas frecuentes: Cumulative Layout Shift

¿Qué es un buen valor de CLS?

0,1 o menos en el percentil 75 de las cargas de página. Entre 0,1 y 0,25 necesita mejorar, y más de 0,25 es deficiente.

¿Cuenta un cambio después de pulsar un botón?

No, si ocurre dentro de los 500 milisegundos posteriores al toque, clic o pulsación de tecla, porque lo provocó el visitante. Hacer scroll, arrastrar y el zoom con pellizco no cuentan como ese tipo de interacción.

¿Necesito width y height en todas las imágenes?

En toda imagen y vídeo cuyo tamaño no quede ya fijado por tu diseño. Permiten al navegador reservar el espacio antes de que cargue el archivo. Un aspect-ratio en CSS cumple la misma función.

¿Por qué mi CLS de campo es peor que el de laboratorio?

Una prueba de laboratorio suele cubrir solo la carga, mientras que los datos de campo cubren toda la visita, incluidos anuncios, banners y contenido que aparece al hacer scroll. Además, los dispositivos y conexiones reales difieren de la configuración de la prueba.

¿Cómo encuentro el elemento que se desplaza?

Ejecuta Lighthouse y lee sus diagnósticos de cambios de diseño, o graba un registro en el panel Rendimiento de Chrome DevTools, que marca los cambios de diseño y los elementos implicados.