Cómo corregir el CLS (Cambio de Diseño Acumulativo) en 2026: paso a paso

Las puntuaciones de Cambio de Diseño Acumulativo (CLS) superiores a 0,1 se clasifican como "necesita mejorar" según los umbrales de Core Web Vitals de Google, y las puntuaciones superiores a 0,25 se consideran "deficientes". Corregir el CLS antes de que llegue a los usuarios es más barato que recuperar el posicionamiento perdido después del hecho; comienza con la medición y luego corrige las causas raíz en orden de prioridad.

¿Qué es el Cambio de Diseño Acumulativo?#

El CLS es una métrica de Core Web Vitals que cuantifica cuánto se mueve inesperadamente el contenido visible de la página durante toda la vida útil de una visita a la página. Cada cambio de diseño individual aporta una puntuación igual a la fracción de impacto (cuánto se movió la ventana gráfica) multiplicada por la fracción de distancia (cuánto se movió). Google agrega estos valores en una puntuación de ventana de sesión e informa de la peor ventana.

Una puntuación de 0 significa que no se movió nada. Una puntuación de 0,1 o inferior es "buena". Cualquier cosa por encima de eso es una responsabilidad medible para la UX y el posicionamiento.

¿Por qué sigue importando el CLS en 2026?#

Google utiliza datos de campo del informe Chrome User Experience Report (CrUX), no solo datos de laboratorio, para evaluar Core Web Vitals para el posicionamiento. El CLS es una de las tres señales en la actualización Page Experience junto con Largest Contentful Paint (LCP) e Interaction to Next Paint (INP).

Más allá del posicionamiento, un CLS alto causa daños reales: los usuarios tocan accidentalmente el botón equivocado, los formularios se reinician y el flujo de lectura se interrumpe a mitad de la frase. Estos resultados aumentan las tasas de rebote y reducen la conversión.

¿Cómo se mide el CLS con precisión?#

Utiliza herramientas de laboratorio y de campo, porque capturan diferentes modos de fallo.

Herramientas de laboratorio (para la depuración):

• Panel de rendimiento de Chrome DevTools: registra la carga de una página e inspecciona los clústeres de Cambio de diseño en la pista de experiencia
• Lighthouse (integrado en DevTools o CLI): marca el CLS y enlaza con los elementos contribuyentes
• WebPageTest: proporciona una vista de tira de película para que puedas verificar visualmente cuándo se producen los cambios

Herramientas de campo (para datos de usuarios reales):

• Google Search Console → Informe Core Web Vitals: muestra el estado del CLS agrupado por tipo de URL
• PageSpeed Insights: combina los datos de campo de CrUX con los datos de laboratorio de Lighthouse en la misma pantalla
• Biblioteca de JavaScript Web Vitals (web-vitals paquete npm): te permite registrar el CLS en tus propios análisis

Prioriza siempre la corrección de las URL marcadas como "deficientes" en Search Console en primer lugar, porque afectan directamente al posicionamiento.

¿Qué causa un CLS alto?#

La gran mayoría de los problemas de CLS se engloban en un pequeño conjunto de causas raíz.

Imágenes y vídeos sin dimensiones explícitas

Cuando el navegador no conoce las dimensiones de una imagen antes de cargarla, asigna cero espacio. A continuación, la imagen empuja el contenido hacia abajo cuando llega. Solución: establece siempre los atributos width y height en los elementos <img> y <video>, y utiliza CSS aspect-ratio como alternativa.

Anuncios, elementos incrustados e iframes sin espacio reservado

Los espacios publicitarios de terceros y los elementos incrustados sociales inyectan contenido de forma asíncrona. El navegador no tiene ninguna advertencia anticipada de su tamaño. Solución: reserva la altura máxima esperada de la ranura con un marcador de posición CSS antes de que se cargue el anuncio.

Fuentes web que causan FOUT o FOIT

El Flash of Unstyled Text (FOUT) o Flash of Invisible Text (FOIT) provocan un reflujo del texto cuando se intercambia la fuente personalizada, desplazando los elementos circundantes. Solución: utiliza font-display: optional para las fuentes no críticas, o font-display: swap combinado con los descriptores size-adjust y ascent-override para que coincidan las métricas de reserva con la fuente personalizada.

Contenido inyectado dinámicamente por encima del contenido existente

Los banners, los avisos de consentimiento de cookies y los encabezados "pegajosos" insertados en la parte superior de la página después de la renderización inicial empujan la página hacia abajo. Solución: prerrenderiza estos elementos en el lado del servidor, o utiliza CSS position: fixed / sticky para que se superpongan en lugar de desplazar el contenido.

Animaciones que utilizan propiedades CSS que desencadenan el diseño

Animar top, left, width, height o margin fuerza el recálculo del diseño y contribuye al CLS. Solución: anima solo transform y opacity, que se componen en la GPU y no desencadenan el diseño.

¿Cómo se corrige el CLS relacionado con las imágenes?#

Esta es la corrección de mayor impacto para la mayoría de los sitios.

1. Audita cada etiqueta <img>: confirma que los atributos width y height están presentes con las dimensiones intrínsecas en píxeles.
2. Añade CSS img { height: auto; } globalmente para que el escalado responsivo siga funcionando incluso cuando se establecen dimensiones explícitas.
3. Para las imágenes adaptables que utilizan srcset, establece las dimensiones más grandes como atributos width/height: el navegador utiliza la relación de aspecto, no el tamaño literal.
4. Para los elementos <picture> con recortes de dirección de arte en diferentes puntos de interrupción, utiliza la propiedad CSS aspect-ratio por punto de interrupción en un bloque <style>.
5. Para las imágenes de carga diferida por debajo del pliegue, incluye también las dimensiones: la carga diferida retrasa la búsqueda, pero no la asignación de espacio.

¿Cómo se corrige el CLS relacionado con las fuentes?#

El CLS de intercambio de fuentes es sutil pero medible, especialmente en páginas con mucho texto.

1. Aloja las fuentes tú mismo siempre que sea posible para eliminar la latencia de búsqueda de DNS que retrasa la disponibilidad de las fuentes.
2. Utiliza <link rel="preload" as="font"> para la fuente del cuerpo principal para que llegue antes de la primera pintura.
3. Añade font-display: optional para las fuentes decorativas que no son críticas para el diseño: el navegador utiliza la alternativa si la fuente no está en la caché, evitando cualquier intercambio.
4. Utiliza los descriptores CSS size-adjust, ascent-override y descent-override dentro de @font-face para que coincidan las métricas de tu fuente de reserva con la fuente personalizada, eliminando el reflujo en el intercambio.
5. Prueba con la pestaña Red limitada a 3G lento para reproducir los peores escenarios de intercambio.

¿Cómo se corrige el CLS de anuncios y terceros?#

El contenido de terceros es la fuente de CLS más difícil de controlar porque no eres el propietario del código.

1. Reserva las dimensiones explícitas de las ranuras. Envuelve cada anuncio o elemento incrustado en un contenedor con una min-height fija que coincida con el tamaño creativo máximo esperado.
2. Utiliza un marcador de posición de esqueleto CSS. Un bloque de fondo gris del mismo tamaño que el anuncio esperado evita un cambio discordante de vacío a contenido.
3. Carga scripts de terceros con async o defer. Los scripts que bloquean el hilo principal retrasan el punto en el que se llena el espacio reservado, extendiendo la ventana de cambio.
4. Audita con la función "Bloquear" de WebPageTest. Bloquea dominios de terceros individuales para aislar qué script causa qué cambio.
5. Considera la posibilidad de trasladar los banners de consentimiento y los avisos de cookies a los modales de superposición en lugar de a los banners de la parte superior de la página que desplazan el contenido.

¿Cómo se utiliza la bfcache para evitar el CLS en la navegación?#

La caché de atrás-adelante (bfcache) restaura una instantánea de página totalmente renderizada cuando los usuarios navegan hacia atrás o hacia adelante, eliminando los cambios de diseño causados por la recarga de contenido dinámico. La mayoría de los navegadores modernos son compatibles con bfcache, pero las páginas con detectores de eventos unload, encabezados Cache-Control: no-store o transacciones IndexedDB en curso no son elegibles.

Para maximizar la elegibilidad de bfcache:

• Elimina todos los detectores de eventos unload; reemplaza con pagehide
• Evita Cache-Control: no-store en las páginas que no contienen datos confidenciales
• Cierra las conexiones IndexedDB abiertas antes de que el usuario navegue

Esta es una prioridad para 2025-2026 porque Google ahora mide el CLS a través de las navegaciones, no solo las cargas iniciales.

¿Cómo se validan las correcciones antes de la implementación?#

Nunca envíes correcciones de CLS a ciegas; verifica primero en un entorno de prueba.

1. Ejecuta Lighthouse en la URL de prueba y confirma que la puntuación de CLS cae a 0,1 o menos.
2. Registra un perfil de rendimiento en Chrome DevTools y confirma que no aparecen entradas de Cambio de diseño en la pista de experiencia durante el recorrido crítico del usuario.
3. Utiliza la API PerformanceObserver con type: 'layout-shift' para registrar las entradas de cambio individuales durante las pruebas de control de calidad:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift value:', entry.value, entry);
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

4. Después de la implementación, supervisa el informe Core Web Vitals de Search Console. Los datos de campo suelen actualizarse en un plazo de 28 días a medida que se recopilan nuevos datos de CrUX.

¿Cuál es un buen objetivo de puntuación de CLS para 2026?#

Apunte a 0,1 o menos. Muchos sitios de alta calidad alcanzan 0,05 o menos. El techo práctico para "ningún cambio visible" que la mayoría de los usuarios perciben es de aproximadamente 0,05; por encima de eso, los movimientos sutiles se hacen notables, especialmente en los dispositivos móviles donde las fracciones de la ventana gráfica son mayores en términos absolutos de píxeles.

Prioriza el CLS móvil por separado del escritorio. Las señales de posicionamiento de Google se extraen de los datos móviles de CrUX para las páginas indexadas para móviles, y las ventanas gráficas móviles hacen que cada cambio de diseño sea más impactante visualmente.

Orden de prioridad de corrección de CLS#

Cuando el tiempo es limitado, corrige en este orden según la frecuencia y el impacto:

1. Imágenes sin dimensiones: el impacto más amplio, la corrección más fácil
2. Reflujo de intercambio de fuentes: alto impacto en páginas con mucho texto
3. Contenido dinámico por encima del pliegue (banners, avisos): interrupción visual inmediata
4. Reserva de espacios publicitarios e integrados: difícil pero esencial para los sitios con publicidad
5. Animaciones que activan el diseño: por lo general, una menor contribución al CLS, pero vale la pena auditarlo
6. Elegibilidad de bfcache: prioridad moderna, victorias fáciles con la eliminación del detector de unload