El CLS depende mucho de los cambios de diseño de elementos inesperados. Tengo una web que pasaba el test en escritorio sin problemas y de un día para otro ya no supera el test. Yo creo que eso es cosa de los anuncios automáticos de adsense... quizás lo que hay que hacer es evitar los anuncios arriba de todo en el header.
Ya ha pasado tiempo de éste post por eso tenemos más información, alguien que corrobore o aporte nuevos datos?
Gracias
Todos los anuncios de adsense crean CLS, el CLS se crea si un elemento se hace más alto cuando está cargando la web... Esto ocurre en los banners de adsense. Hay que ponerle una altura fija y esto se complica en adsense por multitud de problemas q da... No puedes poner cualquier altura, si google detecta q es una altura inadecuada quitará el CSS de altura mínima con el js de google adsense y estarás en las mismas.
Yo hice muchas pruebas hasta que di con la tecla.
Los anuncios deben estar dentro de un div, si usas el plugin
Ad Inserter para poner anuncios ya le añade un div contenedor, solo tienes q aplicarle un poco más de css a ese div.
Lo mismo ocurre con los anuncios automáticos, automáticamente adsense le añade un div contenedor con el class google-auto-placed.
Así que solo tienes que ver cuál es el class del div contenedor del plugin q uses en tu web y aplicarle CSS:
Insertar CODE, HTML o PHP:
.code-block,.google-auto-placed{display:block;aspect-ratio: 16 / 9;margin:1.5rem 0 2rem 0;}
@media (min-width: 480px){.code-block,.google-auto-placed{margin:1.5rem auto 2rem auto}}
@media (min-width: 520px){
.code-block,.google-auto-placed{aspect-ratio:auto;min-height:280px;}
}
Esto reducirá el CLS, no te lo dejará a 0, pero por muy poco... Ya que siempre puede aparecer un anuncio de mas altura q la mínima, pero esta solución funciona para pasar sin problemas las core web vitals de google pagespeed.
¿La desventaja de hacer esto? pues que, a veces adsense no carga el anuncio y añade un espacio en blanco, entonces al tener todo altura minima, el espacio en blanco será más alto y puede que veas espacios en blanco por tu web... Esto ocurriría igual sin este CSS, pero no se vería tan llamativo porque no tendría la altura tan alta.
Pero desde luego si tu objetivo es superar el test de core web vitals con adsense en tu web, incluyendo los automáticos no hay otra.
Misma web/url, aquí con los cambios de CSS que he comentado:
Aquí antes de los cambios:
Esto en mobile, en pc lo pasa sin problemas con todos los puntos mejor. Ya que es adsense el que hace que tenga los datos malos... Si no fuese por adsense estaría todo en verde sin problemas.
Y sí, tienes razón con los banners de arriba del todo hay más posibilidades de CLS. Ya que, una vez el javascript de adsense añade el banner, le pone la altura requerida automáticamente... Pero si lo hace con los banners del principio, como tiene q esperar a que cargue el banner para poner la altura ya ha creado el CLS.
Pero yo no quería quitar los banners q más dan, que son siempre los de arriba y con CSS se puede reducir lo suficiente como para pasar el test.
