Cumulative Layout Shift (CLS)

Qué es CLS

CLS (Cumulative Layout Shift) es una de las tres métricas Core Web Vitals. Mide cuánto se mueve el contenido visible mientras carga. Si un banner aparece encima del párrafo que estás leyendo y te hace clicar sin querer en un anuncio, eso es CLS alto.

Umbrales

• Bueno: menos de 0,1
• Mejorable: 0,1 a 0,25
• Malo: más de 0,25

Por qué importa

CLS alto se siente como una web amateur. Bajo se siente profesional. Es la métrica más fácil de arreglar y la que más sensación de calidad da. Además, los usuarios suelen hacer clic equivocado en webs con CLS alto, lo que mata la conversión.

Causas típicas

• Imágenes sin atributos width y height
• Fuentes web que cambian el tamaño al cargar (FOUT/FOIT)
• Anuncios que aparecen tarde y empujan contenido
• Embeds de YouTube/Twitter/Instagram sin espacio reservado
• Banners de cookies que aparecen a los 200 ms

Cómo arreglarlo

1. Pon width y height a TODAS las imágenes
2. Reserva espacio para embeds con CSS (min-height)
3. Banner de cookies fijo abajo, sin empujar
4. Anuncios con contenedores de altura mínima
5. Usar aspect-ratio CSS donde no haya dimensiones

CLS es uno de los problemas más rápidos de arreglar: en media tarde puedes pasar de 0,3 a 0,05.