CLS: qué es y cómo evitar que tu web se mueva

Por qué importa

Los saltos de contenido son de lo más irritante de una web: pierdes el punto de lectura o pulsas algo que no querías, como un anuncio o el producto de al lado. En una tienda, un botón de compra que se mueve provoca errores y resta confianza.

Google considera bueno un CLS de hasta 0,1 y mejorable hasta 0,25; por encima, pobre. Como Core Web Vital, forma parte de las señales de experiencia de página. La buena noticia es que suele ser de las métricas más fáciles de arreglar, porque casi siempre se debe a elementos a los que no se les ha reservado espacio.

Cómo lo comprueba Posiciona

Tomamos el CLS que mide Lighthouse 13 durante la carga en la prueba móvil de PageSpeed Insights y usamos su nota: unos 90 puntos con 0,1, 50 con 0,25 y menos a partir de ahí. En el informe verás el valor y si es bueno (hasta 0,1), necesita mejora (hasta 0,25) o es pobre. Lighthouse solo ve los saltos de la carga; los que ocurren después, al hacer scroll o interactuar, aparecen en los datos de visitantes reales. Cuando Lighthouse lo identifica, te decimos qué bloque se mueve y por qué: fuentes web que cambian el tamaño del texto al llegar, imágenes sin dimensiones, contenido insertado después o animaciones.

En la nota de Velocidad esta comprobación cuenta como “importante” (peso 3 de 5).

Cómo solucionarlo

Pon width y height en todas las imágenes y vídeos. No fijan su tamaño en pantalla (con height: auto en el CSS siguen siendo adaptables), pero permiten al navegador reservar el hueco antes de descargarlos.
Reserva espacio para lo que se carga tarde: anuncios, mapas, vídeos insertados y widgets de reseñas o de redes sociales. Dales una altura mínima con CSS o usa aspect-ratio.
No insertes contenido por encima del que ya se ve: barras promocionales, avisos de cookies o banners de apps deben tener su espacio desde el principio o aparecer superpuestos, sin empujar la página.
Controla las fuentes web: precarga la principal y elige una fuente de respaldo de medidas parecidas, para que el texto no cambie de tamaño al aparecer la definitiva. Con font-display: optional evitas el cambio del todo.
En animaciones, mueve los elementos con transform en lugar de cambiar top, margin o height, que desplazan todo lo que hay alrededor.
Para localizar a los culpables, mira el diagnóstico de desplazamientos de diseño de PageSpeed Insights.

Imagen con dimensiones y hueco reservado para un anuncioHTML

<img src="/img/banner.webp" width="1200" height="400" alt="Rebajas de otoño">
<div class="hueco-anuncio"><!-- el anuncio se carga aquí --></div>

CSS: imágenes adaptables y altura mínimaTexto

img {
  max-width: 100%;
  height: auto;
}
.hueco-anuncio {
  min-height: 250px;
}

En WordPress

WordPress añade width y height a las imágenes que insertas desde la biblioteca de medios; el problema suele estar en sliders, constructores visuales o imágenes añadidas a mano con HTML.
Configura los avisos de cookies y las barras promocionales para que se muestren flotantes, sin empujar el contenido.

En Shopify

En Shopify, las barras y banners que las apps insertan por JavaScript encima de la cabecera son una causa frecuente. Usa la barra de anuncios del propio tema, que forma parte de la página desde el principio, en lugar de la de una app.
Si has añadido imágenes en theme.liquid o en secciones personalizadas, genera la etiqueta con el filtro image_tag, que incluye width y height automáticamente.

Preguntas frecuentes

¿Por qué mi CLS en Search Console es peor que en PageSpeed?

Lighthouse solo mide la carga inicial en un móvil simulado, sin hacer scroll ni pulsar nada. Los datos reales del informe CrUX, que son los de Search Console, recogen los desplazamientos durante toda la visita: contenido que se carga al bajar, anuncios que se refrescan. Si el dato real sale peor, busca saltos que ocurren después de la carga.

¿Cuentan los movimientos que provoca el propio usuario?

No. Los cambios que ocurren justo después de un clic, un toque o una pulsación de tecla (en el medio segundo siguiente) se consideran esperados y no suman al CLS. Por eso abrir un acordeón o desplegar un menú al pulsarlo no penaliza. Lo que sí cuenta es cualquier movimiento que el usuario no ha provocado.