CLS: qué es y cómo mejorar esta métrica de Core Web Vitals
El CLS mide la estabilidad visual de tu web: cuánto se mueven los elementos mientras se carga. Google quiere que ese valor sea menor de 0,1. Si lo superas, tu posicionamiento lo nota. Aquí tienes las soluciones exactas para arreglarlo.
Publicado el · Actualizado el · 8 min de lectura
El CLS (Cumulative Layout Shift) mide la estabilidad visual de tu web. Es decir, cuánto se mueven los elementos de la página mientras se carga. Google quiere que ese valor sea menor de 0,1.
Si tu web supera ese límite, tienes un problema. El CLS es uno de los tres Core Web Vitals que Google usa para evaluar la experiencia de usuario. Si fallas, tu posicionamiento lo nota. Si vienes de cero, empieza por qué son los Core Web Vitals. En mi experiencia, este es el problema más fácil de arreglar de los tres, pero el que más quejas de usuarios genera.
Aquí tienes lo que funciona para mejorarlo.
Diferencia entre CLS y otras métricas de Core Web Vitals
| Métrica | Qué mide | El problema que detecta |
|---|---|---|
| LCP | Velocidad de carga del elemento más grande | Páginas que tardan en mostrar contenido |
| INP | Rapidez de respuesta a interacciones | Botones o enlaces que responden con retraso |
| CLS | Estabilidad visual durante la carga | Elementos que se mueven mientras el usuario intenta interactuar |
Si quieres profundizar en las otras dos métricas, aquí tienes cómo mejorar el LCP y cómo mejorar el INP.
Qué es un buen CLS (umbrales de Google)
| Estado | Puntuación | Qué significa |
|---|---|---|
| Bueno | ≤ 0,1 | La página es estable. El usuario no ve movimientos bruscos. |
| Necesita mejorar | 0,1 – 0,25 | Puede ser aceptable, pero hay elementos que se mueven. |
| Malo | > 0,25 | La página es inestable. El usuario puede hacer clic en el lugar equivocado. |
Causas comunes de un CLS alto (y cómo solucionarlas)
1. Imágenes sin dimensiones definidas
El problema: cuando una imagen no tiene width y height definidos, el navegador no sabe cuánto espacio reservar. La imagen aparece, empuja el contenido hacia abajo y genera un desplazamiento.
La solución: define siempre width y height en las imágenes. Si usas WordPress, los temas modernos lo hacen automáticamente. Si no, añádelos manualmente.
<!-- Mal -->
<img src="imagen.jpg" alt="descripción">
<!-- Bien -->
<img src="imagen.jpg" alt="descripción" width="800" height="600">2. Anuncios y iframes sin espacio reservado
El problema: los anuncios y los iframes (vídeos embebidos, mapas) suelen cargarse después del contenido. Cuando aparecen, empujan el texto y los botones hacia abajo.
La solución: reserva un espacio fijo para ellos usando min-height en CSS.
.anuncio {
min-height: 250px;
}3. Fuentes web que cambian el tamaño del texto
El problema: las fuentes web (Google Fonts, etc.) tardan en cargarse. Mientras, el navegador muestra el texto con una fuente de respaldo. Cuando la fuente personalizada se carga, el texto puede cambiar de tamaño y desplazar otros elementos.
La solución: usa font-display: swap para mostrar el texto con la fuente de respaldo hasta que la personalizada esté lista. Y usa tamaños de fuente que no varíen mucho entre fuentes.
@font-face {
font-family: 'MiFuente';
src: url('mi-fuente.woff2') format('woff2');
font-display: swap;
}4. Contenido dinámico que se inserta después de la carga inicial
El problema: plugins de chat, pop-ups, banners de cookies o contenido recomendado que aparece después de que el usuario ha empezado a leer.
La solución: carga estos elementos en el espacio que les corresponde o actívalos solo cuando el usuario interactúe (por ejemplo, el chat al hacer clic en el botón).
Cómo auditar tu CLS
| Herramienta | Qué mide |
|---|---|
| PageSpeed Insights | CLS real de tus usuarios (datos de campo de CrUX) |
| Google Search Console | URLs con problemas de CLS según datos reales de Chrome |
| Chrome DevTools (pestaña Performance) | CLS marcado en la línea de tiempo con desplazamientos visuales |
Cómo mejorar el CLS
En WordPress
- Usa un tema moderno que defina dimensiones para imágenes y vídeos.
- Si usas Elementor, asegúrate de que las secciones tengan altura mínima definida.
- Usa
loading="lazy"en imágenes, pero siempre conwidthyheight.
En WooCommerce
- Las imágenes de productos deben tener dimensiones fijas en el catálogo.
- Los botones de «Añadir al carrito» no deben moverse al cargarse la página.
En blogs
- Reserva espacio para imágenes destacadas y vídeos embebidos.
- Si usas anuncios, reserva el espacio con
min-height.
Si quieres completar la estrategia de Core Web Vitals, mira también cómo mejorar el LCP, cómo mejorar el INP y la guía completa de Core Web Vitals: qué son y cómo mejorarlos.
En resumen: el CLS mide la estabilidad visual. Para mantenerlo por debajo de 0,1, define dimensiones en imágenes, reserva espacio para anuncios e iframes, usa font-display: swap y controla el contenido dinámico. Audítalo con PageSpeed Insights, Search Console y Chrome DevTools.
Si quieres que un especialista audite y corrija tu CLS, analizo tu web, detecto los desplazamientos que están penalizando tu experiencia de usuario y te doy un plan de acción claro. Cuéntame tu proyecto y te respondo en menos de 48 horas.
¿Quieres que tu web sea visualmente estable?
Audito tu CLS, corrijo los desplazamientos y optimizo tus Core Web Vitals para que Google y tus usuarios lo noten.