Guía · WordPress
CLS en WordPress: cómo evitar los saltos de diseño
El CLS mide los saltos visuales durante la carga. Revisa imágenes sin medidas, anuncios, banners de cookies, fuentes y contenido insertado en WordPress.
El CLS (Cumulative Layout Shift) mide cuánto se mueve el contenido mientras la página carga. En WordPress, los saltos casi siempre vienen de imágenes sin dimensiones, banners que se insertan arriba, anuncios, fuentes que cambian de tamaño o bloques cargados por JavaScript.
Fuentes
De dónde vienen los saltos
| Origen | Por qué mueve la página |
|---|---|
| Imágenes sin ancho y alto | El navegador no reserva espacio |
| Banner de cookies o de aviso | Empuja el contenido al aparecer |
| Anuncios o incrustaciones | Se cargan tarde con tamaño variable |
| Fuentes web | El texto cambia de tamaño al cargar la fuente |
| Menú o cabecera que cambia | Scripts que modifican la altura |
Corregir
Cómo corregirlos
- Define ancho y alto en todas las imágenes; WordPress lo hace al insertar desde la biblioteca, pero no en HTML personalizado.
- Reserva un espacio fijo para anuncios, mapas y vídeos antes de que carguen.
- Muestra el aviso de cookies sobre el contenido, sin desplazarlo.
- Usa una fuente de reemplazo de métricas similares mientras carga la web.
- Evita insertar contenido nuevo por encima de lo que ya se ve.
Detectar
Cómo encontrar el elemento que salta
En las herramientas de desarrollo de Chrome, el panel Rendimiento marca los cambios de diseño y señala los elementos implicados. También puedes activar el resaltado de cambios de diseño en la pestaña de renderizado. Consulta la definición vigente de la métrica en la documentación oficial de Core Web Vitals. Revisa especialmente la versión móvil.
Cuidados
Qué no conviene hacer
No ocultes el problema retrasando todo el contenido; eso puede empeorar otras métricas. Tampoco asumas que un plugin lo arregla solo: valida con la página real. Si usas un constructor visual, comprueba que los bloques animados no cambien de altura. Relaciona esta guía con WordPress lento en móvil y con el LCP.
Una buena práctica es revisar tus plantillas con la conexión simulada más lenta que ofrezca Chrome. Con una red lenta, los saltos se ven con claridad: imágenes que aparecen tarde, banners que empujan el texto, menús que cambian de altura. Anota cada salto con una captura y atácalos de mayor a menor. Cuando uses constructores visuales, verifica las secciones animadas y los contadores, porque suelen empezar con altura cero y crecer al cargar.
Lista de comprobación final:
- Define dimensiones en todas las imágenes insertadas manualmente.
- Reserva espacio para anuncios y vídeos incrustados.
- Revisa el comportamiento del aviso de cookies en móvil.
Resumen
En resumen
- Cómo corregirlos: Define ancho y alto en todas las imágenes; WordPress lo hace al insertar desde la biblioteca, pero no en HTML personalizado.; Reserva un espacio fijo para anuncios, mapas y vídeos antes de…
- Cómo encontrar el elemento que salta: En las herramientas de desarrollo de Chrome, el panel Rendimiento marca los cambios de diseño y señala los elementos implicados.
- Qué no conviene hacer: No ocultes el problema retrasando todo el contenido; eso puede empeorar otras métricas.
Preguntas frecuentes
Lo que suelen preguntar sobre CLS en WordPress
¿Los saltos afectan a las conversiones?
Pueden provocar clics erróneos y frustración, sobre todo en móvil, aunque no hay una cifra universal.
¿Debo preocuparme por un salto mínimo?
Prioriza los saltos grandes y los que afectan a botones o formularios.
¿Los iframes de mapas o vídeos causan saltos?
Sí, si no reservas su altura de antemano. Define el tamaño del contenedor para evitar el cambio.