CLS (Cumulative Layout Shift)
Definición
Métrica de estabilidad visual: suma de movimientos inesperados del contenido durante la carga. Threshold: <0.1 = bueno; 0.1-0.25 = aceptable; >0.25 = malo. Causada típicamente por imágenes sin width/height, ads que se inyectan, fuentes web que cambian de tamaño.
Por qué importa
Un CLS alto es la causa #1 de clicks accidentales y frustración. En conversion funnels, cada salto inesperado cuesta usuarios.
Cómo aplicarlo
- 01Define width + height en `<img>` y `<video>` siempre.
- 02Reserva espacio para ads con CSS aspect-ratio antes de que carguen.
- 03Carga fuentes con `font-display: optional` o `swap` con cuidado.
- 04Evita inyectar contenido above-the-fold después del paint inicial.