Qué es el CLS (Cumulative Layout Shift) y cómo eliminar el salto de diseño
El CLS mide cuánto saltan los elementos de la página al cargar. Conoce el umbral de 0,1 de Google, las causas más comunes y cómo estabilizar el diseño.
El CLS (Cumulative Layout Shift) es la métrica de Core Web Vitals para la estabilidad visual: cuánto se mueven solos los elementos de la página mientras carga. Es el número detrás de ese momento en que vas a hacer clic y el botón salta a otro lugar.
¿Qué es un buen CLS?
El CLS no tiene unidad — es una puntuación. Los rangos de Google, en el percentil 75 de las visitas, son:
- Bueno: hasta 0,1.
- Necesita mejora: entre 0,1 y 0,25.
- Deficiente: por encima de 0,25.
Qué causa el salto de diseño
- Imágenes y vídeos sin ancho y alto declarados — el navegador no reserva el espacio y el contenido empuja al resto cuando llega.
- Anuncios, banners y embeds que cargan después y ocupan un espacio que no existía.
- Fuentes que cambian de tamaño al cargar (FOUT/FOIT).
- Contenido inyectado por JavaScript por encima de lo que el usuario ya estaba leyendo.
Cómo eliminar el CLS
- Define siempre width y height (o aspect-ratio) en imágenes, vídeos e iframes.
- Reserva el espacio de banners y anuncios con un contenedor de tamaño fijo.
- Precarga las fuentes principales y usa métricas de reserva para evitar el salto de tamaño.
- Evita insertar contenido por encima de lo ya visible; insértalo debajo o reserva el espacio antes.
Un CLS alto cuesta conversiones: formularios enviados por error, el producto equivocado en el carrito, la sensación de un sitio "roto". La estabilidad visual es confianza — y la confianza es lo que hace avanzar al visitante.
Cómo medir el CLS de tu sitio
La Radiografía de Velocidad de First Class Dev mide el CLS junto con las demás métricas de Core Web Vitals, gratis y en segundos, usando la base oficial de Google.
Mide tu sitio ahora, gratis.
La Radiografía de Velocidad ejecuta la medición oficial de Google y muestra qué corregir primero.
Hacer la Radiografía gratis¿Cuál es el valor ideal de CLS?
Hasta 0,1 en el percentil 75 de las visitas. Entre 0,1 y 0,25 necesita mejora; por encima de 0,25 es deficiente. A diferencia del LCP, el CLS es una puntuación sin unidad de tiempo.
¿Por qué salta mi sitio al cargar?
Casi siempre por imágenes, anuncios o embeds sin espacio reservado: el navegador no conoce su tamaño hasta que llegan y empuja el contenido ya visible. Declarar dimensiones resuelve la mayoría de los casos.
¿El CLS cuenta para el SEO?
Sí. Es uno de los tres Core Web Vitals que Google usa como señal de experiencia de página, junto al LCP y el INP.