El CLS en WordPress
El CLS en WordPress es una de las métricas de Core Web Vitals que más se pasa por alto, pero que tiene un impacto directo en la experiencia del usuario. CLS son las siglas de Cumulative Layout Shift, y mide los saltos visuales inesperados que se producen mientras se carga una página.
Te ha pasado alguna vez: estás leyendo una página, vas a hacer clic en un enlace y de repente todo salta hacia abajo porque ha aparecido una imagen o un banner que no estaba. Eso es CLS. Un buen valor es inferior a 0,1.
El Cumulative Layout Shift (CLS) es una métrica de los Core Web Vitals de Google que mide la estabilidad visual de una página web durante su carga. Google considera aceptable un valor de CLS por debajo de 0,1; cualquier cifra superior provoca movimientos inesperados en el contenido que empeoran la experiencia del usuario y perjudican tu posicionamiento web.
Cómo medir el CLS en WordPress
Antes de corregir el CLS en WordPress, hay que identificar dónde se produce. Estas herramientas te ayudan:
| Herramienta | Tipo de datos | Para qué sirve |
|---|---|---|
| PageSpeed Insights | Laboratorio | Muestra el valor de CLS y los elementos que lo generan |
| Google Search Console | Campo (usuarios reales) | Muestra las URLs con CLS problemático |
| Chrome DevTools (Performance) | Laboratorio | Graba la carga y muestra el momento exacto del salto y su causa |
Las causas más frecuentes del CLS en WordPress
Las causas más frecuentes del CLS en WordPress son las imágenes sin dimensiones definidas, los anuncios, banners e iframes sin tamaño reservado, las fuentes web que cambian el tamaño del texto al cargar y los elementos que aparecen dinámicamente, como banners de cookies o popups.
| Causa | Por qué ocurre |
|---|---|
| Imágenes sin dimensiones definidas | El navegador no reserva espacio mientras la imagen descarga y empuja el contenido al cargar |
| Anuncios, banners e iframes sin tamaño reservado | Aparecen después del contenido inicial y desplazan todo lo que hay debajo |
| Fuentes web que cambian el tamaño del texto | El cambio de la fuente del sistema a la fuente web (FOUT) desplaza el texto |
| Elementos que aparecen dinámicamente | Banners de cookies, notificaciones o popups que se superponen mal al contenido |
Imágenes sin dimensiones definidas
Es la causa más común. Si una imagen no tiene los atributos width y height definidos en el HTML, el navegador no sabe cuánto espacio reservar mientras la descarga. Cuando finalmente carga, empuja todo el contenido de abajo hacia abajo.
WordPress añade automáticamente las dimensiones a las imágenes subidas a la biblioteca de medios desde la versión 5.5, pero imágenes añadidas manualmente en el HTML o a través de constructores de páginas pueden no tenerlas.
Anuncios, banners e iframes sin tamaño reservado
Los anuncios que cargan de forma asíncrona son una fuente clásica de CLS. Aparecen después del contenido y empujan todo lo que hay debajo. Lo mismo ocurre con iframes de YouTube, mapas o formularios de terceros si no tienen un tamaño mínimo reservado.
Fuentes web que cambian el tamaño del texto
Cuando una página carga primero con una fuente del sistema y después sustituye por la fuente web, puede producirse un cambio en el tamaño o el espaciado del texto que desplaza el contenido. Es lo que se conoce como FOUT (Flash of Unstyled Text).
Elementos que aparecen dinámicamente
Banners de cookies, barras de notificaciones, popups o cualquier elemento que aparezca sobre el contenido después de la carga inicial genera CLS si no está bien implementado.
Cómo corregir el CLS en WordPress
Para corregir el CLS en WordPress, define siempre width y height en todas las imágenes, reserva un tamaño mínimo para anuncios e iframes, usa font-display: swap o aloja las fuentes en tu servidor, y configura los banners de cookies en posición fija sin desplazar el contenido.
Añadir dimensiones a todas las imágenes
Para corregir el CLS en WordPress, comprueba que todas las imágenes de tu web tienen width y height definidos. En el editor de bloques de WordPress puedes verlo en la barra lateral derecha al seleccionar una imagen. Si usas un constructor de páginas, busca la opción de dimensiones en cada bloque de imagen.
Para imágenes responsivas, puedes definir las dimensiones en el HTML y usar CSS para que escalen correctamente con max-width: 100% y height: auto. Si quieres reducir también el peso de esas imágenes, consulta nuestra guía para reducir el peso de las imágenes en WordPress sin plugins.
Reservar espacio para anuncios e iframes
Define siempre un tamaño mínimo para los contenedores de anuncios e iframes mediante CSS, aunque el contenido aún no haya cargado. Así el navegador reserva el espacio y no hay salto cuando aparece.
Optimizar la carga de fuentes
Usa font-display: swap en tus fuentes web para que el navegador muestre primero la fuente del sistema y luego haga la sustitución de forma menos brusca. También puedes usar fuentes del sistema directamente si el diseño lo permite, eliminando el problema por completo.
Si usas Google Fonts, considera alojarlas en tu propio servidor con el plugin OMGF (Optimize My Google Fonts), que también mejora la privacidad al no hacer peticiones a servidores de Google.
Banners de cookies y notificaciones
Configura el banner de cookies para que aparezca en una posición fija (bottom o top fixed) sin desplazar el contenido. Evita banners que empujen el contenido hacia abajo al aparecer. La mayoría de plugins de cookies modernos tienen esta opción.
CLS, LCP y el resto de Core Web Vitals
El CLS en WordPress es una pieza dentro de los Core Web Vitals. Para una visión completa de cómo mejorar todas las métricas, consulta nuestra guía sobre WordPress y Core Web Vitals, y si el problema principal es la velocidad de carga, revisa los pasos concretos para mejorar el LCP en WordPress.
El CLS en WordPress es una pieza del puzzle. Si quieres una visión completa de cómo mejorar todas las métricas de Core Web Vitals en tu WordPress, empieza por el artículo sobre WordPress y Core Web Vitals, y si tu problema principal es la velocidad de carga, en el artículo sobre cómo mejorar el LCP en WordPress tienes los pasos concretos. Si en general tu web va lenta, también te interesará nuestra guía sobre web WordPress lenta.
¿Tienes más dudas? Consulta todas nuestras preguntas frecuentes.
Preguntas frecuentes sobre el CLS en WordPress
¿Qué es un buen valor de CLS en WordPress?
Un valor de CLS inferior a 0,1 se considera bueno según los criterios de Core Web Vitals de Google. Valores superiores indican saltos visuales que afectan a la experiencia del usuario.
¿WordPress corrige el CLS automáticamente?
En parte. Desde la versión 5.5, WordPress añade automáticamente las dimensiones a las imágenes subidas a la biblioteca de medios, pero las imágenes insertadas manualmente o mediante constructores de páginas pueden seguir sin tenerlas.
¿Los banners de cookies afectan al CLS en WordPress?
Sí, si aparecen empujando el contenido hacia abajo. Configurarlos en posición fija (fixed) sobre el contenido evita ese desplazamiento y reduce el CLS.
¿El CLS afecta al posicionamiento SEO?
Sí. El CLS es una de las tres métricas de Core Web Vitals que Google utiliza dentro de su algoritmo de experiencia de página, por lo que un valor alto puede perjudicar el posicionamiento.
