Cómo corregir los desplazamientos de diseño (CLS) en Divi y Elementor

Search Console muestra «Problema de CLS: más de 0,1 (móvil)» en un grupo de páginas. PageSpeed muestra un CLS cercano a cero en la misma URL. Usted recorre la página y no ve nada evidente.

La diferencia es normal: el laboratorio solo mide la carga, mientras que los visitantes reales hacen scroll, tocan la pantalla y esperan a los banners. Nuestra guía sobre los datos de laboratorio y de campo explica por qué. Aquí, el objetivo es pillar el desplazamiento y eliminar su causa.

Pillar el desplazamiento en el acto

• DevTools, pestaña Rendering, marque Layout Shift Regions: cada desplazamiento parpadea en azul en el momento en que ocurre. Use la emulación móvil y una red limitada, y luego recorra toda la página.
• Panel Performance: grabe una carga y un scroll. La pista «Layout shifts» lista cada desplazamiento y los elementos que se movieron.

new PerformanceObserver(l => l.getEntries().forEach(e => {
  if (e.hadRecentInput) return;
  console.log(e.value.toFixed(3), e.sources?.map(s => s.node));
})).observe({ type: 'layout-shift', buffered: true });

Anote el elemento y el momento: en la carga, cuando aparece una fuente, cuando se abre un banner, al hacer scroll. El momento apunta a la causa.

Las seis causas habituales en un sitio hecho con maquetador

1. Imágenes sin dimensiones. Un módulo de imagen que imprime una etiqueta <img> sin width ni height no ocupa altura hasta que llega el archivo, y entonces empuja todo lo que hay debajo. Solución: ancho y alto en cada imagen, lo que permite al navegador calcular la proporción; o un aspect-ratio en el contenedor.

2. Estilos que llegan después del primer pintado. Los maquetadores dividen su CSS: un archivo global, y luego archivos por página o por layout. Si uno de ellos carga tarde, o una optimización lo aplaza, un elemento se renderiza una vez sin sus estilos y luego salta a su sitio. Un caso real: en un sitio con Divi 5, un breadcrumb no tenía estilos propios y tomaba su tamaño de fuente de una hoja de estilos por layout que llegaba después del primer pintado. Ocupaba cuatro líneas y luego se reducía a una. CLS de campo de 0,215, invisible en el laboratorio. Darle al breadcrumb su propio tamaño de fuente y su interlineado en los estilos críticos inline lo dejó por debajo de 0,02. Solución: las reglas que definen el tamaño de todo lo visible sin hacer scroll deben estar en el critical CSS.

3. Fuentes web que se intercambian. Con font-display: swap, el texto se muestra primero en una fuente alternativa y luego en la fuente web. Si las dos tienen anchos distintos, las líneas se recolocan y los bloques cambian de altura. Solución: haga el preload de los uno o dos archivos de fuente usados en la parte visible sin scroll; elija una fuente alternativa con métricas parecidas; o ajuste la fuente alternativa con size-adjust y ascent-override en su @font-face.

4. Cabeceras y banners añadidos por scripts. Una cabecera fija cuyo script añade un padding a la página después de medirla; una barra superior o un banner de cookies insertado encima del contenido en lugar de flotar sobre él. Solución: dé a la página el margen de su cabecera en CSS desde el principio, y haga que los banners sean superposiciones (position: fixed) en lugar de bloques que empujan el contenido.

5. Sliders y carruseles antes de arrancar. Antes de que se ejecute su script, un slider muestra todas sus diapositivas apiladas, o ninguna, y luego se reduce a una sola. Solución: CSS para el estado previo al script, con la altura final reservada y todas las diapositivas ocultas salvo la primera.

6. Contenidos incrustados e iframes. Un vídeo, un mapa o una publicación de redes sociales que carga sin un tamaño reservado. Solución: un contenedor con un aspect-ratio fijo, o una vista previa ligera que ya tiene el tamaño final.

Trampas propias de los maquetadores

• Animaciones de entrada: las animaciones basadas en transform y opacity no cuentan como desplazamiento de diseño; las animaciones que cambian height, margin o top sí. Prefiera las primeras, y evite animar cualquier cosa visible sin hacer scroll.
• Cabecera móvil distinta: una cabecera móvil más alta o más baja que el espacio que reservó la página desplaza todo, solo en los móviles.
• CSS del maquetador desactualizado: tras un cambio importante, regenere el CSS estático del maquetador. Un archivo truncado u obsoleto puede dejar reglas sin aplicar hasta que se reconstruya.
• Optimizaciones CSS: si al CSS recortado o aplazado le falta la regla que dimensiona un elemento, el desplazamiento vuelve. Vea nuestra guía sobre los estilos que faltan.

Validar

• Repita el escenario: móvil, red limitada, carga, scroll hasta el final, abrir el menú. Ningún parpadeo azul en la parte visible sin scroll.
• Luego «Validar corrección» en Search Console, y dele los 28 días de la ventana de datos de campo.

Con Mantys Core

En resumen

• El laboratorio rara vez ve el desplazamiento: píllelo en DevTools mientras hace scroll e interactúa.
• Seis causas: imágenes sin dimensiones, estilos tardíos, intercambios de fuentes, cabeceras y banners añadidos por scripts, sliders antes de arrancar, contenidos incrustados.
• Cada solución reserva el espacio antes de que llegue el contenido.
• En los maquetadores, vigile las animaciones, las cabeceras móviles y el CSS desactualizado del maquetador.
• Valide en Search Console y espere 28 días.