Prevención de Layout Shift con CSS Moderno
Los saltos inesperados de contenido frustran a los usuarios y perjudican tus puntuaciones de Core Web Vitals. El Cumulative Layout Shift (CLS) mide estos movimientos bruscos, no solo durante la carga inicial, sino a lo largo de toda la sesión de la página. Un botón que estás a punto de hacer clic se mueve repentinamente. El texto se reorganiza cuando las fuentes se intercambian. Un elemento embebido empuja el contenido hacia abajo mientras haces scroll.
El CSS moderno te proporciona herramientas precisas para prevenir el layout shift antes de que ocurra. Este artículo cubre las técnicas CSS-first que funcionan en producción hoy en día, enfocándose en el dimensionamiento intrínseco, la estabilidad de fuentes y patrones de animación que mantienen tu puntuación CLS por debajo del umbral de 0.1.
Puntos Clave
- El CLS se acumula a lo largo de todo el ciclo de vida de la página, no solo durante la carga inicial—el monitoreo de usuarios reales a menudo revela puntuaciones más altas que las herramientas de laboratorio
- Declara dimensiones intrínsecas usando
aspect-ratio, y los atributoswidthyheightpara reservar espacio antes de que llegue el contenido - Usa
size-adjusty propiedades de override de métricas en las declaraciones@font-facepara eliminar el reflow del intercambio de fuentes - Anima solo las propiedades
transformyopacitypara evitar activar el recálculo de layout
Por Qué el CLS Se Extiende Más Allá de la Carga de Página
El CLS se acumula a lo largo de todo el ciclo de vida de la página. Las herramientas de laboratorio como Lighthouse capturan los shifts durante la carga, pero el monitoreo de usuarios reales (RUM) a menudo revela puntuaciones más altas. ¿La diferencia? Los shifts post-carga provenientes de contenido lazy, anuncios que se inyectan tarde o transiciones que exceden el período de gracia de 500 milisegundos después de la interacción del usuario.
Los shifts que ocurren dentro de 500ms después de una entrada calificada del usuario no cuentan para el CLS—son esperados. Todo lo demás sí cuenta. Esto significa que la carga lazy activada por scroll, estados hover que redimensionan elementos y transiciones de rutas del lado del cliente contribuyen si causan movimiento inesperado.
Reservando Espacio con Dimensionamiento Intrínseco
La base para prevenir el layout shift es declarar dimensiones antes de que llegue el contenido. El CSS moderno hace esto de manera sencilla.
Imágenes y Medios
La propiedad aspect-ratio permite a los navegadores reservar espacio usando solo una proporción, sin valores fijos de píxeles. Combinada con los atributos width y height en elementos <img>, los navegadores calculan el espacio reservado inmediatamente durante el análisis del HTML.
Para imágenes responsivas, establece dimensiones en los elementos <source> dentro de <picture> para manejar la dirección de arte sin shifts. El navegador usa estos valores para establecer proporciones de aspecto antes de que se descarguen los datos de la imagen.
Embeds y Contenido Dinámico
Los embeds de terceros—videos, mapas, publicaciones sociales—rara vez comunican sus dimensiones finales. Usa min-height o aspect-ratio en elementos contenedores para reservar el espacio esperado. Cuando se desconocen las dimensiones exactas, reserva espacio para el tamaño más común basándote en tus analíticas, aceptando shifts menores para casos atípicos.
Para contenido inyectado vía JavaScript, aplica el mismo principio: los contenedores deben tener un tamaño intrínseco declarado en CSS antes de que se ejecuten los scripts.
Carga de Fuentes Sin Reflow
Las fuentes web causan shifts cuando las fuentes de respaldo y finales tienen métricas diferentes. La propiedad font-display por sí sola no resuelve esto—swap todavía causa reflow cuando las métricas difieren.
Fuentes de Respaldo con Métricas Alineadas
El CSS moderno ofrece size-adjust, ascent-override, descent-override y line-gap-override dentro de las declaraciones @font-face. Estas propiedades ajustan las métricas de tu fuente de respaldo para que coincidan con tu fuente web, eliminando el reflow visible incluso cuando ocurre el intercambio.
Combina esto con font-display: optional para la prevención de CLS más estricta—la fuente web solo se renderiza si está disponible durante el layout inicial. Para enfoques menos agresivos, los overrides de métricas con font-display: swap proporcionan texto legible inmediatamente mientras minimizan la magnitud del shift.
La precarga de fuentes críticas con <link rel="preload"> aumenta la probabilidad de que estén disponibles para el primer pintado, reduciendo la ventana donde se muestran las fuentes de respaldo.
Discover how at OpenReplay.com.
Animaciones y Expansión de UI
Animar width, height, top, left o margin activa el recálculo de layout y contribuye al CLS. Animar transform y opacity no lo hace—estas propiedades se ejecutan en el compositor sin afectar el flujo del documento.
Patrones de Animación Seguros
Escala elementos usando transform: scale() en lugar de cambiar dimensiones. Mueve elementos con transform: translate() en lugar de propiedades posicionales. Estos enfoques crean movimiento visual sin desplazar el contenido circundante.
Para UI expansible—acordeones, dropdowns, tooltips—el shift es aceptable cuando sigue la interacción del usuario dentro de 500ms. Si la expansión ocurre automáticamente o después de un retraso, reserva el espacio máximo expandido por adelantado o posiciona el elemento expansible fuera del flujo del documento usando position: absolute o patrones de overlay.
Transiciones en Cambios de Ruta
Las aplicaciones de página única a menudo activan CLS durante la navegación del lado del cliente. Si las animaciones de transición exceden 500ms o el contenido se carga asincrónicamente después de la navegación, los shifts cuentan contra tu puntuación. Mantén las transiciones breves y asegúrate de que el contenido entrante tenga espacio reservado mediante placeholders skeleton o dimensiones fijas de contenedor.
Validando Tu Enfoque
El panel Performance de Chrome DevTools muestra los layout shifts individuales con sus puntuaciones y elementos afectados. La pista Layout Shifts visualiza grupos de shifts, ayudando a identificar patrones.
Para el monitoreo en producción, las soluciones RUM que usan la librería web-vitals capturan el CLS de usuarios reales con atribución de elementos. Compara los datos de campo con las mediciones de laboratorio—las discrepancias indican shifts post-carga que tus pruebas sintéticas no detectan.
Conclusión
Prevenir el layout shift se reduce a un principio: declarar el tamaño intrínseco para todo antes de que se renderice. Usa aspect-ratio para medios, overrides de métricas para fuentes y transform para animaciones. Reserva espacio para contenido de carga tardía y verifica con herramientas de laboratorio y datos de campo.
El CSS moderno para la prevención de CLS no se trata de trucos—se trata de dar a los navegadores la información que necesitan para asignar espacio correctamente desde el principio.
Preguntas Frecuentes
Google considera una puntuación de CLS por debajo de 0.1 como buena, entre 0.1 y 0.25 como necesitando mejora, y por encima de 0.25 como pobre. Apunta a mantener tu puntuación por debajo de 0.1 para una experiencia de usuario óptima y rendimiento de Core Web Vitals. Monitorea tanto los datos de laboratorio como de campo, ya que las puntuaciones de usuarios reales a menudo difieren de las pruebas sintéticas.
Lighthouse mide el CLS solo durante la carga de página en condiciones controladas. El monitoreo de usuarios reales captura shifts a lo largo de toda la sesión, incluyendo contenido lazy-loaded, anuncios que se inyectan tarde e interacciones de usuario. Los shifts post-carga que ocurren después de que Lighthouse termina de medir solo aparecerán en los datos de campo.
No, font-display swap por sí solo no previene el layout shift. Asegura que el texto permanezca visible durante la carga de la fuente, pero aún causa reflow cuando la fuente web reemplaza a la de respaldo. Para prevenir el shift, combínalo con propiedades de override de métricas como size-adjust, ascent-override y descent-override para hacer coincidir las métricas de la fuente de respaldo y la fuente web.
No. Las animaciones que usan las propiedades transform y opacity se ejecutan en el hilo del compositor y no afectan el flujo del documento, por lo que no causan layout shift. Solo las animaciones que cambian propiedades que afectan el layout como width, height, margin o valores posicionales activan el recálculo y contribuyen al CLS.
Truly understand users experience
See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..
