CLS
CLS (Cumulative Layout Shift) es una de las tres métricas de Core Web Vitals: mide la estabilidad visual de una página, es decir, cuánto se mueven inesperadamente los elementos mientras carga. Un buen puntaje de CLS es igual o menor a 0.1.
Puntaje de cambio = Fracción de impacto × Fracción de distancia
Las causas más comunes de un mal CLS son imágenes o videos sin dimensiones definidas (que 'empujan' el contenido al terminar de cargar), anuncios o embeds insertados sin espacio reservado, y fuentes web que provocan un reflujo del texto al cargar. Es una de las tres métricas de Core Web Vitals, junto a LCP e INP, que Google usa como señal de experiencia de página.
El CLS total de la página es la suma de los puntajes de cambio de todos los cambios de diseño inesperados ocurridos durante la carga.
Ejemplo
Si un botón de "Comprar" se corre hacia abajo justo cuando estás por hacer clic, porque una imagen recién terminó de cargar arriba y empujó el contenido, eso es exactamente lo que penaliza el CLS.
| Puntaje CLS | Calificación |
|---|---|
| ≤ 0.1 | Bueno |
| 0.1 – 0.25 | Necesita mejora |
| > 0.25 | Malo |
Términos relacionados
Preguntas frecuentes
¿Qué causa un mal puntaje de CLS?
Principalmente imágenes sin dimensiones definidas, anuncios o embeds que se cargan sin espacio reservado, y fuentes web que provocan un reflujo del texto.
¿Cómo mejoro mi CLS?
Definiendo width y height (o aspect-ratio) en todas las imágenes y videos, y reservando espacio para elementos que cargan de forma asíncrona.
¿El CLS afecta el SEO?
Sí, es una de las tres métricas de Core Web Vitals que Google usa como señal de experiencia de página.
