Qué es el CLS (Cumulative Layout Shift) y cómo reducirlo en los Core Web Vitals

El CLS, sigla de Cumulative Layout Shift (cambio acumulativo de diseño), es la métrica que mide la estabilidad visual de una página mientras carga. Forma parte de los Core Web Vitals, el conjunto de métricas de experiencia que Google usa como señal de posicionamiento.

En la práctica, el CLS captura esa molestia en la que vas a hacer clic en un botón y, de repente, un banner o una imagen carga, empuja todo hacia abajo y acabas haciendo clic en el lugar equivocado. Cada salto inesperado de un elemento suma puntos al CLS: cuanto más se mueve la página sola, peor es la nota.

Un aviso rápido sobre la sigla: CLS también es el nombre de un modelo de coche de Mercedes-Benz y de varias empresas. En este glosario, CLS significa siempre la métrica de estabilidad visual de los Core Web Vitals.

El CLS no mide tiempo, sino movimiento. Resulta de la combinación de dos factores en cada salto de diseño: la fracción de impacto (cuánto de la pantalla ocupa el elemento inestable) y la fracción de distancia (cuánto se desplazó). La puntuación de un salto es la multiplicación de los dos.

El buscador suma esos saltos en ventanas de sesión y considera la mayor de ellas como la nota final de la página. Solo entran en la cuenta los desplazamientos inesperados: si el elemento se mueve por una acción del usuario, como hacer clic para desplegar un menú, ese movimiento no se penaliza.

Al ser una métrica de campo, el CLS suele medirse con datos reales de usuarios. Las herramientas de SEO técnico y el propio informe de Google reúnen esos números a lo largo del tiempo, en el percentil 75 de las cargas.

Google define rangos claros para el CLS. Según la documentación de web.dev, la meta es quedarse en 0,1 o menos en el percentil 75 de las cargas, tanto en móvil como en ordenador:

A diferencia de las métricas medidas en segundos, el CLS es un número sin unidad: cuanto más cerca de cero, más estable la página. Forma el trío de los Core Web Vitals junto al LCP, que mide la carga, y al INP, que mide la respuesta a la interacción.

Los saltos de diseño casi siempre tienen los mismos orígenes. Los más comunes son:

• Imágenes sin dimensiones: fotos y vídeos sin ancho y alto definidos hacen que el texto salte cuando por fin cargan.
• Anuncios, embeds e iframes: bloques de tamaño variable que aparecen sin un espacio reservado empujan el contenido de alrededor.
• Fuentes web: cuando la fuente personalizada sustituye a la fuente por defecto, el texto puede cambiar de tamaño y reorganizar la página.
• Contenido inyectado dinámicamente: avisos de cookies, banners y widgets insertados por encima de lo que ya estaba en pantalla desplazan todo hacia abajo.
• Acciones que esperan a la red: elementos que solo aparecen tras una respuesta del servidor y entran en medio del contenido.

Reconocer la causa es la mitad del camino: la mayoría de estos problemas se resuelven reservando espacio antes de que el elemento llegue.

Estabilizar la página consiste, en la práctica, en garantizar que cada elemento ya tenga su lugar antes de cargar. Un buen guion:

• Define el ancho y el alto de los medios: declara las dimensiones de imágenes y vídeos para que el navegador reserve el espacio exacto.
• Reserva área para anuncios y embeds: deja un contenedor de tamaño fijo donde entrará el bloque.
• Cuida las fuentes: precarga las fuentes principales y usa estrategias de visualización que eviten el cambio brusco.
• No empujes el contenido: inserta banners y avisos sin desplazar lo que la persona ya está leyendo, de preferencia en espacios fijos.
• Anima con transform: prefiere animaciones que no alteren el flujo del diseño.

Tras los ajustes, mide de nuevo con datos reales. Pequeños cambios al reservar espacio suelen bajar bastante la nota.

Reducir el CLS no es solo un capricho técnico. Una página estable evita clics erróneos, transmite calidad y mantiene a la persona leyendo, lo que mejora las métricas de negocio de punta a punta.

Los datos lo refuerzan. En un estudio de caso publicado por web.dev, Rakuten 24 mejoró los Core Web Vitals de una página, con el CLS cayendo cerca de un 92% respecto a la versión original, y registró un aumento del 53,37% en los ingresos por visitante y del 33,13% en la tasa de conversión. Como los Core Web Vitals son una señal de posicionamiento, la ganancia aparece tanto en experiencia como en búsqueda.

Para seguir la evolución, el informe de Core Web Vitals de Google Search Console muestra qué URL están en los rangos bueno, a mejorar y malo, con base en usuarios reales. Es ahí donde se prioriza qué corregir primero.