CLS: qué es y cómo mejorar esta métrica de Core Web Vitals

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.

Aquí tienes lo que funciona para mejorarlo.

Contenido del artículo

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

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)

El SEO se trabaja en tres dimensiones que se complementan entre sí:

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 (videos 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 con width y height.

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.

Métricas para medir tu progreso

Métrica	Descripción	Herramienta
Domain Authority (DA)	Autoridad de dominio	Ahrefs, Moz
Número de dominios referentes	Cuántos dominios te enlazan	Ahrefs, SEMrush
Autoridad de los enlaces	Calidad de los sitios que te enlazan	Ahrefs, SEMrush
Ratio dofollow/nofollow	Equilibrio natural entre ambos	Ahrefs, SEMrush
Anchor text diversity	Variedad de textos ancla	Ahrefs, SEMrush

El SEO Off-Page y el Link Building son dos pilares esenciales para que tu web gane la autoridad necesaria para posicionar en Google. Sin enlaces de calidad, por mucho contenido que tengas, te costará competir.