Cumulative Layout Shift (CLS): Optimiza la estabilidad visual de tu web para mejorar tu SEO

¿Te ha pasado alguna vez? Entras en una web, empiezas a leer el contenido, pero de repente todo se mueve. Vuelves a ajustar la vista, intentas continuar, y otra vez, ¡todo se desplaza!

Es una experiencia frustrante, sobre todo si intentas hacer clic en un enlace y, justo en ese momento, clicas en otra parte porque los elementos cambian de lugar.

Este fenómeno se conoce como “inestabilidad de diseño”, y ocurre cuando elementos como imágenes o bloques de anuncios tardan en cargarse.

Aquí es donde entra en juego el Cumulative Layout Shift (CLS).

¿Qué es el Cumulative Layout Shift (CLS) y cómo funciona?

En mayo de 2020, Google lanzó la métrica Cumulative Layout Shift (CLS) como parte de los Core Web Vitals para medir esta “inestabilidad de diseño”.

Así, Google puede puntuar la estabilidad visual de los sitios web, clasificando mejor aquellos que ofrecen una experiencia de usuario óptima.

Esto convierte al CLS en un factor más para el SEO.

En la última versión de Lighthouse, las métricas de rendimiento de un sitio se ponderan de la siguiente forma:

• Total Blocking Time (TBT): 30%
• Largest Contentful Paint (LCP): 25%. Mide cuánto tarda en aparecer el elemento visual más grande, como una imagen o un contenedor CSS.
• Cumulative Layout Shift (CLS): 15%
• First Contentful Paint (FCP): 10%. Indica el momento en que aparece el primer contenido visible en pantalla.
• Speed Index (SI): 10%
• Time to Interactive (TTI): 10%

✍ Te puede interesar→ ¿Cómo medir y mejorar la velocidad de carga de un sitio web?

¿Cómo se calcula el Cumulative Layout Shift?

El puntaje de CLS se basa en dos factores:

1. Fracción de impacto: mide el espacio que ocupa un elemento antes y después de moverse.
2. Fracción de distancia: evalúa cuánto se desplaza el elemento en relación con la ventana de visualización.

CLS = fracción de impacto * fracción de distancia

¿Por qué el CLS es importante para el SEO y el usuario?

Como ya sabes, un buen CLS contribuye directamente a una navegación estable y buena experiencia de usuarios.

Google premia los sitios con buena estabilidad visual, dándoles una mejor posición en los resultados de búsqueda. Además, mejora la retención de usuarios, ya que una página sin desplazamientos inesperados es más fácil de usar y reduce el porcentaje de rebote.

Tener un bajo puntaje Cumulative Layout Shift aporta ventajas como:

• Mejorar la usabilidad y navegabilidad, evitando interrupciones en la interacción del usuario.
• Reducir el rebote al ofrecer una experiencia visual más estable.
• Incrementar la puntuación en los Core Web Vitals, lo que favorece el ranking en Google.

Principales causas del Cumulative Layout Shift

Varios factores provocan cambios de diseño inesperados. Algunas de las causas más comunes son:

• Carga tardía de imágenes. Las imágenes sin dimensiones definidas causan desplazamientos al cargar.
• Anuncios no optimizados. Los anuncios que aparecen de repente o cambian de tamaño desestabilizan el contenido.
• Fuentes personalizadas. Las fuentes pueden tardar en cargarse, causando cambios en el tamaño del texto.
• Elementos dinámicos sin espacio reservado. Como banners o pop-ups que aparecen sin ocupar un espacio predefinido.

Cómo medir y evaluar el CLS de tu sitio web

Antes de mejorar el Cumulative Layout Shift, es esencial medirlo. Algunas herramientas recomendadas son:

• Google PageSpeed Insights. Analiza la puntuación CLS junto a otras métricas de Core Web Vitals.
• Ofrece un análisis detallado de la estabilidad visual y sugiere mejoras específicas.
• Chrome DevTools. Te permite visualizar los elementos que generan cambios de diseño en tiempo real.

Google clasifica el CLS en tres niveles:

• Buena experiencia de usuario: < 0.1
• Experiencia de usuario mejorable: entre 0.1 y 0.25
• Experiencia de usuario negativa: > 0.25

Cualquier valor superior a 0.25 es perjudicial para el SEO de tu web y debería optimizarse.

Cómo optimizar el CLS en WordPress

WordPress es el CMS más utilizado del mundo para crear páginas web, por lo que cobra sentido que dediquemos un apartado en centrarnos en cómo optimizar el Cumulative Layout Shift (CLS) en esta plataforma.

Veremos varias acciones que se pueden implementar, ya que son varios los elementos que pueden provocar inestabilidad de diseño en una web creada en WordPress.

Optimización para imágenes

• Uno de los errores más comunes es no definir el ancho (width) y alto (height) de las imágenes. Esto provoca que el navegador no reserve espacio suficiente al cargar, lo que genera posteriormente desplazamientos en el diseño, afectando al CLS.
• Evita valores cómo width=”auto” o height=”auto”, ya que tampoco asignan dimensiones fijas.
• Si has añadido imágenes manualmente, introduce las dimensiones directamente en el código HTML.
• Utiliza formatos ligeros como WebP
• Reduce el peso al máximo posible
• Gestiona su carga según la ubicación en la página. Por ejemplo, puedes aplazar la carga de recursos que no estén visibles al inicio (lazy loading) o acelerar la de aquellos que impacten directamente en el diseño inicial.

Optimización para los vídeos

Al igual que con las imágenes, definir las dimensiones de los videos forma parte de las buenas prácticas.

• Usa un formato compatible y optimizado, como MP4 (H.264).
• Si tienes videos que no son visibles de inmediato, te recomiendo aplazar su carga. Esto se conoce como carga diferida (lazy loading), y existen plugins para WordPress como WP Rocket o Perfmatters que realizan esta función.
• Para vídeos incrustados desde YouTube o Vimeo, puedes utilizar también la anterior técnica.
• Los vídeos que se reproducen automáticamente (autoplay) también afectan al CLS, además de al usuario.

Mejora la carga de fuentes

Las fuentes externas suelen ser una causa frecuente de desplazamientos en el diseño. Para evitarlo:

• Utiliza fuentes locales siempre que sea posible.
• Aplica font-display: swap; para que se muestre una fuente temporal mientras la personalizada se carga.
• Considera usar técnicas como precarga (preload) para acelerar la disponibilidad de las fuentes.

Bloques de anuncios con dimensiones específicas

Los bloques de anuncios, especialmente los automáticos de plataformas como AdSense, pueden alterar el diseño al cargarse.

Por ello, utiliza bloques con tamaños específicos y reserva el espacio adecuado en tu diseño. Así evitarás que estos elementos provoquen movimientos inesperados.

Cuida el uso de animaciones

Las animaciones que alteran el tamaño de los contenedores son una de las principales causas de desplazamientos.

Limita estas animaciones o, mejor aún, utiliza transiciones que no modifiquen el diseño, como las basadas en la propiedad CSS transform. Así podrás mantener el dinamismo sin afectar al CLS.

Beneficios de mejorar el Cumulative Layout Shift en tu sitio web

Optimizar el CLS no solo mejora la experiencia de usuario, sino que también:

• Optimiza el SEO: Google prioriza sitios con buena estabilidad visual, lo que ayuda a mejorar la posición en los resultados de búsqueda.
• Aumenta la retención de usuarios: un sitio con buen CLS mantiene a los usuarios más tiempo, ofreciendo una navegación fluida y menos frustrante.
• Mejora la reputación de la marca: la estabilidad visual refleja la calidad de tu sitio, proyectando una imagen profesional y confiable.

Conclusión del Cumulative Layout Shift

Hagamos un pequeño repaso de lo aprendido en este post sobre qué es el Cumulative Layout Shift.

El CLS es una métrica fundamental de los Core Web Vitals que impacta en la estabilidad visual y la experiencia de usuario de tu sitio web. Mantener una puntuación baja de CLS es clave para mejorar tanto el SEO como la usabilidad de tu página.

Al aplicar buenas prácticas, como definir dimensiones en elementos visuales y optimizar la carga de anuncios, lograrás un sitio estable y fácil de navegar.

Google sigue priorizando la experiencia de usuario como un factor de posicionamiento, por lo que optimizar el CLS es esencial para mantenerte competitivo.

Estas mejoras no solo forman parte de los factores sobre cómo posicionarse en Google, sino también en la satisfacción y lealtad de tus visitantes. Con una atención continua a la estabilidad visual, asegurarás que tu sitio sea funcional, agradable y profesional para cada usuario.

Si necesitas optimizar el rendimiento de tu web y no estás seguro de cómo hacerlo, podemos asesorarte y ayudarte. Contáctanos sin compromiso y háblanos sobre tu proyecto, conseguiremos juntos alcanzar los resultados que deseas.