Cumulative Layout Shift (CLS)
El Cumulative Layout Shift (CLS) es una métrica de Core Web Vitals que cuantifica cuánto se desplaza de forma inesperada el contenido visible durante la vida de una página. Captura el problema del "contenido que salta", cuando los usuarios intentan tocar un botón que se mueve en el último segundo.
El Cumulative Layout Shift (CLS) es una métrica de Core Web Vitals que cuantifica cuánto se desplaza de forma inesperada el contenido visible durante la vida de una página. Captura el problema del "contenido que salta", cuando los usuarios intentan tocar un botón que se mueve en el último segundo.
Por qué es importante
El CLS es una señal de posicionamiento confirmada por Google y uno de los tres Core Web Vitals. Los umbrales de Google: bueno ≤ 0,1, necesita mejorar 0,1 a 0,25, deficiente > 0,25. Un CLS alto perjudica la confianza del usuario; la investigación de Google muestra que las páginas con un CLS > 0,15 tienen tasas de rebote un 24 % más altas. Además, es el Core Web Vital más barato de corregir porque casi todas las causas tienen una solución sencilla.
Cómo se calcula el CLS
Puntuación de CLS = fracción de impacto × fracción de distancia, sumada en todos los desplazamientos de diseño inesperados que se producen durante la vida de la página.
- Fracción de impacto: la porción del viewport afectada por el elemento que se desplaza (unión de antes y después).
- Fracción de distancia: la mayor distancia que se movió cualquier elemento, como fracción del viewport.
Desde 2021, Chrome usa el "CLS por ventanas"; solo cuenta la peor ventana de 5 segundos, de modo que una SPA de larga duración no se penaliza para siempre por un solo mal momento.
Causas comunes
Imágenes sin dimensiones: Un <img> sin atributos width/height obliga al navegador a recolocar el contenido cuando la imagen carga.
Anuncios e incrustaciones sin espacio reservado: Los espacios publicitarios de terceros insertados tras el renderizado inicial empujan el contenido hacia abajo.
Fuentes web que provocan FOIT/FOUT: Cuando carga una fuente personalizada, el texto se recoloca porque la fuente de respaldo tiene métricas diferentes.
Contenido inyectado de forma dinámica: Widgets de "Quizás también te interese", banners de cookies y notificaciones que aparecen por encima del contenido existente.
Animaciones que no se basan en transform: Animar top o left desencadena un recálculo del diseño; animar transform no.
Cómo corregir el CLS
Establece dimensiones explícitas en imágenes y vídeos: <img width="800" height="600">; el navegador reserva el espacio antes de que el archivo cargue.
Reserva el espacio del bloque publicitario: Da a los contenedores de anuncios un min-height fijo para que los anuncios insertados no empujen el contenido.
Usa font-display: optional o precarga las fuentes web para minimizar el FOUT.
Inserta el contenido nuevo por debajo del pliegue o al interactuar el usuario, no por encima del contenido existente.
Anima solo con transform y opacity; estas propiedades no desencadenan un recálculo del diseño.
Usa la propiedad CSS aspect-ratio para medios responsivos sin dimensiones explícitas.
Medición del CLS
Datos de campo: CrUX, el informe de Core Web Vitals de Search Console y la sección de datos de campo de PageSpeed Insights.
Datos de laboratorio: Lighthouse y el panel de rendimiento de Chrome DevTools. Ten en cuenta que el CLS de laboratorio puede diferir del de campo porque los usuarios reales activan posiciones de scroll e interacciones distintas.
El CLS se evalúa sobre el percentil 75 de los datos de usuarios reales, así que los datos de campo son los que cuentan para el SEO.
Sources: