Ayuda en optimización "tamaño de artículos"

Hola Betas, tengo un problema y es que estoy tratando de optimizar un poco mi web, pero debido a mis nulos conocimientos en CSS se me hace muy complicado, el problema es que tengo una web con un anuncio de adsense adaptable antes del contenido, al revisar las métricas he visto que tengo problemas con el CLS, he probado dejando un espacio fijo para el anuncio de 820 x 280 "que es el tamaño que normalmente tiene el anuncio" desde el plugin Ad inserter, y esto borra el problema del CLS, pero cuando lo veo en móvil el anuncio sale de ese mismo tamaño "gigante para un móvil", la pregunta es ¿Cómo puedo hacer para que este anuncio se adapte a cada dispositivo sin tener problemas con CLS?

Si alguien me puede ayudar lo agradecería, "por favor que sea una explicación para dummies"

quirogaven dijo:

Hola Betas, tengo un problema y es que estoy tratando de optimizar un poco mi web, pero debido a mis nulos conocimientos en CSS se me hace muy complicado, el problema es que tengo una web con un anuncio de adsense adaptable antes del contenido, al revisar las métricas he visto que tengo problemas con el CLS, he probado dejando un espacio fijo para el anuncio de 820 x 280 "que es el tamaño que normalmente tiene el anuncio" desde el plugin Ad inserter, y esto borra el problema del CLS, pero cuando lo veo en móvil el anuncio sale de ese mismo tamaño "gigante para un móvil", la pregunta es ¿Cómo puedo hacer para que este anuncio se adapte a cada dispositivo sin tener problemas con CLS?

Si alguien me puede ayudar lo agradecería, "por favor que sea una explicación para dummies"

Hacer clic para expandir...

Hola,

Entiendo tu problema y puedo ayudarte con una explicación sencilla. El problema del CLS (Cumulative Layout Shift) ocurre cuando los elementos de la página cambian de posición mientras se carga, lo que puede resultar en una experiencia de usuario frustrante.

Para solucionar esto, puedes utilizar media queries en tu CSS para adaptar el tamaño del anuncio a diferentes dispositivos. Por ejemplo, podrías definir un tamaño distinto para dispositivos móviles usando el siguiente código:


En este ejemplo, .anuncio es el selector que debes reemplazar por el que corresponda a tu anuncio de AdSense en tu código HTML. max-width: 768px establece que este estilo se aplique a dispositivos con un ancho de pantalla de hasta 768 píxeles (tamaño típico de las tablets y dispositivos móviles).

Al definir width: 100% y height: auto, el anuncio se adaptará automáticamente al ancho del contenedor en dispositivos móviles, evitando así que sea demasiado grande.

Es importante mencionar que debes realizar pruebas en diferentes dispositivos para asegurarte de que el anuncio se visualice correctamente en cada uno de ellos.

Espero que esta explicación te haya sido útil. Si tienes alguna otra pregunta, no dudes en hacerla. ¡Buena suerte con la optimización de tu web!