¿Qué es el Cumulative Layout Shift (CLS) y cómo afecta a tu web?

El Cumulative Layout Shift (CLS) es una métrica de los Core Web Vitals que mide la estabilidad visual de una página web durante su carga.

En concreto, evalúa cuánto se mueven inesperadamente los elementos visibles en pantalla mientras la página está cargando. Un CLS elevado indica una experiencia frustrante para el usuario.

¿Por qué es importante el CLS para el SEO y la UX?

• Forma parte de los Core Web Vitals, y por tanto, es un factor oficial de posicionamiento en Google.

• Un CLS alto afecta negativamente la percepción del sitio, especialmente en móviles, donde los saltos de contenido pueden llevar a errores de clic.

• Está directamente relacionado con la experiencia de usuario, lo que lo convierte en un indicador prioritario para cualquier estrategia de optimización.

¿Qué provoca un mal CLS?

• Imágenes sin dimensiones definidas – El navegador no puede reservar espacio y ajusta el layout tras cargar.

• Anuncios, banners o iframes que se insertan dinámicamente sin avisar.

• Fuentes web que tardan en cargar y provocan reflujo del texto (FOIT / FOUT).

• Elementos que aparecen por interacción pero empujan el contenido hacia abajo.

¿Qué valor se considera un buen CLS?

• Un CLS inferior a 0,1 se considera óptimo.

• Entre 0,1 y 0,25 requiere mejora.

• Superior a 0,25 se considera mala experiencia.

Google mide este valor en función del total de cambios de diseño inesperados durante toda la sesión de carga.

Cómo mejorar el CLS en tu sitio web

Establece dimensiones para imágenes y vídeos

• Usa atributos width y height en el HTML o define dimensiones en CSS.

• Así el navegador reserva el espacio adecuado antes de cargar el recurso.

Reserva espacio para anuncios y elementos de terceros

• Asigna un contenedor con tamaño fijo o mínimo garantizado.

• Evita que scripts externos modifiquen el diseño sin control.

Precarga fuentes web y utiliza fallbacks eficientes

• Usa <link rel="preload"> para priorizar la carga de tipografías clave.

• Añade una fuente de sistema como alternativa temporal.

Evita insertar contenido dinámico por encima del contenido ya cargado

• Cualquier nuevo elemento (como una barra de aviso, cookies, etc.) debe añadirse debajo o en un espacio reservado.

Herramientas para medir y corregir CLS

• PageSpeed Insights – Ofrece datos de laboratorio y reales (CrUX) sobre CLS.

• Google Search Console – Experiencia en la página – Muestra URLs agrupadas con mal rendimiento visual.

• Lighthouse (Chrome DevTools) – Informa sobre elementos que provocan inestabilidad visual.

• Web Vitals Extension (Chrome) – Permite visualizar el CLS directamente durante la navegación.

Conclusión

El Cumulative Layout Shift (CLS) mide un aspecto crítico de la experiencia web: la estabilidad visual. Optimizarlo no solo mejora la navegación y evita errores de usuario, sino que también favorece el posicionamiento en Google. Elimina saltos inesperados, planifica bien los espacios y mantén tu diseño fluido desde la primera carga.