Aprender
Guía para corregir CLS: Cumulative Layout Shift y Page Experience
Una guía práctica para detectar y corregir Cumulative Layout Shift: por qué saltan los elementos, cómo reservar espacio y cómo demostrar que el diseño es estable.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
Qué mide CLS y por qué frustra a los usuarios
Cumulative Layout Shift (CLS) mide la estabilidad visual — cuánto se mueve el contenido visible mientras la página carga y se usa. Cada vez que un elemento que ya estaba en pantalla salta a una posición nueva sin que el usuario lo provoque, cuenta como layout shift, y la puntuación suma las mayores ráfagas de movimiento de la visita.
Un buen CLS es 0,1 o menos; por encima de 0,25 es malo. Y no es abstracto: los saltos hacen que la gente pulse el botón equivocado, pierda su sitio en un artículo o toque un anuncio por error. Es la métrica que mejor traduce la sensación de «esta página parece barata y rota».
Las fuentes habituales de layout shift
Casi todo salto viene de contenido que llega tarde a un espacio que no se le reservó. Los culpables comunes:
- Imágenes y vídeo sin atributos width y height, así que el navegador no puede reservar la caja hasta que carga el archivo.
- Fuentes web que se intercambian y recomponen el texto (FOUT), empujando hacia abajo todo lo que está debajo.
- Anuncios, embeds e iframes inyectados tras el render en un contenedor sin altura fija.
- Banners, avisos de cookies y widgets de «también te puede gustar» metidos por encima del contenido existente.
- DOM inyectado dinámicamente — una barra promo o un test A/B que aparece un instante después del primer pintado.
Cómo encontrar saltos que quizá no notes
Los saltos suelen ocurrir más rápido de lo que el ojo registra, o solo en conexión lenta, así que hace falta herramientas, no un vistazo rápido.
- En el panel Performance, graba una carga con throttling de red y abre la pista Layout Shifts — cada entrada resalta el elemento que se movió y su contribución.
- Usa la extensión Web Vitals para ver cómo CLS se acumula en vivo al desplazarte e interactuar.
- Revisa datos de campo en Search Console/CrUX para confirmar que usuarios reales lo ven, y en qué plantilla.
- Prueba en conexión limitada: muchos saltos solo aparecen cuando fuentes, imágenes o anuncios llegan tarde.
Cómo reservar espacio para que nada salte
- Fija siempre width y height (o un aspect-ratio CSS) en imágenes, vídeo e iframes para que el navegador reserve la caja antes de cargar el archivo.
- Da a los espacios de anuncios, embeds y widgets dinámicos un min-height acorde a su tamaño típico, para que el contenido tardío rellene el espacio reservado.
- Carga fuentes con font-display: optional o swap más un fallback bien ajustado y size-adjust para minimizar el reflow.
- Reserva espacio para banners y avisos en el diseño en vez de insertarlos sobre el contenido tras la carga — o fíjalos para que superpongan en vez de empujar.
- Anima con transforms CSS, nunca con propiedades como top o height que disparan layout.
Errores que reintroducen layout shift
- Quitar dimensiones al pasar a una imagen «responsive» y confiar solo en el width CSS sin aspect-ratio.
- Aplicar lazy-load a imágenes above-the-fold, lo que las retrasa a un espacio no reservado.
- Probar solo en un desktop rápido donde fuentes e imágenes llegan al instante y no se ve ningún salto.
- Corregir la home y suponer que la plantilla de producto o artículo está bien — CLS es por plantilla.
Cómo validar un diseño estable
Vuelve a grabar la carga en el panel Performance con throttling y confirma que la pista Layout Shifts está vacía para el viewport, y luego sigue la tendencia del CLS de campo en Search Console durante las semanas siguientes.
En DomainLens, trata CLS junto a LCP e INP: una página que carga rápido pero salta sigue fallando la page experience. La mejor corrección es un diseño estable desde el primer pintado, en la conexión móvil lenta que usan de verdad tus visitantes.