Saltar al contenido

Cómo Solucionar Cumulative Layout Shift y Optimizar tu Puntuación

How to Fix Cumulative Layout Shift and Optimize your Score

¿Estás cansado de visitar sitios web donde el contenido salta repentinamente o los botones aparecen de la nada mientras navegas? Esto podría estar sucediendo fácilmente en tu tienda de comercio electrónico. Los cambios en el diseño son un verdadero dolor de cabeza para los clientes que interactúan con tu sitio, afectando negativamente la experiencia del usuario, el rendimiento del sitio y, en consecuencia, el ranking en Google. El Cumulative Layout Shift (CLS) es una métrica crucial para abordar estos problemas y, en este artículo, te mostraremos cómo optimizar tu puntuación de CLS para mejorar el rendimiento de tu comercio electrónico. ¡Empecemos!

Contenido:

¿Qué es Cumulative Layout Shift (CLS)?

Comencemos desglosando lo que significa Cumulative Layout Shift para tu sitio de comercio electrónico. CLS es una de las métricas de Core Web Vitals de Google que mide la estabilidad del diseño de tu página web. En otras palabras, es una métrica que determina cuán predecible es una página para que tus usuarios naveguen. 

Todas las partes visibles de una página y cómo encajan entre sí conforman lo que un navegador considera como un diseño: imágenes, texto, videos, etc. Cuando el contenido en tu sitio de comercio electrónico cambia inesperadamente debido a la carga de widgets o al redimensionamiento de imágenes, otros elementos previamente cargados que ya son visibles en la página pueden necesitar ser reposicionados para que todo encaje. Cada vez que esto sucede, se considera un cambio en el diseño. CLS cuantifica en qué medida el contenido visible experimenta estos cambios. Una puntuación de CLS alta indica un diseño caótico e impredecible que puede frustrar a tus visitantes.

Core Web Vitals - Cumulative Layout Shift (CLS) en ecommerce

¿Cuál es una Buena Puntuación de CLS?

Primero, echemos un vistazo breve a cómo se calcula la puntuación de CLS. Utilizaremos un ejemplo sencillo de una página de artículo de blog, visualizada en un dispositivo móvil.

Cómo se calcula la puntuación de Cumulative Layout Shift (CLS)

En este ejemplo, hay una imagen destacada, títulos, texto y otras imágenes más pequeñas. En una conexión lenta, el texto y las imágenes más pequeñas se cargan de inmediato, pero la imagen destacada puede tardar más en descargarse y mostrarse al usuario si el sitio no está suficientemente optimizado. 

Como resultado, todo lo que está debajo debe desplazarse hacia abajo en la mitad de la porción visible de la página, solo para dejar espacio para que la imagen destacada aparezca donde se pretendía, en la parte superior de la página. Esto nos dará una puntuación de CLS de 0.5, es decir, el 50%. En pocas palabras, la puntuación de CLS de tu página web de comercio electrónico es básicamente cuánto cambian en términos porcentuales las partes visuales de una página.

En un mundo ideal, una puntuación de Cumulative Layout Shift sería cero, lo que significaría un diseño perfectamente estable. Sin embargo, lograr esto es raro, ya que un sitio de comercio electrónico es un entorno dinámico con muchas partes en movimiento. Entonces, ¿a qué debes apuntar? Un objetivo excelente es asegurarte de que el 75% o más de las vistas de tu página tengan una puntuación de CLS de 0.1 o menos. Lograrlo significa que la gran mayoría de tus clientes (independientemente de si tienen conexiones lentas o rápidas) disfrutarán de un diseño estable y predecible, reduciendo las posibilidades de frustración en la experiencia de navegación.

Cómo Medir y Monitorizar tu Puntuación de CLS

Ahora que hemos definido qué es Cumulative Layout Shift, ¿cómo puedes averiguar tu puntuación? 

Al igual que todas las métricas de Aspectos Web Fundamentales, CLS es lo que los usuarios reales experimentan al utilizar tu sitio. Esta información se llama "datos de campo". Por lo tanto, solo puedes confiar en mediciones que provienen de usuarios del mundo real, ya sea a través de: 

  • Tus propias analíticas
  • La sección de informe de Core Web Vitals en Google Search Console
  • Google PageSpeed Insights 
  • Otras herramientas de terceros

Además, puedes utilizar herramientas como Google Lighthouse para estimar tu puntuación de CLS. Ten en cuenta que Lighthouse se considera "datos de laboratorio", lo que significa que los datos se recopilan en un entorno controlado y utilizan especificaciones de dispositivos y redes predefinidas. Para obtener datos de campo precisos y actualizados, deberás confiar en mediciones de usuarios reales.

Sin embargo, monitorizar, rastrear y comparar tu puntuación de CLS y otros Aspectos Web Fundamentales a lo largo del tiempo también son factores importantes a considerar, especialmente cuando necesitas evaluar qué esfuerzos de optimización funcionan y cuáles no. 

Valido Web Score aborda todos los desafíos mencionados anteriormente. Está integrado con Google PageSpeed Insights, proporcionando mediciones del mundo real fiables. La aplicación Web Score también te permite realizar pruebas tanto ad hoc como programadas según tus necesidades de monitorización, probar otras métricas de Aspectos Web Fundamentales y las puntuaciones de Lighthouse. Valido Web Score es una herramienta de prueba todo en uno para el comercio electrónico, que ofrece recomendaciones prácticas sobre cómo optimizar el rendimiento general de tu sitio web.

Comienza a monitorizar tu punctuación de CLS gratis.

Puedes analizar y rastrear rápidamente el rendimiento de tu ecommerce ingresando la URL a continuación.

Cómo Solucionar Problemas Comunes de Cumulative Layout Shift

Ahora, vamos a sumergirnos en los pasos prácticos para abordar los problemas de CLS que podrían estar afectando a tu tienda online.

Imágenes

Un culpable común detrás de los cambios en el diseño son las imágenes sin dimensiones explícitas (ya sea inline o con su propio CSS). Afortunadamente, hay un par de formas de solucionar esto. 

Una forma de abordar este problema es establecer explícitamente atributos de alto y ancho para las imágenes en todo tu sitio web. Este método común en el desarrollo de HTML ha existido durante décadas y solía ser práctica común. Sin embargo, con el diseño receptivo y las pantallas de alta definición, establecer valores de atributos no siempre es útil en comparación con el uso de CSS o permitir que el navegador lo descubra por sí mismo.

Hoy en día, los sitios web modernos suelen utilizar el tamaño automático basado en la relación de aspecto. Esto indica a los navegadores que reserven automáticamente la altura correcta según la relación de aspecto del ancho y la altura que proporcionamos. Por lo tanto, esta es posiblemente la mejor y más moderna forma de evitar que las imágenes provoquen CLS, utilizando valores receptivos para mantener las relaciones de aspecto.

Iframes / Embeds 

En el contexto de un sitio de comercio electrónico, cualquier cosa que carguemos desde otro dominio o servicio (un widget para un reproductor de video, un espacio publicitario, etc.) probablemente se cargue dentro de un iframe o una embed. Si no se gestionan adecuadamente, los iframes y los embeds pueden afectar tu diseño. 

No podemos controlar lo que sucede dentro de un iframe o una incrustación, pero sí podemos controlar lo que sucede a su alrededor. Al igual que con nuestras imágenes, necesitamos reservar el espacio que ocuparán estos elementos.

Especificar dimensiones para los elementos principales para reservar espacio para estos elementos hace que el navegador del usuario reserve espacio automáticamente para ellos, evitando cualquier tipo de cambio en el diseño.

Nota:

Establecer explícitamente "overflow: hidden" puede ayudar a evitar desbordamientos inesperados. Esto puede ocurrir si el servicio de terceros no proporciona el tamaño correcto para su espacio. Sin embargo, esta solución no siempre es práctica, especialmente en momentos en los que necesitas garantizar que cada píxel del contenido (como un anuncio) sea visible.

Contenido Dinámico 

Evitar cambios en el diseño con contenido cargado dinámicamente puede ser un desafío. Si tu sitio tiene una lista de productos de desplazamiento infinito en una página de categoría, o si simplemente estás cargando contenido de forma perezosa, debes asegurarte de reservar espacio para el contenido cargado dinámicamente especificando dimensiones para los contenedores.

Así que ya sea que recortemos el contenido inesperado o simplemente sobreestimemos el tamaño para asegurarnos de que se muestre todo, casi siempre hay una forma de evitar cambios en el diseño con contenido cargado dinámicamente. Idealmente, debes implementar el diseño de tu página web de manera que sea lo suficientemente flexible como para adaptarse a contenido más grande o más pequeño de lo esperado.

Fuentes Web

Como habrás notado en nuestras recomendaciones anteriores, tener dimensiones predefinidas y flexibles en los elementos de nuestra página es clave para una sólida puntuación de CLS. Sin embargo, las fuentes web plantean un desafío único para el CLS. Si una fuente web o una fuente de iconos provoca un cambio en el diseño, debemos abordarlo desde otro ángulo.

La solución más sencilla para la mayoría de los casos es no usar la fuente. En el caso de las fuentes de iconos, es mucho mejor utilizar directamente SVG. No solo obtendrás una capacidad de diseño mucho mejor, sino que habrá muchos menos problemas a los que las fuentes de iconos son propensas en los navegadores web modernos. También es considerablemente mejor para la accesiblidad

Si el cambio en el layout se debe a una fuente web que definitivamente necesitas utilizar para tu sitio web, entonces debes optimizar cómo se carga la fuente. Un buen lugar para comenzar es pre-cargar las fuentes esenciales. El atributo "link rel preload" en HTML es una especie de indicación que podemos dar al navegador para que comience a descargar la fuente antes de que se descubra de la forma normal.  

Por último, si la fuente web es más un "extra", otra opción sería utilizar "font display: optional" para evitar cambios en el diseño. Font display es una propiedad que podemos establecer en una declaración de fuente que admite algunos valores diferentes. En este caso, el valor "optional" le dice al navegador que la fuente es, bueno, opcional. Esto significa básicamente que si la fuente web tarda más de tres segundos en cargarse, el navegador simplemente dejará de intentar cargarla. Y se mostrará lo que ya se está representando, evitando así cambios en el contenido.

Conclusión

Como ya hemos visto, el Cumulative Layout Shift puede tener un impacto significativo en la experiencia del usuario en tu sitio de comercio electrónico, pero existen varias formas de monitorear esta métrica y mejorarla para tu tienda en línea. Ya sea que seas un administrador de una tienda de comercio electrónico, desarrollador o especialista en marketing digital, abordar el CLS es crucial para mantener una experiencia de compra en línea fluida y confiable para tus clientes. 

Con Valido Web Score y su integración con PageSpeed Insights, puedes monitorear sin esfuerzo tu puntuación de CLS y otras métricas de Aspectos Web Fundamentales en tiempo real. Ya sea que se trate de ejecutar pruebas programadas, comparar resultados o generar ideas prácticas para optimizar otros aspectos del rendimiento de tu sitio web, tenemos todo cubierto. Una buena puntuación de CLS garantiza que tus clientes no enfrenten cambios inesperados en el diseño, lo que conduce a una mayor satisfacción del cliente y un mejor rendimiento de ventas.

Lleva el rendimiento de tu ecommerce al siguiente nivel con Valido AI.

Monitoriza y optimiza métricas críticas con la solución líder de automatización de pruebas ecommerce, impulsada por la IA.