Qué es CLS: definición y guía completa SEO
CLS (Cumulative Layout Shift): Métrica de Core Web Vitals que mide la estabilidad visual de una página durante la carga. Cuantifica cuánto se desplazan inesperadamente los elementos visibles. Un CLS elevado es síntoma de elementos que se insertan tarde, imágenes sin dimensiones definidas o fuentes que producen reflow al cargar.
Qué mide exactamente el CLS y cómo se calcula
El CLS se calcula como la suma de todas las sesiones de cambio de layout (layout shift sessions) que ocurren durante el ciclo de vida de la página. Cada sesión mide el impacto del desplazamiento: cuánto área de la pantalla se ve afectada (impact fraction) multiplicado por la distancia que se desplazan los elementos (distance fraction). El umbral de Google es: bueno ≤ 0.1, necesita mejoras entre 0.1-0.25, lento > 0.25. Este valor se mide tanto en datos de laboratorio (Lighthouse) como en datos de campo reales de usuarios (CrUX, recogidos en PageSpeed Insights).
Causas más frecuentes de CLS elevado en sitios reales
Las imágenes y vídeos sin atributos width y height explícitos son la causa número uno de CLS: el navegador no reserva el espacio antes de descargar el recurso y el contenido se desplaza al cargarse. Los anuncios y embeds de terceros (iframes de redes publicitarias, widgets de redes sociales) que se cargan tarde y empujan el contenido hacia abajo causan CLS severo. Las fuentes web con FOUT (Flash of Unstyled Text) o FOIT (Flash of Invisible Text) generan CLS si la fuente de sustitución tiene métricas diferentes a la fuente final. Las animaciones CSS que no usan la propiedad transform y modifican el layout también contribuyen.
Técnicas para reducir el CLS por tipo de elemento
Para imágenes: definir siempre width y height en el HTML o usar CSS aspect-ratio para reservar el espacio antes de la descarga. Para anuncios: reservar contenedores con dimensiones fijas antes de que la red publicitaria cargue. Para fuentes: usar font-display: optional o font-display: optional con tamaños de fuente de respaldo ajustados mediante las propiedades size-adjust, ascent-override y descent-override en @font-face. Para contenido inyectado por JavaScript: evitar insertar elementos sobre contenido visible ya renderizado; preferir insertar al final o usar posicionamiento absoluto/fixed.
Herramientas para medir y diagnosticar el CLS
PageSpeed Insights ofrece el CLS tanto en datos de laboratorio como en datos reales del informe CrUX. Chrome DevTools tiene una capa de Layout Shift (en Rendering > Layout Shift Regions) que resalta los elementos que se desplazan. La extensión Web Vitals de Google marca en verde/rojo el CLS en tiempo real durante la navegación. Para sitios con mucho JavaScript, el Long Animation Frame API (disponible desde Chrome 123) permite identificar qué scripts causan los desplazamientos más significativos.
Preguntas frecuentes
¿El CLS medido en Lighthouse equivale al CLS real que Google usa para el ranking?
No exactamente. Lighthouse mide el CLS en condiciones de laboratorio (dispositivo simulado, conexión emulada, una sola carga). Google usa para el ranking el CLS del informe CrUX, que es el percentil 75 del CLS real de todos los usuarios durante 28 días. Pueden diferir significativamente: el CLS de laboratorio puede ser 0 si los anuncios no se cargan, mientras el real puede superar 0.25 con anuncios activos.
¿Una animación CSS puede causar CLS?
Depende de la propiedad animada. Las animaciones que modifican top, left, width, height, margin o padding afectan al layout y pueden generar CLS. Las animaciones que usan exclusivamente transform (translate, scale, rotate) y opacity no afectan al layout y no causan CLS. Siempre es preferible animar con transform para mejorar tanto el CLS como el rendimiento de renderizado.