CLS: definición, cálculo y corrección
Actualizado el February 22, 2026
Definición rápida
El CLS (Cumulative Layout Shift) es una métrica de Core Web Vitals que mide la inestabilidad visual de una página web durante su carga — es decir, la suma de los desplazamientos de maquetación inesperados. El CLS es bueno si es inferior a 0,1, mejorable entre 0,1 y 0,25, y malo por encima de ese umbral. Cuantifica la frustrante experiencia en la que los elementos de una página «saltan» durante la carga.
Cómo funciona
Fórmula
Puntuación CLS = Σ (fracción de superficie impactada × fracción de distancia recorrida) para cada layout shift en ventanas de sesión de 5 s
Ejemplo: un elemento que ocupa el 50 % de la pantalla y se desplaza un 25 % de la altura = layout shift de 0,125
Cada desplazamiento de maquetación se calcula multiplicando la fracción de superficie impactada (proporción de la zona visible afectada) por la fracción de distancia recorrida (distancia relativa del desplazamiento). La puntuación CLS es la suma de todos esos desplazamientos producidos en ventanas de sesión de 5 segundos.
Los umbrales oficiales de Google:
- Bueno (verde): inferior a 0,1
- Mejorable (naranja): entre 0,1 y 0,25
- Malo (rojo): por encima de 0,25
Las causas más habituales de un mal CLS incluyen:
- Imágenes y vídeos sin dimensiones explícitas (`width`/`height`)
- Anuncios, embeds o iframes cargados dinámicamente
- Fuentes que provocan FOUT (Flash of Unstyled Text)
- Elementos inyectados por JavaScript por encima del contenido existente
Por qué es importante
Una puntuación CLS alta genera una experiencia de usuario frustrante: clics accidentales, pérdida de la posición de lectura, sensación de inestabilidad. Esta frustración se traduce directamente en tasas de rebote más altas y tasas de conversión más bajas.
Google ha incluido el CLS en los Core Web Vitals porque es uno de los factores de abandono más citados por los usuarios. Un buen CLS contribuye también a la percepción de calidad y profesionalismo del sitio.
Cómo mejorarlo o utilizarlo
- 1Define siempre atributos `width` y `height` explícitos en tus imágenes y vídeos para que el navegador reserve el espacio antes de la carga.
- 2Usa `min-height` para las zonas de anuncios y embeds.
- 3Precarga tus fuentes y utiliza `font-display: swap` para evitar desplazamientos tipográficos.
- 4Evita insertar contenido por encima del contenido visible existente mediante JavaScript.
- 5Audita tus layout shifts con la pestaña Performance de las DevTools de Chrome o con PageSpeed Insights.
Con Sublim
Sublim te permite correlacionar tus puntuaciones de CLS por página con tus datos de tasa de conversión y de tasa de rebote en tiempo real. Así priorizas la corrección de las páginas con mucho tráfico donde un CLS alto te cuesta clientes reales — todos estos datos recopilados sin cookies, en plena conformidad con el RGPD.
Preguntas frecuentes
¿Cómo identificar los elementos responsables de un mal CLS?
La herramienta más precisa es la pestaña Performance de las DevTools de Chrome: activa la grabación al cargar la página y busca los eventos «Layout Shift». PageSpeed Insights y la extensión Web Vitals Debugger de Chrome también permiten identificar visualmente los elementos que se mueven. La propiedad CSS `content-visibility` también puede ayudar a aislar problemas.
¿Afectan las animaciones CSS al CLS?
No necesariamente. Google excluye del cálculo del CLS los desplazamientos causados por interacciones del usuario (clics, pulsaciones de teclas) que se producen en los 500 ms posteriores a la interacción. Las animaciones CSS que utilizan `transform` en lugar de propiedades que modifican el layout (top, left, margin) tampoco afectan al CLS porque no provocan recálculo de la maquetación.
¿Es suficiente un buen CLS para posicionarse bien en Google?
El CLS es una de las tres métricas Core Web Vitals (junto con LCP e INP) que constituyen una señal de experiencia de página. Un buen CLS por sí solo no basta: las tres métricas deben estar en verde para que la señal sea positiva. Además, el contenido y la autoridad del dominio siguen siendo predominantes en la clasificación global.
Términos relacionados
Los Core Web Vitals son un conjunto de tres métricas definidas por Goo…
El LCP (Largest Contentful Paint) es una métrica de Core Web Vitals qu…
El INP (Interaction to Next Paint) es la métrica de Core Web Vitals qu…
La tasa de rebote es el porcentaje de sesiones durante las cuales un u…