Calculadora de Cumulative Layout Shift (CLS)
Introduce los tiempos y las puntuaciones de los cambios de diseño (layout shifts) de una página —del panel Performance o de un registro de web-vitals— y obtén el Cumulative Layout Shift tal como lo cuentan las Core Web Vitals: la ventana de sesión más grande. Debajo, calcula la puntuación de un cambio a partir de sus fracciones de impacto y distancia.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Registra los cambios de diseño: en Chrome DevTools, el panel Performance los muestra con su tiempo y puntuación; la biblioteca web-vitals o un PerformanceObserver de entradas layout-shift dan los mismos datos.
- Escribe los tiempos en segundos y las puntuaciones en el mismo orden, separados por punto y coma o espacios.
- Lee el CLS, su valoración y qué ventana lo produjo.
- Si quieres, escribe las fracciones de impacto y distancia de un cambio para ver su puntuación.
Cómo funciona
Los cambios se ordenan por tiempo y se recorren uno a uno:
- un cambio menos de 1 s después del anterior y menos de 5 s después del inicio de la ventana actual se suma a ella;
- cualquier otro cambio abre una ventana nueva.
CLS = la mayor suma de una ventana. La puntuación de un cambio es fracción de impacto × fracción de distancia.
Ejemplo
Cambios a los 0,4; 0,9; 1,5; 4,2 y 4,6 s con puntuaciones 0,05; 0,02; 0,01; 0,12 y 0,03:
- 0,4 → 0,9 → 1,5 s: separaciones de 0,5 y 0,6 s, una ventana: 0,05 + 0,02 + 0,01 = 0,08;
- 4,2 s llega 2,7 s después del cambio anterior, así que abre una segunda ventana con 4,6 s: 0,12 + 0,03 = 0,15;
- CLS = 0,15 (ventana 4,2 – 4,6 s): necesita mejorar, aunque todos los cambios juntos suman 0,23.
Un banner que ocupa el 50 % del viewport y empuja el contenido un 25 % hacia abajo puntúa por sí solo 0,5 × 0,25 = 0,125.
Consejos
- Reserva espacio para imágenes, anuncios e incrustaciones con los atributos width y height o con aspect-ratio, para que nada se mueva al cargar.
- No insertes contenido encima de lo que el usuario está leyendo, como banners tardíos; muéstralos superpuestos o resérvales sitio.
- Anima con transform, no con top, left, width ni height: las transformaciones no provocan cambios de diseño.
Preguntas frecuentes
¿Cómo se calcula el CLS?
Los cambios de diseño se agrupan en ventanas de sesión. Un cambio entra en la ventana actual si ocurre menos de 1 segundo después del anterior y menos de 5 segundos después del primero de la ventana; si no, abre una ventana nueva. La puntuación de una ventana es la suma de sus cambios, y el CLS es la de la ventana más grande, no la suma de toda la visita.
¿Qué CLS es bueno?
Las Core Web Vitals consideran bueno 0,1 o menos, necesita mejorar de más de 0,1 a 0,25 y malo por encima de 0,25. Google evalúa el percentil 75 de las visitas, así que la mayoría de tus usuarios debería ver 0,1 o menos.
¿Cómo se obtiene la puntuación de un cambio?
Puntuación = fracción de impacto × fracción de distancia. La fracción de impacto es la parte del viewport que ocupan los elementos que se mueven, sumando su posición anterior y la nueva; la de distancia es el mayor desplazamiento de cualquiera de ellos dividido entre el ancho o el alto del viewport, el que sea mayor. Un bloque del 50 % que se mueve un 25 % puntúa 0,5 × 0,25 = 0,125.
¿Cuentan los cambios después de un clic?
No. Los cambios en los 500 ms siguientes a un toque, clic o pulsación de tecla son esperados; el navegador los marca (hadRecentInput) y no entran en el CLS. No los incluyas aquí.