Cómo Optimizar el CLS en las Core Web Vitals

Esta pequeña guía pretende ayudarte a optimizar y mejorar la métrica Cumulative Layout Shift, conocida como CLS de las Core Web Vitals.

Esta métrica forma parte de las Core Web Vitals lanzadas por Google y que pretende medir la experiencia de los usuarios al visitar una web.

En concreto, los Cambios de Diseño Acumulados, CLS en sus siglas en Inglés, se encarga de medir los cambios inesperados de diseño de una web.

Siendo uno de estos cambios más habituales los desplazamientos del texto hacia abajo que se produce cuando aparece una imagen o un bloque de Adsense.

Situación que en muchos casos provoca clics o pulsaciones no deseados por parte del usuario y que Google considera que no favorece la experiencia del usuario.

La solución para mejorar la métrica de CLS en una web pasa por evitar que se produzca ese desplazamiento utilizando un simple truco de css.

✅ Evita los Cambios de Diseño Acumulados en una Web
✅ Mejora las métricas Core Web Vitals de tu página web
✅ Optimizar el CLS de una web con un simple truco

¿Qué son los Cambios de Diseño Acumulados en una Web?

Una de las métricas que Google utiliza para saber si la experiencia de usuario al visitar una web ha sido satisfactoria es el CLS.

El Cumulative Layout Shift (Cambio de Diseño Acumulado) hace referencia a los cambios inesperados del diseño de una web durante su vida útil.

Es decir, los cambios o desplazamientos de elementos de una web desde que el usuario la abre en su navegador hasta que termina de cargar toda la información.

Un sencillo ejemplo para saber lo que se considera CLS lo tienes en las páginas webs que utilizan fotografías o bloques de anuncios en la mitad superior de la web.

Estos elementos son los últimos en cargar cuando se accede a una página web por lo que desplazan el contenido de la web hacia abajo cuando aparecen.

Eso es el Cumulative Layout Shift, los cambios de diseños acumulativos que hacen que partes de la web se desplacen o cambien mientras se navega por ella.

¿Cómo se mide el CLS?

Page Speed Insight mide el desplazamiento de los primeros elementos de una web que se pueden visualizar a medida que aparecen el resto de elementos.

La herramienta de Google otorga una puntuación según estos desplazamientos producidos y que califican la experiencia del usuario como mala, mejorable o buena.

Una puntuación de CLS por debajo de 0.1 se considera como buena, mientras que una puntuación superior a 0.25 se considera mala.

Entre medias, 0.1 - 0.25, indica que aunque el CLS no es malo, si que se necesita implementar algunas mejoras.

Y la solución para optimizar el CLS de la Core Web Vitals pasa por evitar, en la medida de lo posible, estos cambios de diseños durante la carga de la web.

Optimizar la Métrica CLS en una Web

Google te va a aconsejar no utilizar elementos que provoquen cambios inesperados en el diseño de la web como la mejor solución para mejorar el CLS.

Lógicamente, si no utilizas estos elementos no se producen los cambios inesperados y el CLS mejorará mucho a costa de eliminar elementos de la web.

Pero como en la mayoría de los casos no estamos dispuestos a sacrificar estos elementos para no perder diseño en nuestra web, lo mejor es evitar el desplazamiento.

Mejorar los Cambios de Diseños Acumulativos en Imágenes

Es bastante común en páginas webs optimizadas que las imágenes que acompañan al texto de un artículo sean los últimos elementos en cargar.

Esto se consigue aplicando opciones de Lazyload o carga perezosa que incorporan muchos plugins de caché para WordPress.

Esta opción lo que hace es retrasar la carga de las imágenes en una web hasta que el usuario se desplace hasta la parte del texto donde están incrustadas.

Es una genial herramienta para mejorar la velocidad de carga de una web, pero el lazyload provoca un aumento del CLS de una web al desplazar el texto hacia abajo.

En estos casos, lo ideal es evitar utilizar el lazyload en aquellas imágenes que están en la mitad superior de la web para que se carguen a la misma vez que el resto del texto.

Muchos plugins de caché que disponen de la opción de LazyLoad como WP Rocket disponen de una opción para excluir determinadas imágenes de tu web.

Si no dispones de una opción para excluir la carga perezosa de imágenes en tu web, siempre puedes utilizar este código:

function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( !is_single() & 0 == $wp_query->current_post ) {
$attr['class'] .= ' skip-lazy';
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Tienes que pegar este código en el archivo function.php de tu Theme haciendo siempre una copia de seguridad del archivo antes de editarlo.

Mejorar el CLS en bloques de Adsense

Otro de los motivos por los que las métricas CLS de una web empeoran son los bloques de publicidad de Adsense.

Adsense se carga de forma asicrónica en una web por lo que primero carga el contenido como el texto y por último el bloque de publicidad.

Esto provoca que el contenido se desplace hacia abajo provocando un cambio de diseño acumulativo y empeorando la métrica de CLS.

Este empeoramiento de las Core Web Vitals suele suceder cuando se insertan bloques de adsense en la parte superior de una web que es la primera que ve el usuario.

Para evitar este desplazamiento del texto hacia abajo y que provoque un cambio de diseño acumulativo, lo ideal es reservar el espacio que ocupará el bloque hasta que cargue.

De esta forma, tu web cargará apareciendo un espacio en blanco donde cargará el anuncio sin producirse un desplazamiento del contenido hacia abajo.

Esto lo puedes lograr haciendo uso de código css para reservar el espacio deseado con las medidas deseadas.

1️⃣ Crea un div con una clase css donde colocarás el código Adsense de tu anuncio.

2️⃣ Ahora, en el editor css personalizado de tu theme añade el estilo para el div donde has metido el código Adsense.

Teniendo en cuenta las medidas del contenedor de tu web o del contenedor donde quieres que aparezca el anuncio, deberás añadir un ancho y un alto predeterminado.

3️⃣ Ahora, al cargar tu web, aparecerá un directamente el espacio en blanco donde se mostrará el anuncio de adsense sin que se desplacen elementos.

Así evitas los cambios inesperados de diseño en tu web y mejorarás las métricas correspondiente al CLS de las Core Web Vitals.