Cuando visitamos un sitio web es muy probable que podamos notar como a medida que va cargando se van mostrando elementos ya sea de contenido o imágenes, el modo en el que se muestran ya sea con una carga rápida o en algunos casos con transiciones o animaciones hacen que la experiencia sea mucho más agradable.
Sin embargo, los tiempos que les toma a estos elementos en ser mostrados puede ser medido por medio de una metrica llamada “desplazamiento de diseño acumulativo” o por sus siglas en inglés (CLS) Cumulative Layout Shift.
En el siguiente artículo vamos a describir que es Cumulative Layout Shift y que consideraciones debemos tener presente al momento de cómo cargan los elementos de nuestro sitio web.
Tabla de contenidos
¿Qué es el Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) es una métrica utilizada para evaluar la estabilidad visual de un sitio web durante su carga. Se centra en medir el desplazamiento inesperado de los elementos que pueda tener la página mientras el usuario la está visitando.
Cuando un usuario visualiza un sitio web, es posible que la página aún esté cargando. Es durante este proceso que los elementos de la página, tales como, imágenes, anuncios o bloques de texto, pueden cargar de manera asincrónica, lo que puede causar cambios inesperados en el diseño y la disposición de los elementos en la página. Estos cambios abruptos pueden ser molestos para los usuarios, especialmente si hacen que los elementos a los que intentaban interactuar se muevan repentinamente.
El Cumulative Layout Shift se mide como la suma de todas las fracciones de cambio en el desplazamiento de los elementos en relación con la ventana gráfica. En términos más simples, mide el área de desplazamiento y la cantidad de cambio en el diseño en cada cuadro de tiempo. Una puntuación de CLS baja indica una experiencia de usuario más estable, mientras que una puntuación alta significa que los elementos de la página se están moviendo mucho y causando interrupciones en la experiencia del usuario.
Por otra parte, el Cumulative Layout Shift es uno de los Core Web Vitals, un conjunto de métricas web identificadas por Google como indicadores clave para la experiencia del usuario. Los Core Web Vitals se centran en tres aspectos fundamentales: la velocidad de carga, la estabilidad visual y la capacidad de respuesta interactiva de una página web.
Para proporcionar una mejor experiencia de usuario, si somos quienes hemos creado el sitio web, tenemos el deber de evitar acciones que provoquen cambios en el diseño de la página durante la carga, como cargar imágenes sin dimensiones especificadas o insertar anuncios sin reservar un espacio adecuado.
Al optimizar la carga de los elementos y asegurar que se reserve un espacio adecuado, es factible reducir el Cumulative Layout Shift y mejorar la estabilidad visual de la página web.
¿Cómo medir el Cumulative Layout Shift (CLS)?
El Cumulative Layout Shift se puede medir por medio de varias herramientas, tanto el navegador web desde las herramientas de desarrollador como plataformas de análisis web que brindan métricas específicas sobre el rendimiento de una página web.
La métrica del CLS se expresa como un número decimal, donde un valor bajo indica una experiencia de usuario más estable y un valor alto indica una experiencia de usuario más inestable. Un CLS menor a 0.1 se considera bueno, mientras que un CLS mayor a 0.25 se considera pobre.
A continuación, vamos a describir como podemos hacerlo:
Desde la mayoria de los navegadores populares de la actualidad podremos utilizar las herramientas de desarrollador que están incluidas en ellos para poder medir la puntuación de Cumulative Layout Shift de una página web en concreto.
En el siguiente ejemplo utilizaremos como navegador base Google Chrome, sin embargo, las opciones y vistas pese a que puedan variar los pasos deberían ser similares en otros navegadores.
Con la página web a analizar a la vista vamos a abrir las herramientas de desarrollador, ya sea desde las opciones de la ventana (Más herramientas -> Herramientas del desarrollador), atajos del teclado (Ctrl + Mayús + I) o simplemente desde clic derecho, opción “Inspeccionar”
Una vez con las herramientas de desarrollador abiertas nos vamos a dirigir a la pestaña de “Performance”, en ella vamos a activar la casilla de “Web Vitals” y luego actualizamos desde el icono correspondiente.
Luego del proceso de carga podremos analizar los resultados, en el apartado de timing vamos a ver los distintos estados por los que pasa la carga de la web los cuales corresponden a los mencionados Core Vitals, puede darse el caso peculiar de que no tengamos alertas notables relacionadas con Cumulative Layout Shift como es el caso al analizar el sitio de Webempresa.
Sin embargo, en cualquier otro sitio que si experimente alguna alerta va a ser representado en los resultados de rendimiento de la siguiente manera.
En el apartado de “Experience” podremos ver las alertas de forma visible como también estarán representadas como las letras “LS” identificando el “Layout Shift”.
Debemos tener presente que las alertas de Cumulative Layout Shift pueden ser más de una que estén presentes en la página web a analizar, ya que son múltiples los elementos que pueden estar mostrándose y cambiando su posición en el diseño base.
Cada alerta corresponde a un elemento que representa un cambio en el diseño y podemos verlos y evaluarlos por separado.
Medir Cumulative Layout Shift por medio de PageSpeed
Desde el sitio web de Pagespeed vamos a ingresar la URL del sitio web que deseamos analizar.
(Visita el sitio web haciendo clic en la imagen ↑)
Una vez ya tengamos los resultados del análisis, vamos a la pestaña “Escritorio” y luego vamos a expandir la vista de los resultados para tener más detalles del Cumulative Layout Shift.
¿Cómo optimizar el Cumulative Layout Shift (CLS)?
Para optimizar el Cumulative Layout Shift y mejorar la estabilidad visual de nuestra página web durante su carga de ser necesario tras realizar los análisis ya mostrados, a continuación presentamos algunas estrategias y prácticas recomendadas:
Atributos de dimensiones en elementos visuales: vamos a asegurarnos de incluir atributos de dimensiones (width y height) en todas las imágenes y elementos visuales. Esto reserva un espacio adecuado para los elementos antes de que se carguen y evita cambios repentinos en el diseño cuando se cargan los recursos.
<img src="prueba.jpg" width="600" height="600" alt="Imagen de Prueba"gt;
También por medio de estilos CSS podemos ayudar al navegador a predecir las posibles relaciones de aspecto y dimensiones que pueda tener una imagen mientra esta cargando el sitio web.
img {
aspect-ratio:attr(width)/attr(height);
}
Si los elementos no son imágenes y estamos hablando de banners o elementos incrustados como iframes el principio es el mismo, solo basta definir las propiedades de min-height y min-width por medio de estilos CSS, por ejemplo.
<div id="ad-banner" style="min-width: 600px; min-height: 300px;"></div>
Por otro lado si el elemento tiene una clase que podamos manipular pues en ese caso es posible usarla para aplicar estilos CSS concretos segun la resolucion de pantalla.
@media screen and (max-width: 768px) {
#ad-banner {
min-height: 400px;
}
}
Evita inserciones dinámicas de contenido: es necesario evitar agregar contenido o anuncios de manera dinámica en la página después de que se haya cargado inicialmente. Si es requerido agregar contenido adicional, debemos reservar un espacio en blanco para él antes de que se cargue y así evitar que el contenido se desplace hacia abajo y cause cambios en el diseño.
Carga de fuentes correctamente: cuando usemos fuentes personalizadas en nuestro sitio web, debemos asegurarnos de incluir la declaración CSS de font-display. Esto permite que se muestre texto con una fuente de respaldo mientras la fuente personalizada se carga, evitando cambios en el diseño debido a la carga tardía de las fuentes.
Un ejemplo de ello por medio de estilos CSS sería lo siguiente:
@font-face {
font-display: fallback;
}
Para conocer un poco los valores de la propiedad font-display vamos a enlistarlos de forma concreta a continuación:
- auto: ss el valor predeterminado si no se especifica ninguno. Permite que el navegador elija la estrategia de visualización de la fuente según su configuración predeterminada.
- fallback: muestra una fuente de respaldo inmediatamente y reemplaza la fuente web a medida que se carga. Esto evita el desplazamiento del diseño causado por la carga tardía de la fuente web. Sin embargo, puede dar como resultado un cambio visual cuando la fuente se reemplaza.
- block: bloquea el renderizado del texto hasta que se cargue la fuente web. Esto evita cualquier cambio visual en el texto, pero puede causar un retraso en la visualización del contenido de la página.
- swap: muestra una fuente de respaldo de inmediato y reemplaza la fuente web cuando está disponible. Esta opción evita el desplazamiento del diseño y asegura que el texto sea legible, incluso si no es exactamente la fuente deseada.
- optional: es similar a auto, pero indica que la fuente web se considera opcional y no es crucial para la legibilidad o el diseño de la página. El navegador puede optar por no cargar la fuente web si se considera que su carga afecta negativamente el rendimiento.
Evita redimensionamientos de elementos: debemos evitar el redimensionar elementos después de que se haya cargado inicialmente la página. Si es necesario redimensionar elementos, al igual que con los elementos de inserción dinámica, se requiere reservar el espacio necesario para la dimensión final antes de cargar la página.
Cuidado con los anuncios y elementos incrustados: si empleamos anuncios o elementos incrustados en la página, también debemos dar por hecho de reservar el espacio requerido antes de que se carguen. Esto evita que los elementos adyacentes se muevan cuando se cargan los anuncios o elementos incrustados.
Carga asíncrona de recursos: emplea de ser posible la carga asíncrona para invocar recursos como scripts y estilos. Esto permite que el contenido principal se cargue primero sin bloquear el renderizado, evitando cambios en el diseño durante la carga de recursos secundarios.
Pruebas y seguimiento: el uso de herramientas de análisis web y pruebas de rendimiento como las que hemos revisado anteriormente son necesarias para monitorear el CLS de nuestra página. Realizar pruebas en diferentes dispositivos y conexiones para estar seguros de que la experiencia del usuario sea estable en diferentes situaciones.
Conclusion
Hemos podido apreciar que el Cumulative Layout Shift (CLS) es una métrica crucial en la optimización de la experiencia del usuario y el rendimiento de una página web. Un CLS alto puede causar cambios inesperados en el diseño de la página, lo que da como resultado una experiencia frustrante para los usuarios y una mayor probabilidad de abandono del sitio.
Optimizar el CLS es importante para ofrecer una experiencia de usuario fluida, retener a los visitantes, mejorar la clasificación en los motores de búsqueda, además de garantizar un rendimiento web sólido en términos de velocidad y satisfacción del usuario.
Al seguir las prácticas sugeridas en este artículo, podemos sin duda minimizar el Cumulative Layout Shift y proporcionar a los usuarios una experiencia más fluida y visualmente estable al navegar por nuestro sitio web.
También te puede interesar:
- ¿Por qué WordPress es lento?
- Eliminar los recursos que bloquean el renderizado en WordPress
- Añadir animaciones de contenido en WordPress (con y sin plugins)
- Metricool en WordPress, mide tu estrategia de contenidos
- Solucionar la carga lenta en tu sitio web a causa de wc-ajax=get_refreshed_fragments de WooCommerce
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
