22 Jul 2023 Las métricas de Google son indicadores cuantitativos que permiten analizar y evaluar el rendimiento de una página web o una campaña publicitaria. Las métricas ofrecen información detallada sobre el comportamiento de los usuarios. Una de estas métricas es, precisamente, nuestra protagonista de hoy: el Cumulative Layout Shift (CLS).
Con las métricas de Google, lo que se consigue es ayudar a los administradores de una página web a tomar decisiones para mejorar la experiencia de usuario. También son válidas para optimizar mejor el contenido de un sitio y para maximizar el retorno de la inversión en una campaña publicitaria.
¿Qué es el Cumulative Layout Shift?
El Cumulative Layout Shift (CLS) es una métrica que usamos para medir la estabilidad visual de una página web. Básicamente, nos indica cuánto se mueven de forma inesperada los elementos visuales durante la carga de un sitio. Un alto CLS sugiere que la página es inestable, lo que puede dificultar su lectura.
Con el CLS hablamos de una métrica muy importante de Core Web Vitals, establecida por Google en 2020. La idea de esta métrica es evaluar la experiencia del usuario en la web y garantizar que el sitio es estable y fácil de usar.
¿Cómo se calcula el CLS?
Para calcular el Cumulative Layout Shift (CLS), debemos tener en cuenta dos componentes fundamentales: la fracción de impacto y la fracción de distancia. A la hora de determinar el CLS, debemos multiplicar la fracción de impacto por la fracción de distancia. El CLS total de la página es la suma de todos los resultados. Lo ideal es que el sitio web tenga un CLS cercano a cero para asegurar una experiencia de usuario más estable.
Veamos a continuación con más detalle en qué consiste cada una de estas fracciones.
Fracción de impacto
La fracción de impacto alude al espacio que una interfaz inestable ocupa en la pantalla del dispositivo una vez se ha producido el desplazamiento inesperado. Se calcula tomando el área combinada que un elemento afectado ocupa en la pantalla entre dos fotogramas renderizados (antes y después del cambio). Todo ello se divide por el área total de la pantalla.
Fracción de distancia
La fracción de distancia, por su parte, se refiere a la máxima distancia que un elemento inestable se ha movido en la pantalla, ya sea de forma vertical u horizontal. Esta distancia se normaliza dividiéndola por la dimensión más grande de la pantalla (ancho o alto).
¿Cómo optimizar el CLS?
Los siguientes pasos te ayudarán a optimizar el Cumulative Layout Shift (CLS) de tu página web:
- Define siempre las dimensiones de las imágenes y medios para evitar reajustes inesperados.
- Utiliza font-display: optional o carga las fuentes localmente para prevenir cambios de texto.
- Comprueba que todos los elementos añadidos dinámicamente tienen su espacio reservado o se insertan fuera del flujo actual.
- Evita animaciones que cambien elemento de forma abrupta.
¿Por qué el CLS es importante para el SEO?
Lo primero que debes tener en cuenta es que un alto Cumulative Layout Shift (CLS) provoca que los elementos cambien de posición y lleve a los usuarios a hacer clics no deseados. Esto es algo que Google detecta y lo penaliza, retirando a tu página de los primeros lugares de los buscadores.
Un CLS bajo mejora el ranking SEO, mientras que uno de alto valor se penaliza a efectos de posicionamiento web. Por tanto, procura siempre optimizar esta métrica para garantizar una mejor experiencia de navegación a los usuarios.
En Pululart te ayudamos a estabilizar el Cumulative Layout Shift de tu página. Todo ello con el objetivo de que tu web sea estable y ofrezca todas las facilidades para ser visitada sin problemas.
