Solucionar problemas de CLS y Adsense

 
  • PT
  • RU
  • CN
  • DE
  • FR
  • EN
  • Tener contento del todo a Google es imposible. Yo lo di por perdido hace mucho tiempo, aunque hay asuntos que conviene solucionar, como el CLS (Cumulative Layout Shift).

    Cumulative Layout Shift

    Cumulative Layout Shift es el cambio acumulativo del diseño. Esta métrica es importante porque analiza la estabilidad visual y la frecuencia con la que los visitantes experimentan cambios de diseño inesperados.

    Resumiendo mucho, lo que mide es cualquier desplazamiento de los elementos de la parte superior de la página durante la carga.

    Conseguir un CLS bajo ayuda a garantizar que la página sea agradable y de paso impedir molestos movimientos que pueden derivar en que el lector pierda de vista y/o posición algún elemento importante de la navegación.

    Solucionar problemas de Adsense y CLS

    Se entiende como buena experiencia de usuario si el CLS no supera 0.1, hasta 0.25 necesita mejorar y a partir de ahí se considera mala puntuación. Esto, como supongo ya sabes, puedes medirlo por varias vías. La más usada es PageSpeed Insights.

    Como se apunta en la documentación de los Core Web Vitals, un mal CLS puede estar provocado por distintos elementos como una imagen o un video con dimensiones desconocidas, una fuente que se muestra más grande o más pequeña que su alternativa, o un anuncio o widget de terceros o un efecto de animación que cambia de tamaño de forma dinámica.

    Paradójicamente, algunos de los elementos que suelen cepillarse el CLS son los anuncios de Google Adsense. Sobre todo si se usa la opción de anuncios automáticos (poco recomendable). Hay casos en los que incluso arruinan completamente la velocidad de carga.

    Cómo detectar desplazamientos

    Aquí está el meollo de la cuestión. ¿Qué tenemos que buscar exactamente y cómo lo encontramos? Pues cualquier cosa que cambie de tamaño y/o se desplace durante la carga.

    Ya metidos en harina para intentar arreglar el asunto con Adsense, podemos echarle un vistazo al resto de elementos que pueden estar engordando el CLS. Hay distintas formas de hacerlo, ahí van algunas.

    Mirando

    El método más rústico es la simple observación, a ojo. Si el desplazamiento es notable lo verás enseguida, pero hay movimientos menos perceptibles que precisan una inspección más fina.

    En Search Console

    En GSC, en «Métricas web principales», puedes obtener la lista de URLs con problemas de CLS y LCP que te servirá para echarles un vistazo más a fondo una a una.

    Solucionar problemas de CLS y Adsense

    Cumulative Layout Shift Debugger

    Cumulative Layout Shift Debugger, es una web donde metes la url que quieres analizar y crea un GIF animado que muestra todos los cambios de diseño de la versión móvil y escritorio.

    Esta herramienta, hecha por un ingeniero de Chrome es de las más útiles para encontrar problemas de CLS.

    Solucionar problemas de CLS y Adsense

    Si la mayor parte del texto de la página aparece resaltada, lo más probable es que tus fuentes estén causando los cambios de diseño.

    Layout Shift GIF Generator

    Layout Shift GIF Generator es otra web que hace lo mismo, genera un gif con los desplazamientos para la versión móvil y escritorio. Puedes probarla para comparar resultados. Siempre hay ligeras diferencias en las mediciones de cada herramienta y puede que en una encuentres lo que otra no es capaz de mostrar o no detecta en un momento determinado.

    CLS Visualizer

    Esta herramienta, siendo de las más simples, es con la que he conseguido cazar mejor los desplazamientos.

    CLS Visualizer es una extensión muy útil, que como su nombre indica, te ayudará a visualizar la métrica Cumulative Layout Shift de la página al mostrarte exactamente qué elementos están cambiando y cómo lo están haciendo. Ten en cuenta que esta también es una herramienta de laboratorio que proporciona los datos según tu dispositivo, navegador, resolución de pantalla o tipo de conexión.

    Solucionar problemas de CLS y Adsense
    Ese icono del demonio tenía un desplazamiento de ubicación del bloque que lo contenía que era imperceptible en la navegación.

    Al activar la extensión te mostrará las mediciones de CLS en una lista y al pinchar sobre cada una aparecerá en rojo la animación del elemento que la provoca.

    Gracias a esta extensión he conseguido cero CLS en muchas páginas. Aunque pueden ser tantas cosas sueltas las que lo provoquen que la he dejado instalada para repasar url´s sin prisa.

    Solucionar problemas de CLS y Adsense

    Cambiar la velocidad de carga del sitio con Chrome Dev Tools

    Chrome Dev Tools ofrece posibilidades interesantes, una de las más útiles para meterle mano a esto del CLS es la opción de reducir el ancho de banda a la que se carga la página poder visualizar claramente cuándo ocurre el cambio de diseño y qué elementos están contribuyendo a ello.

    Para esto abre Chrome Dev Tools en el navegador con botón derecho/inspeccionar sobre tu web y en Red busca ese icono de Wifi que aparece en la imagen y junto a él encontrarás un desplegable en el que podrás añadir una velocidad personalizada.

    Solucionar problemas de CLS y Adsense

    Crea un nuevo perfil y añade 100 Kb o menos para probarlo a «cámara lenta».

    Solucionar problemas de CLS y Adsense

    Ahora, navegando a una velocidad de cuando internet iba a pedales te resultará bastante más fácil identificar que puede ser lo que está dando problemas durante de carga.

    Renderizado

    En Layout Shift Regions en Chrome Dev Tools también puedes ver los cambios de diseño resaltados en azul mientras navegas por tu página en tiempo real.

    Estos son los pasos para activar las regiones de cambio de diseño:
    En la consola busca «Rendering» o «renderizado» si lo tienes en español.

    Activa la casilla de verificación Regiones de cambio de diseño y cualquier otra que quieras probar.
    Ahora, al navegar por la página página, los cambios de diseño aparecerán resaltados en azul.

    Solucionar problemas de CLS y Adsense

    Con una extensión para el navegador

    En Chrome puedes instalar la extensión CLS Checker – Journey Further y realizar pruebas a todas aquellas URL, s que estén pochas de puntuación. Además, la extensión da pistas a modo de etiquetas rojas y te muestra la lista de los elementos y el CLS que consumen. Al pulsar sobre «Toogle» resalta el elemento en cuestión. En mi caso, como ya estaba arreglado el asunto del anuncio de Adsense aparece sólo uno.

    Solucionar problemas de CLS y Adsense

    Webpagetest

    Otra página de medición en la que puedes hacer una prueba en webpagetest.org y puedes ver los vídeos y gifs animados que genera.

    Solucionar problemas de CLS y Adsense

    Pausando el vídeo puedes encontrar más fácilmente pequeños desplazamientos.

    Si te fijas bien, tanto los elementos del menú como el título y los textos se desplazan un poco a la derecha por lo que parece ser un cambio de tamaño y/o ubicación de la fuente, pero el espacio del anuncio sobre el título ya aparece reservado, por lo que no desplaza el contenido hacia abajo. Se solucionó bajando un poco de tamaño el H1 y apañando la envoltura de los textos que acompaña.

    Solucionar problemas de CLS y Adsense

    Pero esa es otra vaina, ahora vamos a ocuparnos del comportamiento de los anuncios.

    Soluciones para reservar los espacios de los bloques de anuncios

    Rebuscando la mejor y más rápida solución encontré que lo suyo era añadir un valor de altura mínima a una envoltura (div) alrededor de cada uno de los bloques de anuncios para reservar ese espacio y evitar así el desplazamiento después de la carga.

    Sin embargo, parece que no basta con utilizar una clase para apuntar a esta propiedad CSS, sino que además hay utilizar un ID para la envoltura. Parece que, por alguna razón desconocida, el Javascript de Google AdSense elimina las directivas de altura mínima de cualquier objeto principal. Sin embargo, no se eliminan si se utiliza un ID para la orientación del CSS.

    Esto se explica aquí resumido y algo más detallado en la documentación de Google. Como esta solución me parecía un tostón, ya que tenía que revisar todos los bloques no dejé de rebuscar una alternativa hasta que di con lo que me funcionó, que fue Ad Inserter. Estos fueron los pasos.

    Cambio de anuncios adaptables a tamaño fijo

    Solucionar problemas de CLS y Adsense

    Lo primero fue dejar de usar bloques de anuncios adaptables. Cambié todos los bloques a tamaños fijos.

    Sobre esta decisión debes estudiar y valorar tu caso concreto.

    Aunque Google asegura que los adaptables generan más ingresos (obvio por la posibilidad de poder mostrar distintos tamaños), esto es bastante elástico y puede variar según distintos escenarios. Si optas por los tamaños más populares siempre estarás mostrando anuncios.

    Desactivar optimización de tamaños

    Solucionar problemas de CLS y Adsense

    Aunque se supone que ya los bloques tienen un tamaño fijo, lo suyo es desactivar la opción que permite a Google decidir por su cuenta el tamaño de los anuncios para móviles. Esta opción se encuentra en la administración de Adsense en Anuncios/Configuración global.

    Así evitamos sorpresas por si nos hemos dejado por ahí perdido algún anuncio que pusimos a mano. De todos modos, que sean de tamaño fijo no quiere decir que dejen de ser responsive.

    Reservar espacios para los anuncios con Ad Inserter

    Ad Inserter es, creo, el mejor plugin para la gestión de anuncios, al que incluso se le puede dar otros usos para añadir otros contenidos.

    Para reservar el espacio de cada anuncio basta acudir a «Mostrar» y definir el ancho y la altura de cada bloque.

    Solucionar problemas de CLS y Adsense

    Si usas su versión PRO, también puedes marcar la carga diferida (Lazy Load), que también suele contribuir a aliviar algo más el CLS.

    Algunas consideraciones

    Reservar el espacio para Adsense tiene sus inconvenientes, allí donde no se puedan mostrar anuncios porque no se sirvan de ese tamaño o no haya anunciantes para tu sitio en algún momento, puedes obtener un espacio en blanco del tamaño del espacio reservado.

    En Ad Inserter, solo para las inserciones del lado del servidor, se puede definir la altura directamente con el código CSS personalizado .

    Hay que tener en cuenta que la altura del anuncio está definida por el código del anuncio . El código para anuncios adaptables puede establecer la altura del anuncio según el espacio disponible. 

    Algunas redes publicitarias (como AdSense) también pueden publicar anuncios más pequeños que el espacio disponible. La altura del bloque, tal como se define en Ad Inserter, es la altura del bloque insertado, es decir, del div que lo envuelve. Este es el espacio reservado para el anuncio . Al reservarlo puede pasar lo siguiente:

    1. Si la altura del anuncio es la misma que la altura del espacio reservado (altura del bloque), no habrá cambio de diseño y no afectará al CLS.
    2. Si la altura del anuncio es mayor que la altura del espacio reservado (altura del bloque), es posible que el diseño se desplace hacia abajo para acomodar el anuncio y afecte al CLS.
    3. Si la altura del anuncio es menor que la altura del espacio reservado (altura del bloque), obtendrá un espacio en blanco debajo del anuncio, pero el diseño no cambiará y no afectará al CLS.

    Algunos códigos de anuncios, como el código de anuncios adaptables de AdSense, pueden anular la altura de los contenedores principales. En este caso, la altura del bloque se sobrescribirá y no se aplicará. 

    Resumiendo, en el caso de que sea urgente solucionar problemas de CLS minimizando cambios de diseño, la opción más rápida es usar tamaños de anuncios fijos siempre que sea posible.

    Solucionar problemas de CLS y Adsense

    Y ya que te pones, puedes asegurarte de que no te falten las dimensiones en las imágenes, esto también se puede arreglar de distintas formas. Algunas rápidas y fáciles pasan por usar Perfmatters o WP Rocket (ambos de pago).

    Solucionar problemas de CLS y Adsense

    O el plugin Litespeed Cache si alojas tu blog en un servidor Litespeed.

    Solucionar problemas de CLS y Adsense

    Si todo ha ido bien, en unas horas verás bajar el CLS en los informes de campo y en unos días en los de laboratorio de PageSpeed Insights.


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

    Repositorio de documentales sobre dibujantes de cómic y humor gráfico.

    Tontolares. Los titulares más gilipollas de la prensa. Envía los tuyos

    ¿Algo que decir?