CLS (Cumulative Layout Shift)
Definición breve
El CLS es la puntuación de estabilidad de Core Web Vitals que mide cuánto se desplazan de forma inesperada los elementos visuales al cargar una página.
Cuando una imagen o un espacio publicitario carga tarde y empuja el texto hacia abajo mientras la página se renderiza, ese movimiento cuenta para el CLS. La puntuación multiplica el tamaño del área desplazada por la distancia recorrida, y el objetivo es un valor cercano a cero.
Aparece en PageSpeed Insights y Search Console. El umbral oficial es 0,1: por debajo es bueno, entre 0,1 y 0,25 necesita mejora, por encima es malo. Reservar de antemano el espacio de las imágenes evita en gran medida este desplazamiento.
Se confunde a menudo con la velocidad de página, pero el CLS trata de estabilidad, no de velocidad; una página que carga rápido puede obtener mala puntuación si sus elementos se mueven mientras se renderiza.
El error más frecuente es insertar un aviso de cookies o un banner promocional en la parte superior de la página una vez que ya se ha renderizado, lo que empuja hacia abajo todo el contenido situado debajo y deteriora gravemente el CLS. Lo correcto es reservar de antemano una altura fija para esos elementos o superponerlos, de modo que usted nunca desplace el contenido ya mostrado.
Por qué importa
Si un botón se desplaza justo cuando el visitante va a pulsarlo, toca el elemento equivocado, lo que genera desconfianza y abandono. Mantener el CLS bajo evita clics erróneos en formularios, carrito y pago.
Ejemplo ilustrativo
En la página de precios de una cadena de spas, un banner de carga tardía empujaba el texto hacia abajo y los visitantes pulsaban por error otro paquete; fijar una altura para ese espacio detuvo el desplazamiento.
