Según el informe Web Almanac 2024 de HTTP Archive, solo el 43% de los sitios web superan el umbral «bueno» de CLS establecido por Google en sus Core Web Vitals. En páginas con mucho contenido —medios digitales, blogs extensos o catálogos de producto— el problema se agudiza porque hay más elementos que pueden moverse mientras carga la página. Las técnicas de CSS moderno permiten controlar esto con mayor precisión de lo que muchos equipos aplican en la práctica.
Por qué ocurren los layout shifts y cuándo importan
Un layout shift ocurre cuando un elemento visible cambia de posición entre un frame y el siguiente sin que el usuario haya interactuado con la página. La causa más habitual es que el navegador no sabe cuánto espacio reservar para un elemento antes de que cargue: imágenes sin dimensiones, fuentes web que reemplazan fuentes del sistema con diferente espaciado, o bloques de contenido que se inyectan va JavaScript.
Los shifts no solo frustran al usuario cuando hace clic en el lugar equivocado; Google los mide en campo —no solo en laboratorio— a través del Chrome User Experience Report, lo que significa que el CLS real de tu sitio puede ser significativamente peor de lo que muestran tus pruebas en escritorio con conexión rápida.
Dimensiones explícitas: la primera línea de defensa
Definir width y height en imágenes, videos e iframes es la medida más directa para prevenir shifts. Cuando estos atributos están presentes, el navegador puede calcular el espacio necesario antes de descargar el recurso y reservarlo en el layout. La propiedad aspect-ratio de CSS es una alternativa moderna que permite declarar la proporción del elemento de forma independiente al tamaño:
.media-container {
aspect-ratio: 16 / 9;
width: 100%;
}Para bloques publicitarios o módulos cargados vía JavaScript, la solución es envolver el contenedor con dimensiones mínimas fijas o un placeholder visible. Sin eso, el bloque ocupa 0px hasta que el script termina de ejecutarse y el layout se recalcula de golpe.
CSS moderno para layouts predecibles
CSS Grid y Flexbox ofrecen herramientas que reducen la inestabilidad del layout cuando el contenido varía en longitud o tamaño. Propiedades como grid-auto-rows: minmax(min-content, auto) permiten que las celdas crezcan cuando el contenido lo necesita sin desplazar lo que está debajo. En Flexbox, flex-basis con valores explícitos y align-items: stretch controlan el comportamiento de los elementos cuando el contenido no tiene altura fija.
La propiedad contain: layout es menos conocida pero muy eficaz: limita los efectos de los cambios de tamaño de un elemento al bloque que lo contiene, evitando que un ajuste interno se propague al resto del documento. Es especialmente útil en componentes de terceros cargados dinámicamente. Puedes relacionar estas técnicas con el análisis de diseño modular con CSS y WordPress para entender cómo la arquitectura reduce este tipo de problemas.
Lazy loading sin romper la estabilidad visual
La carga diferida de imágenes es imprescindible para el rendimiento, pero mal gestionada es una fuente directa de layout shifts. El atributo loading="lazy" no hace nada por sí solo para reservar espacio: eso depende de que los atributos width y height —o un aspect-ratio CSS— estén definidos en el elemento.
Una práctica efectiva es usar un placeholder de color neutro o degradado suave que ocupe exactamente el espacio que ocupará la imagen cuando cargue. Así el usuario ve que hay algo en camino y el layout no salta. Para las imágenes que aparecen en el viewport inicial (above the fold), no se debe usar lazy loading: esas deben cargarse de inmediato para no perjudicar el LCP.
Animaciones que no desplazan el layout
Las animaciones basadas en propiedades como top, left, width o height desencadenan recalculo de layout y son una fuente de CLS. Las animaciones con transform y opacity no afectan al flujo del documento porque se procesan en el compositor del navegador, fuera del hilo principal.
La propiedad will-change le indica al navegador que un elemento va a animarse, lo que permite preparar una capa de composición con antelación. El problema es que su uso indiscriminado consume memoria. La regla práctica es añadirla solo cuando la animación ya existe y se ha comprobado que hay un problema de rendimiento, no de forma preventiva.
Fuentes web y el coste del FOUT
El FOUT (flash of unstyled text) y el FOIT (flash of invisible text) son efectos visuales que ocurren cuando las fuentes web aún no han cargado. La diferencia de métricas de fuente entre la fuente del sistema y la fuente personalizada puede provocar que bloques de texto cambien de altura y desplacen el contenido de abajo.
font-display: swap muestra inmediatamente la fuente del sistema mientras carga la personalizada, lo que es mejor para el LCP pero puede introducir un pequeño shift al intercambiar. La opción font-display: optional elimina el shift completamente descartando la fuente web si tarda demasiado, a costa de que algunos usuarios vean la fuente del sistema siempre. Elegir entre una y otra depende de cuánto afecta la tipografía a la identidad visual del sitio. Relaciona esto con las estrategias de diseño minimalista en WordPress para mejorar velocidad.
CSS crítico para estabilizar el renderizado inicial
En páginas extensas, el CSS pesado que tarda en procesarse puede hacer que el navegador renderice la página dos veces: una versión sin estilos y otra con estilos completos. Extraer el CSS crítico —los estilos necesarios para el contenido visible en el viewport inicial— e inyectarlo inline en el <head> garantiza que la primera renderización ya sea visualmente correcta.
Herramientas como Critical o PurgeCSS permiten automatizar este proceso. En WordPress, plugins como LiteSpeed Cache o WP Rocket tienen opciones para inyectar CSS crítico generado automáticamente. El resultado es una percepción de carga más rápida y una puntuación de CLS mejor, especialmente en conexiones lentas o dispositivos con poca memoria. Para más contexto sobre performance en WordPress, revisa el post sobre cuellos de botella por plugins y builders.
Medición en campo y en laboratorio
Lighthouse y PageSpeed Insights miden el CLS en laboratorio —condiciones controladas y simuladas— mientras que el informe de campo en Google Search Console refleja el CLS real de los usuarios. Ambas fuentes son necesarias: el laboratorio detecta problemas reproducibles, el campo detecta problemas específicos de dispositivos, conexiones o contenido dinámico que no aparece en las pruebas controladas.
La extensión Web Vitals de Chrome permite identificar en tiempo real qué elemento provoca el shift en una página específica. Una vez localizado, el proceso es sistemático: comprobar si tiene dimensiones explícitas, si hay fuentes web sin font-display configurado, si hay contenido inyectado dinámicamente sin espacio reservado o si hay animaciones con propiedades que afectan al layout.
Preguntas frecuentes sobre layout shifts y CLS
¿Qué valor de CLS se considera bueno según Google?
Google considera que un CLS de 0,1 o menos es bueno. Entre 0,1 y 0,25 necesita mejora. Por encima de 0,25 es malo. La puntuación se calcula como la suma de las sesiones de shifts más grandes en la vida de la página, no como el total acumulado de todos los desplazamientos.
¿Los anuncios publicitarios siempre causan layout shifts?
No necesariamente. Los anuncios causan shifts cuando se inyectan en el layout sin que haya espacio reservado para ellos. Si defines un contenedor con dimensiones mínimas antes de que el anuncio cargue, el shift se elimina o reduce significativamente. La práctica habitual en sitios con publicidad display es reservar el espacio del slot desde el CSS aunque el anuncio aún no haya cargado.
¿Puedo usar animaciones CSS sin afectar al CLS?
Sí, siempre que las animaciones usen transform y opacity en lugar de propiedades que afectan al flujo del documento. Animar transform: translateY() produce el mismo efecto visual que animar top, pero sin desencadenar recalculo de layout ni afectar al CLS.
¿El lazy loading empeora el CLS?
Solo si los elementos sin carga tienen dimensiones indefinidas. Con width, height o aspect-ratio correctamente declarados, el lazy loading no provoca shifts. El problema surge cuando se elimina el atributo height de las imágenes para hacer el diseño más flexible sin añadir aspect-ratio como reemplazo.
¿Cómo afecta el CLS al posicionamiento SEO?
CLS es uno de los tres Core Web Vitals que Google usa como señal de ranking. No es el factor más determinante, pero un CLS malo puede penalizar páginas que compiten en nichos competidos donde las diferencias de calidad son pequeñas. Además, un CLS alto deteriora la experiencia de usuario, lo que genera más rebotes y menos tiempo en página, dos señales de comportamiento que Google también considera.
