¿Qué es el CLS?

El Cumulative Layout Shift mide cuánto se mueve solo el contenido de una página mientras el usuario la está mirando. No cuenta píxeles ni segundos, sino una puntuación sin unidad que combina dos cosas: qué parte de la pantalla se vio afectada y cuánta distancia recorrió lo que se movió.

Google considera bueno un valor de hasta 0,1, mejorable hasta 0,25 y deficiente por encima. Como el resto de métricas de campo, se evalúa sobre el percentil 75 de las visitas reales, no sobre una prueba de laboratorio, igual que en el LCP y el INP.

La palabra «acumulado» del nombre despista, porque no se suma la visita entera. Desde 2021 se toma la ventana de sesión con mayor puntuación: un tramo de como mucho cinco segundos en el que las sacudidas van seguidas con huecos de menos de un segundo. Una página larga con desplazamientos repartidos no acumula un valor enorme por el hecho de ser larga.

Ese detalle importa en la práctica más de lo que parece. Antes del cambio, un artículo extenso o una lista con desplazamiento infinito salían peor parados que una página corta con el mismo defecto, y eso premiaba a las páginas con poco contenido sin que su comportamiento fuera mejor.

Merece la pena entender la fórmula, porque explica qué corrige de verdad un cambio. La puntuación de cada sacudida multiplica dos fracciones: la parte de la pantalla afectada y la distancia recorrida respecto al alto o ancho visible. Un banner estrecho que baja mucho puede puntuar igual que un bloque grande que baja poco.

De ahí sale una consecuencia poco intuitiva: mover un elemento pequeño situado arriba del todo suele costar más que mover uno grande al final de la página, porque arrastra todo lo que viene detrás. Por eso las correcciones más rentables están casi siempre en la cabecera de la plantilla del CMS, no en el cuerpo del artículo.

Aquí está el malentendido más caro de la métrica. No todo movimiento penaliza: los desplazamientos que ocurren dentro de los 500 milisegundos siguientes a una interacción del usuario se consideran esperados y quedan fuera del cálculo.

Tiene lógica. Si alguien pulsa un acordeón y el contenido de debajo baja, eso es exactamente lo que pidió. Penalizarlo obligaría a diseñar interfaces rígidas para contentar a una métrica, que es justo lo contrario de lo que la métrica intenta conseguir.

El corolario práctico es que las peores puntuaciones no vienen de interfaces interactivas, sino de contenido que llega tarde: un banner publicitario, un aviso de consentimiento, una fuente que sustituye a otra, una imagen sin medidas declaradas. Todo eso ocurre sin que nadie lo haya pedido, y por eso cuenta entero.

Esa regla de los 500 milisegundos tiene un borde que conviene conocer. Se aplica a la interacción, no a lo que la interacción desencadena: si al pulsar un botón se lanza una petición que tarda dos segundos y luego mueve el contenido, ese movimiento ya está fuera de la ventana y cuenta entero.

Ahí está el caso real más frecuente en tiendas: un filtro de catálogo que recarga los resultados. El usuario pulsa, no pasa nada visible, y a los dos segundos la lista salta. Formalmente el usuario lo provocó; para la métrica y para el usuario es una sacudida inesperada. La solución es reservar el espacio y mostrar un estado de carga en el sitio donde irá el resultado.

Imágenes y vídeos sin medidas. Es la causa más común y la más fácil de arreglar: declarar width y height en la etiqueta, o fijar una aspect-ratio en el CSS, para que el navegador reserve el hueco antes de tener el archivo. Se cruza directamente con la carga diferida, porque una imagen diferida llega aún más tarde y el salto es más visible.

Anuncios, incrustaciones y avisos. Un bloque cuyo tamaño no se conoce de antemano empuja todo lo que tiene debajo cuando aparece. La solución es reservar el espacio mínimo con antelación, aunque quede un hueco vacío cuando el bloque no llega.

Fuentes que se sustituyen al cargar. El navegador dibuja primero con una tipografía del sistema y la cambia cuando llega la definitiva; si las métricas de ambas difieren, el texto se recompone entero. Se controla con font-display y con fuentes de respaldo de proporciones parecidas.

Contenido insertado por encima de lo que ya se lee. Un mensaje de oferta que aparece arriba del todo empuja el artículo hacia abajo justo cuando el usuario había encontrado el párrafo que buscaba. Este caso es puro UX y no hace falta ninguna métrica para verlo.

Hay una quinta causa que no aparece en las listas habituales y sí en las auditorías: el propio código de medición. Herramientas de mapa de calor, encuestas emergentes y barras de aviso cargadas por Google Tag Manager se insertan por definición después del primer dibujado, que es exactamente el peor momento.

Conviene revisarlo con la misma frecuencia que el resto: cada script añadido a una campaña es un candidato a mover contenido, y como se instalan desde la interfaz sin tocar la plantilla, no pasan por ninguna revisión de SEO técnico. Reservar una franja fija para la barra de avisos, en lugar de dejar que empuje, resuelve el caso completo.

El CLS es la métrica en la que más se separan la prueba de laboratorio y los datos reales, y la razón es sencilla: una herramienta automática carga la página y se queda quieta. No hace scroll, no acepta el aviso de cookies, no espera a que aparezca el banner que se carga a los ocho segundos.

El usuario real hace todo eso, y muchos de los desplazamientos peores ocurren precisamente durante el scroll, cuando entran en pantalla bloques que todavía no tenían sitio reservado. Por eso un laboratorio en verde con un campo en rojo no es una contradicción, es lo esperable.

La consecuencia para el trabajo es que aquí conviene mirar los datos de Google Search Console antes que ninguna otra cosa, y usar el laboratorio solo para reproducir un caso concreto una vez que ya se sabe cuál es. Una mapa de calor ayuda a saber hasta dónde baja de verdad la gente, que es donde hay que buscar.

Para reproducir un caso concreto en el navegador hay un camino corto: abrir el panel de rendimiento, grabar mientras se hace scroll despacio por la página y mirar las marcas de desplazamiento en la línea de tiempo. Cada una señala el elemento culpable, y casi siempre resulta ser el mismo en toda una plantilla.

Después conviene comparar con lo que hace la gente de verdad. Si el tráfico llega sobre todo desde móvil, hay que probar en móvil, porque el índice mobile-first decide y el ancho cambia qué bloques empujan a cuáles. Y como con el resto de métricas de campo, los datos tardan semanas en moverse, así que medir al día siguiente no dice nada.

• Rediseñar una interfaz para que nada se mueva nunca, cuando los movimientos que el usuario provoca no cuentan.
• Poner medidas solo a las imágenes del artículo y olvidar los espacios publicitarios, que son los que más empujan.
• Fiarse de la prueba de laboratorio, que no hace scroll ni acepta el aviso de consentimiento.
• Corregir una plantilla y medir al día siguiente: la ventana de campo es de 28 días, igual que en el LCP y el INP.
• Tratar el CLS como un problema estético. Un salto en el momento de pulsar «comprar» cambia el clic de destino, y eso sale directamente del CRO y de la conversión.