Cómo se calcula realmente el Cumulative Layout Shift

¿Qué es Cumulative Layout Shift (CLS)?

Chrome mide Cumulative Layout Shift como la mayor ráfaga de movimiento inesperado del diseño durante la vida de una página, donde cada desplazamiento individual puntúa impact fraction multiplicada por distance fraction y la ráfaga de mayor puntuación se convierte en el CLS de la página. La métrica existe porque el contenido que salta bajo el dedo del lector le cuesta el toque que estaba a punto de hacer. Dos números deciden cada puntuación: cuánto del viewport se movió y hasta dónde llegó.

El nombre causa casi toda la confusión. "Acumulativo" describe lo que ocurre dentro de una ráfaga, no a lo largo de la página, así que cuarenta desplazamientos pequeños repartidos en tres minutos pueden puntuar mejor que dos desplazamientos separados por medio segundo.

¿Cómo se calcula la puntuación de un desplazamiento de diseño?

La fórmula publicada por el equipo de Chrome en web.dev, verificada el 8 de septiembre de 2026, es una sola multiplicación:

layout shift score = impact fraction × distance fraction

La impact fraction es la unión del área visible que un elemento inestable ocupaba en el fotograma anterior y el área que ocupa en el fotograma actual, dividida por el área total del viewport. La distance fraction es la mayor distancia horizontal o vertical que recorrió cualquier elemento inestable en ese fotograma, dividida por la dimensión más grande del viewport, ancho o alto, la que sea mayor.

Recorra un desplazamiento de principio a fin. Tome un viewport móvil de 400px de ancho y 800px de alto, así que la dimensión más grande es 800px. Un titular de artículo a todo el ancho y su párrafo inicial ocupan los primeros 400px, es decir, la mitad del viewport. Un banner de consentimiento se inyecta entonces encima de ellos y empuja el bloque 160px hacia abajo.

Entrada	Valor	De dónde sale
Viewport	400 × 800 px	320.000 px de área total
Elemento antes del desplazamiento	y 0 a 400	160.000 px visibles
Elemento después del desplazamiento	y 160 a 560	160.000 px visibles
Unión de ambos fotogramas	y 0 a 560	224.000 px
Impact fraction	0,7	224.000 ÷ 320.000
Distancia recorrida	160 px	altura del banner
Distance fraction	0,2	160 ÷ 800

0.7 × 0.2 = 0.14

Un solo banner produjo 0,14, que ya cae en la banda "necesita mejorar". Las dos fracciones se limitan entre sí: un elemento diminuto puntúa bajo aunque recorra toda la pantalla, y un bloque que ocupa todo el viewport puntúa alto aunque recorra 20px.

¿Por qué CLS no es la suma de todos los desplazamientos?

CLS reporta la única ventana de sesión con la puntuación más alta, no un total acumulado. Una ventana de sesión se abre en el primer desplazamiento y sigue abierta mientras lleguen desplazamientos separados por menos de 1 segundo, hasta una duración máxima de ventana de 5 segundos. Cuando pasa una pausa de 1 segundo o más, o la ventana llega a 5 segundos, esa ventana se cierra y el siguiente desplazamiento inicia una nueva. El navegador puntúa cada ventana por separado y reporta la mayor.

Continúe con el ejemplo anterior. El desplazamiento del banner de 0,14 cae en 1,2s. Una fuente web se intercambia en 1,5s y reajusta un párrafo por 0,03. La pausa es de 300ms, así que ambos pertenecen a una misma ventana que vale 0,17. Un embed cargado de forma diferida desplaza después el pie de página 0,05 en 4,0s, es decir, 2,5 segundos después del último desplazamiento, así que abre su propia ventana.

Ventana	Desplazamientos	Puntuación de la ventana
1 (1,2s a 1,5s)	0,14 banner, 0,03 cambio de fuente	0,17
2 (4,0s)	0,05 embed	0,05

El CLS de la página es 0,17, el mayor de los dos, no 0,22. Perseguir la suma manda a los equipos al desplazamiento equivocado: encuentre la ventana que puntuó más alto y arregle lo que hay dentro de ella.

Cómo una ventana de sesión decide la puntuación

1

Se produce el primer desplazamiento. El empujón del banner a los 1,2s abre una ventana de sesión y puntúa 0,14.

2

El siguiente desplazamiento llega antes de 1 segundo. El cambio de fuente a los 1,5s se une a la misma ventana y eleva su total a 0,17.

3

Pasa una brecha de 1 segundo o más. La ventana se cierra, como ocurre 2,5 segundos después del cambio de fuente.

4

El siguiente desplazamiento abre una ventana nueva. El desplazamiento del embed a los 4,0s abre su propia ventana y puntúa 0,05.

5

Chrome informa la ventana con mayor puntuación. 0,17 se convierte en el CLS de la página, no la suma de 0,22 de ambas ventanas.

¿Qué cuenta como desplazamiento de diseño inesperado?

Un desplazamiento cuenta como inesperado salvo que siga a una interacción del usuario dentro de 500 milisegundos. Chrome marca con hadRecentInput cualquier desplazamiento que ocurrió justo detrás de un toque, un clic o una pulsación de tecla, y esos desplazamientos quedan excluidos de la puntuación, porque un lector que abrió un acordeón espera que el contenido de abajo se mueva.

Esa regla de 500ms es una palanca de diseño, no un detalle de implementación. Un botón "Cargar más" no cuesta nada, y el mismo contenido inyectado por un temporizador cuesta lo que diga la fórmula.

¿Qué causa el Cumulative Layout Shift?

Cuatro fuentes producen casi todos los desplazamientos que vale la pena arreglar, y cada una tiene una solución que elimina el desplazamiento en lugar de encogerlo.

Causa	Qué hace el navegador	Solución
Imágenes y vídeo sin dimensiones	Reserva altura cero y luego reajusta cuando llega el archivo	Poner los atributos width y height, o reservar la caja con aspect-ratio de CSS
Anuncios, iframes y embeds de terceros	Dimensiona el hueco solo después de que responde el tercero	Reservar el hueco con min-height o aspect-ratio, dimensionado según las medidas que ese hueco ya ha servido antes
Banners, avisos y skeletons inyectados	Inserta un nodo en el flujo del documento y empuja todo lo que hay debajo	Reservar el espacio por adelantado, renderizarlo fuera del flujo como una capa superpuesta, o insertarlo detrás de una acción del usuario
Fuentes web	Intercambia una fuente de reserva por la fuente web y cambia las métricas del texto a mitad del renderizado	Usar font-display: optional, igualar la fuente de reserva con size-adjust y los descriptores de override de fuente, y precargar la fuente crítica

El patrón que hay debajo de las cuatro: reserve la caja antes de que exista el contenido. Un navegador que ya conoce la altura de un hueco no tiene nada que reajustar cuando el hueco se llena.

¿Por qué el CLS de laboratorio difiere del CLS de campo?

El CLS de laboratorio cubre solo la carga de la página, y el CLS de campo cubre todo el ciclo de vida de la página. Lighthouse carga una URL con un perfil de dispositivo fijo, registra los desplazamientos dentro de su ventana de medición y luego para. Las personas reales pasan de esa ventana con el scroll, disparan imágenes de carga diferida, cierran un banner, abren un menú, y cada desplazamiento posterior al corte de Lighthouse sigue contando en el campo.

El viewport y la red añaden una segunda diferencia. La distance fraction divide por la dimensión más grande del viewport, así que el mismo banner de 160px puntúa distinto en un móvil que en un escritorio, y una conexión rápida de laboratorio entrega el contenido de un hueco antes de que el desplazamiento llegue a ocurrir, ocultando un defecto que se dispara siempre en una red lenta. Arregle las regresiones en el laboratorio y luego juzgue el resultado con datos de campo de visitas reales, donde los umbrales de los tres vitals están en una sola tabla.

¿Cómo encontrar el desplazamiento que causó un CLS malo?

Empareje la puntuación de campo con una grabación de la sesión que la produjo, para que la ráfaga sea algo que usted mira en lugar de algo que deduce. Un p75 de 0,28 le dice que la página falla; no le dice que un banner de consentimiento inyecta 160px sobre la línea de flotación para los visitantes cuya IP resuelve en la UE.

Flowsery entrega un solo script de menos de 10 KB, sin cookies y alojado en la UE, y no aplica muestreo, así que la puntuación sale de cada sesión en lugar de un subconjunto. Graba las sesiones junto con los tiempos, agrupa las coincidentes en un único issue ordenado por cuántos usuarios lo sufren, y envía ese issue a Slack, Linear o Jira con la repetición y los pasos para reproducirlo adjuntos.

CLS es uno de los tres Core Web Vitals, y cada uno falla por sus propios motivos. Largest Contentful Paint cubre el tiempo de renderizado, Interaction to Next Paint cubre la capacidad de respuesta, y el resumen de Core Web Vitals explica por qué una página tiene que aprobar los tres a la vez.

Preguntas frecuentes

¿Qué es una buena puntuación de CLS?

0,1 o menos en el percentil 75 es bueno, de 0,1 a 0,25 necesita mejorar, y por encima de 0,25 es malo, según los umbrales del equipo de Chrome en web.dev a septiembre de 2026. El percentil se calcula por separado para móvil y escritorio, así que una página puede aprobar en escritorio y fallar en móviles. Qué cuenta como un buen CLS desglosa cómo se arma el p75.

¿Tiene CLS una unidad?

No. Las dos entradas de la fórmula son fracciones del viewport, así que multiplicarlas produce un número sin unidad. Por eso 0,1 significa lo mismo en un móvil de 400px que en un monitor de 2560px: la métrica se normaliza contra la pantalla en la que ocurrió.

¿Los desplazamientos bajo la línea de flotación cuentan para el CLS?

Solo el movimiento del contenido visible en el viewport en el momento del desplazamiento contribuye a la impact fraction. Un elemento que se reajusta 4000px más abajo en la página mientras el lector está arriba no aporta nada. Empieza a contar en el momento en que el lector lo trae a la vista con el scroll y vuelve a moverse.

¿Por qué empeoró mi CLS después de añadir un skeleton loader?

Un skeleton que no coincide con la altura del contenido final desplaza la página dos veces en lugar de una: primero cuando aparece el skeleton, y otra vez cuando el contenido real lo reemplaza con dimensiones distintas. Dimensione el skeleton según la caja que ocupará el contenido, o el marcador de posición se convierte en el defecto.

¿Puede una animación causar un desplazamiento de diseño?

Animar propiedades que disparan el diseño, como top, left, width o height, mueve el contenido de alrededor y puntúa como un desplazamiento. Animar transform no lo hace, porque el compositor mueve la capa pintada sin volver a ejecutar el diseño. Pase las animaciones a transform y opacity y los desplazamientos desaparecen.

¿Sigue acumulándose el CLS después de que la página termina de cargar?

Sí. El navegador vigila los desplazamientos durante todo el ciclo de vida de la página, así que un banner que se inyecta a los 30 segundos, o una imagen que se carga de forma diferida al hacer scroll, abre una nueva ventana de sesión y puede convertirse en la puntuación reportada de la página. Esta es la razón principal por la que una ejecución limpia de Lighthouse convive con una puntuación de campo que falla.

¿Cuánto tiempo permanece abierta una ventana de sesión del CLS?

Una ventana de sesión se abre con el primer desplazamiento y sigue sumando los que llegan con menos de 1 segundo de diferencia, hasta un límite de 5 segundos. Una brecha de 1 segundo o una duración total de 5 segundos la cierra, y el siguiente desplazamiento abre una ventana nueva. Chrome puntúa cada ventana de la página y solo informa la más alta como CLS.

¿Hacer clic en un botón antes de un desplazamiento evita que cuente para el CLS?

Un desplazamiento queda excluido del CLS si ocurre dentro de los 500 milisegundos posteriores a un toque, clic o pulsación de tecla, una marca que Chrome registra como hadRecentInput. Un botón "Cargar más" que despliega contenido justo después de un clic no cuesta nada, mientras que el mismo contenido inyectado por un temporizador puntúa según la fórmula. La regla existe porque un lector que acaba de abrir un acordeón espera que lo que hay debajo se mueva.

¿Por qué el mismo desplazamiento de diseño puntúa distinto en móvil que en escritorio?

La fracción de distancia divide lo que se movió un elemento entre la dimensión más grande del viewport, así que un desplazamiento de píxeles fijo es una fracción mayor en una pantalla de móvil que en una de escritorio más ancha. El empujón de banner de 160px del ejemplo anterior puntúa 0,2 en un viewport de 800px de alto y puntuaría menos en una pantalla de escritorio más alta. El CLS de campo agrava esto porque el percentil se calcula por separado para móvil y escritorio, así que el mismo defecto puede pasar en uno y fallar en el otro.

¿Cuál es la solución más rápida para un desplazamiento causado por imágenes?

Añade los atributos width y height a las imágenes y vídeos, o reserva la caja con la propiedad CSS aspect-ratio, para que el navegador guarde el espacio antes de que llegue el archivo. Las imágenes sin dimensiones reservan cero altura por defecto y reflowan la página en cuanto carga el archivo. Reservar la caja elimina el desplazamiento en lugar de solo reducirlo.