CLS alto: cómo encontrar y corregir cambios inesperados de layout

Lectura ejecutiva

Conclusiones principales

• El elemento que se mueve puede ser distinto del que causó el movimiento.
• Define dimensiones o proporción para imágenes, videos e iframes.
• Reserva espacio para banners y contenido asíncrono.
• Prueba sesiones largas e interacciones, no solo la carga inicial.

Cumulative Layout Shift mide cambios inesperados de posición durante la visita. El problema no es simplemente que la página se mueva, sino que el contenido cambie sin aviso mientras la persona lee, apunta, hace clic o completa una tarea.

El límite recomendado es 0,1 en el percentil 75. Como los cambios pueden ocurrir después de la carga, una prueba corta puede no capturar consentimiento tardío, anuncios, fuentes, recomendaciones o componentes abiertos.

Distingue víctima y causa

Las herramientas suelen destacar el elemento que se movió. Puede ser solo la víctima. Si un banner se inserta sobre el título, título, texto y botón se desplazan, pero el banner causó el evento.

Registra elemento desplazado, elemento insertado o redimensionado, momento, acción cercana, área, valor, template y dispositivo. Performance de Chrome ayuda a reproducir.

Define dimensiones para medios

Cuando el navegador conoce ancho y alto, reserva la proporción:

<img
  src="/producto.webp"
  width="800"
  height="600"
  alt="Producto visto de frente"
>

CSS responsivo sigue funcionando:

img {
  max-width: 100%;
  height: auto;
}

Aplica el principio a video, iframe, mapa y embed. Usa aspect-ratio cuando corresponda. No reserves un rectángulo enorme solo para reducir la métrica; el espacio excesivo también perjudica.

Reserva espacio para contenido asíncrono

Banners de consentimiento, mensajes de envío, reseñas, recomendaciones, anuncios y alertas pueden llegar tarde.

Reserva altura mínima realista, usa overlay si no cubre controles, inserta debajo del contenido leído, usa skeleton con dimensiones finales o reemplaza dentro de un contenedor estable.

Un skeleton que cambia de altura solo cambia un shift por otro. Modela el estado final.

No insertes promociones sobre el contenido

Una franja promocional inyectada arriba desplaza toda la página. Si es necesaria, renderiza su espacio desde la respuesta inicial o usa una posición que no reordene contenido visible.

Lo mismo vale para avisos de aplicación, envío, ubicación, encuestas, login y precio. Analiza valor comercial y coste de inestabilidad. La solución puede ser cambiar la posición.

Estabiliza fuentes

Las fuentes web pueden cambiar ancho, alto y saltos de línea al sustituir el fallback. El título crece, el botón baja y el resto se mueve.

Usa fallbacks con métricas próximas, carga solo pesos necesarios, crea subsets, configura caché, prioriza fuentes críticas y considera size-adjust. Prueba idiomas, negrita y contenido largo.

font-display influye en el momento del cambio, pero no elimina diferencias métricas.

Evita medir layout durante cambios

Layout thrashing alterna lecturas y escrituras del DOM, creando recálculos y estados intermedios. Agrupa lecturas y luego escrituras. Prefiere CSS que produzca la geometría final.

Los componentes que miden altura después de montar pueden parpadear. Cuando sea posible, deriva dimensiones de CSS o proporciona datos en servidor.

Animaciones e interacciones esperadas

Los cambios asociados a una interacción reciente pueden tratarse distinto. Eso no justifica interfaces que hacen perder el contexto.

Un accordion puede expandir después del clic, pero debe mantener foco, preservar lectura, respetar prefers-reduced-motion y no bloquear interacción.

Para movimiento visual sin recalcular layout, transform y opacity suelen ser apropiados. Prueba accesibilidad.

Investiga anuncios y embeds

Los slots pueden variar y renovarse. Define tamaños aceptados, reserva el mayor espacio razonable por breakpoint y no colapses inmediatamente un slot vacío.

Embeds sociales y videos llegan con dimensiones propias. Usa wrapper estable y valida error. Si el proveedor cambia tamaño después, considera aislamiento o click-to-load.

Captura shifts después de cargar

1. carga la página;
2. espera consentimiento y terceros;
3. desplázate lentamente;
4. abre menús, filtros y accordions;
5. cambia orientación o ancho;
6. simula contenido largo;
7. espera actualizaciones;
8. navega como usuario recurrente.

La atribución propia de campo ayuda a localizar URLs y componentes tardíos respetando privacidad.

Evita correcciones cosméticas

Ocultar overflow puede esconder movimiento sin corregir la causa. Alturas enormes pueden cortar contenido o crear vacíos. Desactivar un módulo solo en la prueba no mejora usuarios reales.

La corrección debe preservar contenido, responsividad y accesibilidad.

Observación: después de 1,5 segundos, la franja de envío se inserta sobre el título y mueve todo el viewport. Acción: renderizar el contenedor y mensaje inicial en HTML, actualizando el texto dentro de la misma altura. Aceptación: no hay shift, el contenido es correcto y lectores de pantalla reciben la actualización sin perder foco.

CLS es una métrica de previsibilidad. Corregirlo significa mantener la interfaz coherente mientras llegan datos, medios y componentes, sin hacer que el usuario persiga el contenido.

Respuestas directas

Preguntas frecuentes

¿Cuál es un buen CLS?

La recomendación actual es CLS de hasta 0,1 en el percentil 75, separado entre mobile y desktop.

¿Toda animación aumenta CLS?

No. Transformaciones y movimientos esperados tras interacción pueden tratarse de forma diferente. Aun así, deben preservar legibilidad, foco y preferencia por movimiento reducido.

¿width y height quitan responsividad a la imagen?

No. Los atributos definen la proporción intrínseca. CSS puede mantenerla responsiva con ancho máximo y altura automática.