El CLS (Cumulative Layout Shift) mide cuánto se mueve el contenido de una página mientras termina de cargar: un botón que salta, una imagen que empuja el texto, un aviso de cookies que aparece de golpe. Google lo incluye entre sus Core Web Vitals desde 2020 y lo sigue midiendo en 2026 como parte de la experiencia de página.
Para el despacho que paga por diseño web y por marketing jurídico, un CLS alto no es un detalle técnico: es el visitante que pulsa el botón equivocado del formulario de contacto justo cuando la página termina de moverse, y esa conversión se pierde sin que nadie sepa por qué.
El CLS mide la estabilidad visual de una página: Google considera buena una puntuación de 0,1 o menos, aceptable hasta 0,25 y mala por encima. Un despacho con CLS alto pierde posicionamiento y también leads, porque el visitante pulsa donde el botón estaba antes de que la página terminara de moverse.
Los elementos que desplazan el contenido sin avisar
La mayoría de los saltos no los provoca el texto, sino lo que carga después: imágenes sin tamaño reservado, fuentes que sustituyen a la del sistema, o un aviso de cookies y un botón de chat que aparecen tarde y empujan todo hacia abajo.
Imágenes y vídeos sin ancho ni alto definidos
Cuando una imagen no lleva los atributos width y height —o su equivalente en CSS, aspect-ratio—, el navegador no sabe cuánto espacio reservarle. Pinta el texto de alrededor, la imagen llega una fracción de segundo después y el contenido inferior se desplaza para hacerle sitio. En una ficha con foto del despacho o del equipo, el salto puede repetirse varias veces en la misma pantalla si hay más de una imagen sin dimensiones. La corrección no depende del diseñador: basta con que el tema o el constructor de páginas incluya el ancho y el alto reales de cada imagen en el HTML.
Fuentes web y avisos de cookies que reflotan el texto
Una fuente corporativa que tarda en descargarse obliga a pintar primero con la fuente del sistema y sustituirla después; si ocupan un espacio distinto, el párrafo se recoloca entero. La propiedad font-display, en su valor optional, evita ese re-layout porque descarta la fuente web si no llegó a tiempo. El otro culpable habitual es el aviso de cookies que se inyecta segundos después de cargar: si empuja el contenido en vez de superponerse, cuenta como salto igual que un anuncio. La solución es la misma: reservar el espacio o mostrarlo como una capa fija, nunca desplazando lo que ya está pintado.
Cómo se calcula el CLS de una página
web.dev explica que el CLS se calcula multiplicando dos valores: la fracción de impacto, el porcentaje del viewport afectado por el elemento que se mueve, y la fracción de distancia, cuánto se desplazó respecto al tamaño de la pantalla. Cuanto más grande y más lejos se mueve un elemento, peor puntúa esa página.
Un layout shift ocurre cuando un elemento visible cambia de posición entre dos fotogramas sin que el usuario haya interactuado con la página.
Google fija tres franjas: un CLS de 0,1 o menos se considera bueno, entre 0,1 y 0,25 necesita mejorar, y por encima de 0,25 es malo. La medición no se hace sobre una sola visita: se toma el percentil 75 de las visitas reales, separando móvil y escritorio, así que una web puede parecer estable en el ordenador del diseñador y fallar en el móvil de un cliente con peor conexión. El Search Central de Google recomienda aspirar a un CLS por debajo de 0,1, la misma franja que exige para el resto de métricas de experiencia de página.
El coste real de un botón que se mueve
Un salto de pocas décimas de segundo antes de que cargue el botón de enviar no se nota como un error visual: se nota como un formulario que no funciona. El visitante coloca el dedo o el cursor donde estaba el botón, la página se mueve en el último instante y el clic cae sobre otro elemento —un enlace del menú, un banner de cookies, nada—. Nadie repite el intento dos veces en un formulario de contacto que parece roto.
- El botón de enviar de un formulario de contacto o de cita previa.
- El menú de áreas de práctica, cuando un banner o un carrusel carga tarde encima.
- Los botones de llamada a la acción de una campaña, con imágenes sin dimensiones fijadas.
Ese coste no aparece en ninguna métrica de tráfico: la sesión se cuenta igual, la página se marca como vista y nadie encuentra el motivo por el que la tasa de conversión no sube aunque el tráfico crezca.
Ajustes que evitan el CLS en tu web
La corrección no exige rehacer la web, solo revisar cómo carga cada pieza. web.dev recomienda reservar el espacio de cualquier elemento que llegue tarde en lugar de dejar que empuje al resto:
- Ancho y alto en cada imagen y vídeo, o la propiedad aspect-ratio en el CSS.
- Una altura mínima reservada para anuncios, banners y widgets de terceros.
- font-display: optional en la fuente corporativa, para no cambiarla si llega tarde.
- Animaciones con transform en vez de mover top, left o el tamaño del elemento.
En una web construida con Elementor o con cualquier constructor visual, la mayoría de estos ajustes se resuelven desde el propio editor —tamaño fijo en el widget de imagen, altura reservada en la sección que carga un formulario— sin tocar una línea de código. El problema casi nunca es el constructor: es una plantilla o un plugin que no reserva ese espacio por defecto.
Comprobaciones necesarias tras cambiar de plantilla
Un cambio de plantilla, de tema o de constructor es el momento en el que más CLS se cuela: la revisión hecha en un ordenador de escritorio no siempre repite el mismo problema en el móvil de un cliente real. El informe de Core Web Vitals de Search Console mide con datos de uso real, no con una sola prueba de laboratorio, así que conviene revisarlo unas semanas después de publicar, no solo el mismo día.
Ya hay una guía sobre cómo hacer un rediseño web sin perder posicionamiento; el CLS es uno de los puntos que esa revisión debe cubrir, junto al límite de INP que ya marca Google para la velocidad de respuesta a un clic. Los dos forman parte de las mismas métricas de experiencia de página, y suspender una no compensa aprobar la otra: Google evalúa el conjunto.
Preguntas frecuentes sobre el CLS
¿Qué CLS se considera bueno?
Un CLS de 0,1 o menos se considera bueno, según los umbrales que fija Google. Entre 0,1 y 0,25 la página necesita mejorar, y por encima de 0,25 se considera mala experiencia. La medición se hace sobre el percentil 75 de las visitas reales, no sobre una sola prueba en el ordenador del diseñador.
¿El CLS afecta al posicionamiento en Google?
Forma parte de las señales de experiencia de página que Google usa junto al resto de factores de posicionamiento, aunque no sustituye a un contenido bien trabajado. Un CLS alto no hunde una web por sí solo, pero sí reduce las conversiones: menos clics útiles y más rebote en formularios y botones.
¿Cómo se mide el CLS de mi despacho?
Con el informe de Core Web Vitals de Search Console, que usa datos reales de tus visitantes, o con PageSpeed Insights para una prueba puntual. Conviene revisar el dato en móvil y en escritorio por separado, porque el CLS suele ser peor en conexiones más lentas.
Fuente: web.dev (Google)