¿Qué es CLS en WordPress?

CLS es un indicador que mide cuánto cambia de posición el contenido de una página de WordPress de forma inesperada.

CLS (Cumulative Layout Shift) es uno de los tres Core Web Vitals de Google.

Mide la estabilidad visual de una página mientras una persona la utiliza.

Por ejemplo, si una imagen aparece y empuja el texto hacia abajo, o un banner mueve un botón que ya estaba visible, el valor de CLS puede aumentar.

Un CLS bajo indica que los elementos permanecen estables y no cambian de posición de forma inesperada.

¿Cuál es el valor ideal de CLS?

Google considera que una página tiene un buen CLS cuando el valor es de 0,1 o menos.

Los valores de referencia son:

• Bueno: 0,1 o menos
• Necesita mejoras: más de 0,1 y hasta 0,25
• Deficiente: más de 0,25

A diferencia de otras métricas de rendimiento, CLS no se mide en segundos. Su valor representa cuánto se desplaza inesperadamente el contenido de la página.

¿Qué puede causar un CLS alto en WordPress?

El CLS puede aumentar cuando elementos que ya están visibles cambian de posición de forma inesperada.

Algunas causas frecuentes son:

Imágenes o videos sin espacio reservado

Si el navegador no conoce el espacio que ocupará una imagen o un video, otros elementos pueden aparecer primero en ese lugar.

Cuando la imagen o el video termina de cargar, puede desplazar el contenido y aumentar el CLS.

Banners, anuncios y otros elementos dinámicos

Un banner, anuncio, aviso u otro elemento que aparece después puede mover contenido que ya estaba visible.

Esto ocurre especialmente cuando no se ha reservado espacio para mostrarlo.

Fuentes que cambian el texto

Mientras una fuente termina de cargar, el navegador puede mostrar temporalmente otra.

Si las dos fuentes ocupan espacios diferentes, el texto puede cambiar de tamaño o posición cuando aparece la fuente definitiva.

Contenido añadido después de la carga

Algunos plugins pueden añadir formularios, avisos, barras u otros elementos después de que parte de la página ya está visible.

Si estos elementos desplazan el contenido existente, pueden aumentar el CLS.

¿Cómo mejorar el CLS en WordPress?

La solución depende de qué elemento está provocando el cambio de posición.

Algunas acciones que pueden ayudar son:

• Definir las dimensiones de imágenes y videos
• Reservar espacio para banners, anuncios y otros elementos que aparecen después
• Evitar añadir contenido por encima de elementos que ya están visibles
• Revisar cómo cargan las fuentes
• Comprobar si temas o plugins están desplazando contenido de forma inesperada.

Antes de realizar cambios, es importante identificar qué elementos están provocando los desplazamientos. Una página puede tener varios movimientos, pero no todos afectan de la misma forma al CLS.

CLS y rendimiento de WordPress

CLS no mide cuánto tarda en cargar una página. Mide si el contenido permanece estable mientras una persona la utiliza.

Por eso, una página puede cargar rápidamente y tener un CLS alto si imágenes, banners, fuentes u otros elementos cambian de posición después de aparecer.

CLS permite evaluar una parte específica de la experiencia de uso y debe analizarse junto con otras métricas de rendimiento.

Consulta nuestra guía sobre Rendimiento de WordPress para conocer otros factores que pueden influir en la experiencia y velocidad del sitio.

Términos relacionados

• Core Web Vitals
• Optimización de imágenes
• Imágenes responsive
• Lazy loading

Preguntas frecuentes sobre CLS en WordPress

¿CLS mide la velocidad de carga de WordPress?

No. CLS mide los cambios inesperados de posición del contenido. Una página puede cargar rápidamente y tener un CLS alto si sus elementos se mueven después de aparecer.

¿Una imagen puede causar un CLS alto?

Sí. Una imagen puede provocar un cambio de posición si el navegador no tiene reservado el espacio que ocupará antes de que termine de cargar.

¿Un plugin puede afectar el CLS?

Sí. Un plugin puede añadir banners, formularios, avisos u otros elementos que desplazan contenido que ya estaba visible.

¿El CLS puede ser diferente en móvil y escritorio?

Sí. El diseño y la posición de los elementos pueden cambiar según el tamaño de la pantalla, por lo que una página puede presentar desplazamientos en móvil que no ocurren en escritorio.