Para corregir Cumulative Layout Shift, identifica qué modifica el diseño de forma inesperada y reserva el espacio que necesitará ese contenido antes de que llegue. Empieza por las dimensiones de los archivos multimedia, los espacios publicitarios, las inserciones, los avisos y los cambios de fuente. Graba también lo que sucede después de la carga inicial: una primera pantalla estable puede moverse más tarde.
Un CLS de 0,1 o menos en el percentil 75 se considera bueno. Mide movimiento visual inesperado y no tiene unidades; no expresa segundos de espera. Descargar la página antes puede reducir algunas oportunidades de desplazamiento, pero la solución más directa consiste en hacer previsible el diseño.
Entiende el cálculo antes de seguir al elemento que se mueve
La puntuación de un desplazamiento es la fracción de impacto multiplicada por la fracción de distancia. La primera representa la unión de las áreas visibles anteriores y nuevas de los elementos inestables, dividida entre el área de la ventana. La segunda usa el mayor movimiento horizontal o vertical, dividido entre la dimensión más larga de esa ventana. CLS agrupa los desplazamientos en ventanas de sesión: menos de un segundo entre movimientos y un máximo de cinco segundos por ventana. Cuenta la ventana con la mayor suma.
Esto importa en páginas que permanecen abiertas mucho tiempo. El resultado no es una suma que necesariamente crece durante toda la lectura. Sin embargo, una secuencia tardía puede determinarlo aunque la carga inicial pareciera estable.
Algunos desplazamientos próximos a una acción del usuario quedan excluidos. La excepción no cubre cualquier cambio tardío atribuible a un clic anterior, ni demuestra que el movimiento sea cómodo o accesible. Mantén la posición y el control del lector incluso cuando un cambio no afecte a la puntuación.
El navegador identifica los elementos desplazados, pero no necesariamente los responsables. Un título empujado por un anuncio demuestra que hubo movimiento; la expansión del anuncio es lo que debes corregir. Investiga qué cambió alrededor en ese mismo instante.
La introducción a Core Web Vitals explica la evaluación general. No confundas el CLS de una grabación con el percentil 75 de muchas visitas.
Graba la carga y el comportamiento posterior
En Chrome DevTools, registra un recorrido representativo con el panel Performance e inspecciona los eventos de desplazamiento y su evidencia visual. Las herramientas de Rendering permiten resaltar las regiones que cambian para facilitar la reproducción.
Incluye las condiciones que revelan contenido tardío: primera visita, elección de consentimiento, anuncio demorado, desplazamiento hasta una inserción y carga de fuentes sin caché caliente. Prueba varias anchuras. Un espacio correcto en escritorio puede expandirse o colapsar en móvil.
No todo movimiento visible constituye un evento CLS. Desplazarse por la página cambia la ventana visible, mientras que una transformación puede mover un elemento sin modificar el flujo de la misma manera. Usa los eventos registrados para distinguir el indicador de la impresión general de movimiento.
Anota la causa y el elemento afectado. Describe que un contenedor multimedia creció y empujó el título siguiente, en lugar de marcar simplemente el título como defectuoso. Así, quien mantiene la integración sabe qué reparar.
La guía de optimización de CLS de Google distingue los problemas de carga de los posteriores. Utilízala para ubicar tu caso, no para suponer que todos sus ejemplos existen en tu sitio.
Define el espacio de imágenes y vídeos desde el principio
Los atributos width y height permiten deducir la relación de aspecto antes de recibir la imagen. El CSS puede mantener un tamaño adaptable. Los valores deben describir las proporciones reales del archivo, no números arbitrarios para superar una auditoría.
Este ejemplo reserva una imagen horizontal que se ajusta a su contenedor. El archivo es un recurso ilustrativo del proyecto.
<img class="article-image"
src="/images/diagram.webp"
width="1600" height="900"
loading="lazy"
alt="A page layout with space reserved for media">.article-image {
display: block;
max-width: 100%;
height: auto;
}La carga diferida solo corresponde si la imagen queda fuera de la zona inicial importante. No copies loading="lazy" en la imagen LCP. Reservar geometría ayuda a la estabilidad; decidir cuándo descargar afecta a su disponibilidad.
Las imágenes con dirección artística pueden cambiar de proporción según el punto de ruptura. Comprueba que el espacio reservado corresponda a la variante seleccionada. Aplicar una proporción horizontal a una imagen móvil vertical puede causar recortes o reajustes posteriores.
Inspecciona también el contenedor. Pies de imagen, bordes y controles pueden añadir altura después. El componente completo debe comportarse de forma previsible. La guía de optimización de imágenes relaciona estas decisiones con la selección de recursos adaptables.
Reserva los anuncios antes de que termine la subasta
El tamaño definitivo de un anuncio puede ser desconocido al dibujar la página. Decide qué dimensiones admite cada espacio en cada punto de ruptura y resérvalas desde el diseño inicial. Coordina la regla con la configuración publicitaria; no adivines una altura.
Estas dimensiones ilustran el patrón y no son tamaños recomendados para una red concreta.
.ad-slot {
min-height: 250px;
display: grid;
place-items: center;
}
@media (min-width: 64rem) {
.ad-slot {
min-height: 280px;
}
}El mínimo reservado evita que un anuncio pequeño o ausente tire del contenido hacia arriba solo si el componente conserva ese espacio. Colapsarlo automáticamente cuando no llega publicidad puede crear el desplazamiento que querías evitar.
Existe un compromiso entre espacio reservado y espacio vacío. Resuélvelo de forma deliberada, sobre todo en la primera pantalla. Puedes limitar formatos, elegir una ubicación menos disruptiva o conservar un contenedor neutro. No amplíes un espacio superior sin considerar qué contenido desplaza.
Prueba estados de carga, anuncio recibido, ausencia de anuncio y fallo en un entorno adecuado. Una simulación que siempre devuelve el mismo tamaño no demuestra que la integración real sea estable.
Mantén estables las inserciones mientras se inicializan
Los reproductores y las publicaciones sociales pueden reemplazar un contenedor pequeño por un componente más alto. Define la geometría prevista antes de ejecutar código externo y consérvala durante la carga y los errores.
Este contenedor reserva espacio para un componente cuya proporción prevista es 16:9, sin obligarlo a cargar inmediatamente.
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #0c1222;
}
.video-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}No toda inserción tiene una proporción de vídeo fija. Una publicación social o un gráfico interactivo pueden depender de su contenido. Usa el comportamiento admitido por el proveedor, un espacio inicial realista y una ubicación donde crecer no interrumpa la lectura.
Una fachada puede aplazar la descarga del reproductor hasta que el visitante lo solicite. Mantén sus dimensiones al sustituirla, permite activarla con teclado y explica el fallo si el contenido externo no está disponible.
La guía de scripts de terceros trata el coste de ejecución que permanece aunque la geometría sea estable. Corregir estabilidad no demuestra que también se haya solucionado la capacidad de respuesta.
Evita que avisos y paneles asíncronos empujen el contenido
Los controles de consentimiento, avisos y recomendaciones suelen aparecer después del diseño inicial. Decide su posición antes de dibujar lo que los rodea. Reservar espacio o diseñar una superposición apropiada puede evitar insertar un bloque inesperado sobre el artículo.
Una superposición también tiene obligaciones de uso. No debe ocultar permanentemente contenido esencial, atrapar mal el foco ni volverse imposible de cerrar al aumentar el texto. Comprueba pantallas estrechas y zoom; una altura fija no sirve necesariamente para todas las traducciones.
Las recomendaciones necesitan estados de carga previsibles. Un esqueleto mucho más corto que el resultado final permite todavía un desplazamiento. Usa una estructura realista de líneas e imágenes o sitúa la zona variable donde crecer no interrumpa la tarea.
Evita calcular tarde con JavaScript una dimensión que puede definirse en el CSS inicial. Eso introduce una carrera con el primer diseño. Prefiere reglas estables y añade comportamiento dinámico cuando el contenido lo requiera de verdad.
Aproxima la geometría de las fuentes alternativas
El texto puede moverse al sustituir una fuente alternativa por la descargada. La anchura de caracteres, ascendentes, descendentes e interlineado afectan al diseño. Un título que pasa a ocupar otra línea desplaza más contenido que sus propias letras.
font-display: swap muestra texto mientras llega la fuente, pero no garantiza geometría estable. font-display: optional puede evitar una sustitución tardía en ciertas condiciones, a cambio de mantener la fuente alternativa durante esa visita.
Elige una alternativa apropiada y, cuando se justifique, ajusta sus métricas con size-adjust, ascent-override, descent-override y line-gap-override. Los valores dependen del par de fuentes. Copiar porcentajes de otro sitio puede empeorar la diferencia.
Prueba los sistemas de escritura reales de la publicación. Hebreo, coreano y alfabeto latino pueden utilizar archivos y alternativas distintos. Un título inglés corto no representa un título traducido largo ni una mezcla de abreviaturas latinas y otro alfabeto.
Precarga solo una fuente necesaria al principio que, de otro modo, llegaría demasiado tarde. Precargar todos los grosores puede competir con imágenes importantes. Revisa las solicitudes y el diseño juntos para evitar una regresión de carga.
Anima sin recalcular continuamente el diseño
Animar anchura, altura, posición superior u otras propiedades de diseño puede provocar cálculos repetidos y mover contenido vecino. Las transformaciones y la opacidad suelen permitir transiciones visuales sin modificar el flujo circundante.
Eso no justifica animar contenido esencial sin necesidad. Un objeto en movimiento puede distraer aunque no cuente para CLS. Respeta la preferencia de movimiento reducido y alinea el foco y las zonas pulsables con lo que se ve.
En un acordeón, considera la expectativa del lector y los controles cercanos. Mantén una relación clara entre la activación y el contenido revelado. Evita inserciones ajenas que lleguen tarde y empujen la página.
Busca en datos reales los casos que una recarga no revela
Una prueba de carga puede terminar antes de que un anuncio se actualice o el lector alcance una inserción tardía. Si el CLS real es peor, reproduce el recorrido completo antes de descartar el informe.
RUM puede relacionar desplazamientos con plantillas y componentes. La cobertura de las API y la visibilidad de iframes pueden diferir de CrUX, por lo que un recolector JavaScript del documento principal quizá no observe todo. Documenta la diferencia en vez de forzar una coincidencia.
Comprueba también el botón Atrás. Restaurar una página desde la caché de avance y retroceso difiere de recargarla. Conserva esa posibilidad cuando corresponda y corrige igualmente los problemas de la primera carga.
Prioriza las causas compartidas. Reparar un contenedor usado en cientos de páginas es más útil que ajustar cada artículo. Verifica excepciones como imágenes ausentes, pies largos o contenido que no llega.
Valida la geometría además del resultado
Repite el escenario original e inspecciona el mismo evento después del cambio. Confirma que el contenido permanece en su sitio y que el espacio reservado no introduce recortes, desbordamiento ni desplazamiento adicional innecesario.
Compara anchuras, extensiones de texto y estados de carga. Revisa teclado, zoom y traducciones. Una caja de altura fija puede dar apariencia de estabilidad simplemente cortando el contenido; eso no es una solución aceptable.
Guarda el CLS observado y las condiciones junto con el cambio. Tras publicarlo, revisa los resultados reales conforme entren nuevas visitas en la ventana de datos. Una grabación local estable no promete un cambio inmediato en Search Console.
Incluye el contenido tardío en la revisión de componentes
Documenta para cada componente cuánto espacio reserva, qué sucede si falta contenido y si puede cambiar de altura después de comenzar la interacción. Así, la estabilidad forma parte del diseño y no de una auditoría de emergencia recurrente.
Usa el comprobador de Core Web Vitals para interpretar las mediciones y las guías de Core Web Vitals para investigar el siguiente problema. Un componente estable se comporta de forma previsible en sus estados normal, demorado y fallido, no solo cuando ya terminó de cargar.
