El Cumulative Layout Shift (CLS) mide la estabilidad visual de una página: cuánto se desplazan inesperadamente los elementos mientras el contenido carga. Un CLS alto significa que botones, textos e imágenes "saltan" de lugar, haciendo que el usuario haga clic en lo que no quería o pierda su lugar de lectura.
Es uno de los tres Core Web Vitals que Google usa como señal de ranking, junto con LCP e INP. Si tu CLS es alto, tanto tus usuarios como tu posicionamiento lo resienten.
¿Cómo se mide el CLS?
El CLS no se mide en segundos ni en milisegundos: es una puntuación adimensional que combina dos factores por cada salto de layout:
- Fracción de impacto: qué porcentaje del viewport ocupa el elemento antes y después del desplazamiento.
- Fracción de distancia: qué tanto se movió el elemento en relación al tamaño del viewport.
La fórmula es: puntuación de layout shift = fracción de impacto × fracción de distancia. El CLS de la página es la suma de todas estas puntuaciones durante la sesión de carga.
Umbrales de Google
| Puntuación CLS | Valoración |
|---|---|
| 0.1 o menos | Bueno |
| Entre 0.1 y 0.25 | Necesita mejora |
| Más de 0.25 | Malo |
El objetivo es mantener el CLS en 0.1 o menos para que Google considere tu página "buena" en este indicador.
¿Qué provoca un CLS alto?
La mayoría de los problemas de CLS tienen causas concretas y bien conocidas. Identificarlas es el primer paso para corregirlas.
Imágenes y vídeos sin dimensiones declaradas
Cuando el navegador no sabe el tamaño de una imagen antes de cargarla, reserva cero espacio. En cuanto llega la imagen, empuja todo el contenido que está debajo. Declarar width y height en el HTML (o usar el atributo CSS aspect-ratio) elimina este problema de raíz.
Anuncios, embeds e iframes de tamaño dinámico
Los bloques de publicidad suelen cargarse tarde y con un tamaño diferente al del contenedor que los rodea. Reserva siempre el espacio mínimo con un contenedor de altura fija o con min-height antes de que el anuncio aparezca.
Fuentes web que causan FOUT o FOIT
Cuando una fuente personalizada tarda en llegar, el navegador usa primero una fuente del sistema. Al intercambiar, el texto puede cambiar de tamaño y desplazar otros elementos. Usar font-display: optional o precargar las fuentes críticas con <link rel="preload"> reduce este efecto.
Contenido inyectado dinámicamente
Banners de cookies, barras de aviso, chats de soporte que aparecen encima del contenido existente son una fuente frecuente de CLS. Si el contenido dinámico debe aparecer al principio, reserva su espacio desde el HTML inicial.
Cómo diagnosticar tu CLS
Antes de corregir, necesitas medir. Estas herramientas te dan datos reales o de laboratorio:
- PageSpeed Insights — combina datos de campo (CrUX) y datos de laboratorio. Muestra el CLS real de tus usuarios.
- Chrome DevTools → Performance — graba una sesión y verás cada Layout Shift marcado en la línea de tiempo con su puntuación individual.
- Web Vitals Extension — extensión oficial de Chrome que muestra el CLS en tiempo real mientras navegas.
- Search Console → Core Web Vitals — agrupa tus URLs por estado (bueno/mejorar/malo) con datos reales de usuarios.
Los datos de campo (usuarios reales) siempre son más fiables que los de laboratorio para el CLS, porque los shifts pueden depender de la velocidad de conexión, plugins del navegador o comportamiento del usuario.
Cómo mejorar el CLS paso a paso
Una vez identificado el origen del problema, estas son las correcciones más efectivas:
- Añade dimensiones a todas las imágenes y vídeos. Siempre incluye
widthyheighten el HTML. Los navegadores modernos calculan el aspect-ratio automáticamente a partir de esos valores. - Reserva espacio para anuncios. Define un contenedor con
min-heightigual al tamaño mínimo del anuncio esperado. - Precarga las fuentes críticas. Usa
<link rel="preload" as="font">para las fuentes que aparecen en el primer viewport. - Evita insertar contenido sobre el existente. Si un banner o notificación debe aparecer, hazlo desde fuera del flujo del documento (posición fija o absoluta) o reserva su espacio desde el inicio.
- Usa CSS
transformpara animaciones. Las animaciones que cambiantop,left,widthoheightprovocan reflows. Usatransform: translate()en su lugar — no genera layout shifts.
Si tu sitio corre sobre WordPress u otro CMS, una agencia especializada en rendimiento web puede auditar y corregir estos problemas de forma sistemática sin afectar tu diseño actual.
También puedes explorar más guías sobre velocidad en nuestra sección de rendimiento web.
CLS y su impacto en el SEO
Google incorporó los Core Web Vitals como señal de ranking en 2021. El CLS forma parte de la evaluación de "experiencia de página" junto con LCP e INP. Un CLS malo no te hunde directamente en los resultados, pero en nichos competitivos puede ser el factor diferenciador cuando el contenido de dos páginas es equivalente.
Más allá del SEO, el impacto real es en la conversión: un usuario que hace clic en el botón equivocado porque la página se movió no termina la compra, no llena el formulario, y difícilmente regresa.
Conclusiones clave
- El CLS mide la estabilidad visual de una página durante la carga; el objetivo es 0.1 o menos.
- Las causas más comunes son imágenes sin dimensiones, anuncios de tamaño dinámico, fuentes web y contenido inyectado tardíamente.
- Para diagnosticarlo, usa PageSpeed Insights, Chrome DevTools o Search Console con datos reales de usuarios.
- La corrección más impactante suele ser declarar
widthyheighten todas las imágenes. - Un CLS alto perjudica tanto la experiencia del usuario como el posicionamiento en buscadores.
¿Tu sitio tiene un CLS que necesita mejorar? Contáctanos en elenlace.com y hacemos una auditoría de Core Web Vitals para identificar y corregir cada shift innecesario.
Preguntas frecuentes
¿El CLS afecta solo a la carga inicial de la página?
No exactamente. Google mide el CLS durante toda la sesión del usuario, aunque da más peso a los shifts que ocurren en los primeros 5 segundos de carga. Los shifts provocados por interacciones del usuario (como expandir un acordeón) no cuentan negativamente.
¿Un CLS de 0 es posible y deseable?
Sí, es posible y es el ideal. Muchas páginas estáticas bien construidas tienen CLS de 0. El objetivo realista para páginas con anuncios o contenido dinámico es mantenerse en 0.1 o menos.
¿Las imágenes en CSS (background-image) también causan CLS?
Las imágenes de fondo en CSS generalmente no causan CLS porque el espacio del contenedor ya está definido por su contenido o por las propiedades CSS del elemento. El problema es con las etiquetas <img> sin dimensiones declaradas.
¿Cómo sé si el CLS de mi sitio mejora realmente con mis cambios?
Los datos de campo en PageSpeed Insights y Search Console tienen un retraso de 28 días (ventana de datos CrUX). Para verificar mejoras inmediatas, usa Chrome DevTools en modo de grabación de rendimiento o la extensión Web Vitals — te dan retroalimentación en tiempo real.
Compara proveedores
Otros proveedores y guías que vale la pena comparar:
