Por qué su página se desplaza
Casi todos los problemas de CLS provienen de una de tres fuentes:
- Imágenes e iframes sin dimensiones reservadas. Si el navegador no conoce el tamaño de una imagen antes de que cargue, renderiza el cuadro con altura cero y luego desplaza todo lo que hay debajo hacia abajo en el instante en que llega la imagen.
- Contenido inyectado por encima del contenido existente. Los anuncios, las barras promocionales y los banners de cookies que se insertan en el DOM después del renderizado inicial empujan hacia abajo todo lo que está debajo de ellos.
- Fuentes web que reflujan el texto al intercambiarse. Primero se renderiza una fuente de respaldo, luego carga la fuente real y se intercambia con un ancho/alto distinto, reflujando cada línea que toca.
Cómo identificar qué se está desplazando
Las verificaciones de rendimiento de Scanverra puntúan el CLS directamente a partir de una ejecución real de Lighthouse contra su URL en vivo, usando la misma métrica cumulative-layout-shift en la que se basan los datos de campo de Google. Cuando es alto, Scanverra lo señala como un problema distinto, no solo como una cifra, sino como un problema con nombre propio, porque un diseño inestable también rompe otra cosa: un agente de IA o una herramienta automatizada que intenta hacer clic en un botón que acaba de moverse apuntará al elemento equivocado.
Para encontrar el elemento específico responsable, el panel de Rendimiento de Chrome DevTools registra entradas de "Layout Shift" con el nodo exacto que se movió y en qué medida: ábralo, grabe una carga de página y busque los marcadores rojos de desplazamiento de diseño en la pista de Experience.
Cómo solucionarlo
1. Reserve espacio con dimensiones explícitas
Cada imagen, video e iframe debería declarar su width y height (o usar el aspect-ratio moderno de CSS) para que el navegador pueda asignar el cuadro correcto antes de que llegue el recurso:
1<img
2 src="/product.webp"
3 alt="Wireless keyboard, top view"
4 width={640}
5 height={480}
6 loading="lazy"
7/>Cuando el tamaño exacto en píxeles varía (un contenido incrustado responsivo, por ejemplo), use CSS en su lugar:
1.video-embed {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}2. Dé al contenido inyectado dinámicamente un espacio de altura fija
Si un banner de cookies, un espacio publicitario o una barra promocional tiene que insertarse después del renderizado inicial, dele a su contenedor un min-height reservado desde el principio en lugar de dejar que empuje el contenido hacia abajo cuando llegue: incluso un cuadro de marcador de posición vacío evita el desplazamiento.
3. Ajuste las métricas de su fuente de respaldo a las de la fuente real
Use font-display: swap combinado con una fuente de respaldo cuya altura-x y ancho de carácter promedio sean cercanos a los de su fuente real (herramientas como Fontaine o el ajuste manual de size-adjust en un bloque @font-face pueden igualarlos), para que el intercambio no reflujen visiblemente la línea.
4. Nunca inserte contenido por encima de la posición actual de desplazamiento del usuario
Si tiene que aparecer contenido nuevo, un banner de "nuevas publicaciones disponibles", por ejemplo, insértelo por debajo de la línea de flotación o requiera una acción del usuario para mostrarlo, en lugar de inyectarlo por encima de lo que ya es visible.
Cómo detecta Scanverra los problemas de CLS
Scanverra ejecuta una pasada real de Lighthouse contra su URL en vivo y lee el valor real de cumulative-layout-shift a partir de ella, la misma ejecución usada para LCP y TTFB, y señala un problema dedicado cuando es alto, con una descripción vinculada a por qué la inestabilidad del diseño importa específicamente para cualquiera (humano o automatizado) que intente interactuar con su página.