En el mundo digital actual, la publicidad en línea es una parte fundamental de la Web gratuita que todos disfrutamos. Sin embargo, los anuncios mal implementados pueden provocar una experiencia de navegación más lenta, frustrar a los usuarios y disminuir la participación. Aprende a cargar anuncios de forma eficaz sin afectar la velocidad de tu página, garantizar una experiencia del usuario fluida y maximizar las oportunidades de ingresos para los propietarios de sitios web.
Los sitios web dependen en gran medida de la publicidad en línea como fuente principal de ingresos. Sin embargo, en ocasiones, la presencia de anuncios en los sitios web puede perjudicar la experiencia del usuario y el rendimiento general de la página. Por lo tanto, es fundamental lograr un equilibrio entre la monetización y el rendimiento para los propietarios de sitios web y los anunciantes, y la experiencia del usuario.
Considera un sitio web que ubica anuncios de manera amplia en su contenido con el objetivo de generar altos ingresos. Sin embargo, la gran cantidad de anuncios frustra a los usuarios, lo que genera una experiencia del usuario deficiente y altos porcentajes de rebote. A pesar del potencial de obtener ingresos significativos a partir de los anuncios, el abandono obstaculiza significativamente el éxito del sitio web.
En el otro extremo del espectro, considere un sitio web sin anuncios. Este entorno sin anuncios atrae a una cantidad significativa de usuarios debido a su tiempo de carga rápido y su experiencia de navegación fluida. Sin embargo, sin una estrategia de monetización implementada, el sitio web tiene dificultades para generar ingresos, lo que puede dificultar su sustentabilidad y crecimiento a largo plazo.
Ambas situaciones ilustran la importancia de equilibrar la monetización, los usuarios y el rendimiento.
Aprovecha las Métricas web esenciales
Aprobar las Métricas web esenciales es fundamental para cargar anuncios sin afectar negativamente la velocidad de la página. Las Métricas web esenciales, que comprenden métricas como el Largest Contentful Paint (LCP), el Cambio de diseño acumulado (CLS) y la Interaction to Next Paint (INP), son métricas de la experiencia del usuario que miden la calidad de esta experiencia en tu sitio web.
Procesamiento de imagen con contenido más grande (LCP)
Es fundamental enfocarse en la optimización del LCP, ya que esta métrica mide el tiempo que tarda el elemento con contenido más grande en volverse visible en el viewport. Al minimizar el tiempo de carga del contenido del anuncio y priorizar las técnicas de carga asíncrona, los propietarios de sitios web pueden reducir el LCP y disminuir el tiempo de renderización de los elementos con contenido más importantes en una página.
Interacción con el siguiente procesamiento de imagen (INP)
En segundo lugar, mejorar el INP es fundamental para las experiencias del usuario responsivas. INP mide la latencia de cada clic, toque y interacción del teclado que se produce durante la vida de una página. El valor resultante generalmente es la interacción que tardó más en completarse y representa la capacidad general de una página para responder rápidamente a las interacciones del usuario.
Los anuncios que retrasan las interacciones de los usuarios tienen un impacto negativo en INP. Esto puede frustrar a los usuarios, ya que pueden crear experiencias que sean lentas o, incluso, que no funcionen por completo en casos extremos. La implementación de la carga diferida de anuncios y el aplazamiento de la ejecución no crítica de JavaScript puede ayudar a reducir el INP de una página y, por lo tanto, mejorar la capacidad de respuesta general de la página.
Cambio de diseño acumulado (CLS)
Por último, CLS mide la estabilidad visual de una página midiendo la cantidad de cambios de diseño inesperados que ocurren durante la carga de la página. Los anuncios que se cargan o cambian de tamaño de forma dinámica pueden generar inestabilidad en el diseño, lo que genera una mala experiencia del usuario en la que se pierde el registro de dónde se encuentran en una página o incluso presionan involuntariamente elementos incorrectos debido a cambios inesperados en el diseño. Para mitigar este problema, los propietarios de sitios web deben optimizar el CLS para asegurarse de que los anuncios tengan espacio reservado para evitar cambios de diseño, y optimizar los tamaños de los anuncios para evitar los reprocesamientos repentinos del contenido.
Estructurar la página web en bloques de contenido diferentes
Estructurar tu página web con bloques de contenido para texto, imágenes y contenido de anuncios y, al mismo tiempo, usar la propiedad content-visibility:
de CSS puede mejorar significativamente el tiempo de renderización general en los navegadores modernos.
Si aplicas estratégicamente la propiedad content-visibility:
en estos bloques de contenido, se optimizará el proceso de renderización del texto, las imágenes y el contenido del anuncio. De esta manera, se garantiza que solo el contenido que se muestra actualmente en el viewport se renderice por completo, lo que da como resultado una carga inicial más rápida de la página y mejores interacciones del usuario. Esta mejora del rendimiento es especialmente valiosa cuando se trata de páginas extensas o con muchos anuncios.
Prioriza los espacios publicitarios importantes
No todos los espacios publicitarios son iguales. Por ejemplo, los espacios publicitarios en la mitad superior de la página suelen ser más valiosos que los que están en la mitad inferior en términos de visibilidad y monetización. Esto se debe a que es más probable que los usuarios vean los anuncios en la mitad superior de la página, ya que son visibles sin desplazarse en el primer viewport. Los anuncios en la mitad inferior de la página se vuelven visibles una vez que el usuario se desplaza hacia abajo en la página lo suficiente como para verlos.
Anuncios en la mitad superior de la página
![Representación visual del concepto de anuncio de "mitad superior de la página".](https://web.dev/static/articles/loading-ads-page-speed/image/fig-3.png?authuser=5&hl=es)
Los espacios publicitarios de la mitad superior de la página hacen referencia a la parte de una página web que se puede ver sin necesidad de desplazarse y que tiene un valor significativo en la publicidad digital. Estas ubicaciones de primer nivel se consideran valiosas por varios motivos:
- Los anuncios que se colocan en la mitad superior de la página son visibles inmediatamente para los usuarios cuando se carga una página web. Es más probable que los usuarios vean estos anuncios e interactúen con ellos, lo que genera tasas de clics más altas.
- Los anunciantes suelen considerar la parte superior de una página web como el inmueble más valioso. Es la primera impresión que reciben los usuarios cuando visitan un sitio, lo que lo convierte en un área fundamental para mostrar anuncios de alto impacto y premium.
- Los anuncios en la mitad superior de la página tienen los mayores porcentajes de visibilidad porque se encuentran en la línea de visión directa del usuario. Esto garantiza que la mayoría de los usuarios que visitan la página vean estos anuncios sin tener que desplazarse hacia abajo.
Sin embargo, es importante lograr un equilibrio entre la monetización y la experiencia del usuario cuando se utilizan espacios publicitarios en la mitad superior de la página en la vista inicial. Estas son algunas consideraciones clave.
- Los espacios publicitarios de la primera pantalla deben cargarse lo más rápido posible en el viewport inicial del usuario. Los anuncios que se cargan lentamente pueden afectar negativamente la experiencia del usuario y aumentar los porcentajes de rebote. Optimizar los tiempos de carga de los anuncios es crucial para mantener una experiencia fluida de navegación y del usuario.
- Si bien las posiciones de anuncios en la mitad superior de la página son valiosas, es importante no sobrecargar este espacio principal con demasiados anuncios. El exceso de anuncios desordena la página, dificulta la legibilidad del contenido y perjudica la experiencia del usuario. Busca un equilibrio entre la monetización y el mantenimiento de un diseño limpio y fácil de usar.
- Asegúrese de que los espacios publicitarios de la mitad superior de la página sean compatibles con diferentes tamaños de pantalla y dispositivos. Las prácticas de diseño responsivo pueden ayudar a mantener un diseño coherente y visualmente atractivo, independientemente del tamaño de la pantalla del usuario.
Anuncios en la mitad inferior de la página
![Representación visual del concepto de anuncio de la "mitad inferior de la página".](https://web.dev/static/articles/loading-ads-page-speed/image/fig-4.png?authuser=5&hl=es)
Los espacios publicitarios en la mitad inferior de la página, es decir, los anuncios que se colocan en la parte de una página web que solo se puede ver después de que el usuario se desplaza hacia abajo, también tienen un valor considerable en el mundo de la publicidad digital. Estas ubicaciones ofrecen ventajas únicas que complementan las ubicaciones en la mitad superior de la página.
Los anuncios ubicados en la mitad inferior de la página se benefician de los usuarios que se desplazan hacia abajo para explorar más contenido. Estas posiciones captan la atención de los usuarios comprometidos que buscan activamente información adicional, lo que los vuelve valiosos para las marcas que buscan transmitir mensajes o narraciones más complejos.
- Los espacios publicitarios que no son visibles inicialmente pueden alinearse con el contenido junto a ellos, lo que brinda una oportunidad para la relevancia contextual. Esta alineación puede generar una mayor participación de los usuarios, ya que estos descubren anuncios relacionados con el contenido que exploran.
- Cuando se diseñan cuidadosamente, los anuncios de la mitad inferior de la página pueden integrarse perfectamente con el contenido que los rodea, con lo cual resultan menos perturbadores para los usuarios. Esta integración, también conocida como publicidad nativa, puede generar una experiencia del usuario más armoniosa.
- Las posiciones de anuncios que requieren desplazamientos ofrecen una mayor flexibilidad en el diseño creativo y los formatos, con amplio espacio y libertad para experimentar. Los anuncios de video, los elementos interactivos y las imágenes más grandes pueden cargarse de forma diferida para captar la atención de los usuarios sin interrumpir su experiencia.
Sin embargo, se deben tener en cuenta las siguientes consideraciones para la colocación de anuncios en la mitad inferior de la página:
- Si bien las colocaciones de anuncios en la mitad inferior de la página pueden ser eficaces, es fundamental asegurarse de alentar a los usuarios a desplazarse hacia abajo. La implementación de indicadores visuales o avances de contenido puede motivar a los usuarios a seguir explorando, lo que aumenta la probabilidad de visibilidad del anuncio.
- La ubicación de los anuncios en la mitad inferior de la página no debe comprometer la calidad ni la legibilidad del contenido. Mantener un equilibrio entre los anuncios y el contenido para no abrumar a los usuarios y garantizar una experiencia del usuario positiva
- A diferencia de las colocaciones de anuncios en la mitad superior de la página, es posible que los anuncios en la mitad inferior de la página no necesiten cargarse de inmediato. Retrasar la carga de estos anuncios hasta que estén a punto de ingresar al viewport del usuario puede ayudar a mejorar la velocidad general de carga de la página y reducir los tiempos de renderización inicial de la página.
Cuando se usan estratégicamente, los anuncios de la mitad inferior de la página pueden complementar los anuncios en la mitad superior de la página y proporcionar una plataforma para formatos de anuncios creativos y relevancia contextual. Sin embargo, optimizar la visibilidad, equilibrar el contenido y administrar el tiempo de carga de los anuncios son consideraciones clave para garantizar una experiencia del usuario positiva.
Prácticas recomendadas actuales de Google Publisher Tag (GPT):
- Prácticas recomendadas generales
- Prácticas recomendadas para los anuncios
- Cómo minimizar el cambio de diseño
- Cómo supervisar el rendimiento
- Cómo evitar errores de implementación comunes
Anuncios de carga diferida cuando corresponda
![Es una visualización de los recursos de carga diferida en comparación con los recursos que no son de carga diferida. Cuando los recursos son de carga diferida, se ahorra el ancho de banda durante la carga de la página, y los recursos se aplazan hasta el punto en que es más probable que el usuario los vea.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-5.png?authuser=5&hl=es)
La carga diferida es una técnica que aplaza la carga de recursos no críticos hasta que sean necesarios. Aplicar la carga diferida para los anuncios que no son visibles de inmediato (es decir, los anuncios en la mitad inferior de la página) garantiza que solo se carguen cuando aparecen, lo cual permite conservar el ancho de banda y mejorar la velocidad general de la página. Los navegadores ahora incluyen carga diferida nativa para iframes con un atributo loading=lazy
simple.
Al implementar la carga diferida, los anuncios se recuperan de forma dinámica cuando están a punto de ingresar al viewport del usuario, lo que reduce el tiempo de carga inicial y el tiempo de bloqueo total (TBT) (que está muy correlacionado con el INP) en el subproceso principal de esa parte crucial del ciclo de vida de la página, lo que minimiza el impacto negativo en la experiencia del usuario.
Actualizar los anuncios sin actualizar la página
![Una visualización de anuncios que se actualizan en la página, sin que se actualice la página de nivel superior.](https://web.dev/static/articles/loading-ads-page-speed/image/fig-6.gif?authuser=5&hl=es)
Una técnica adicional que puede equilibrar el rendimiento de la página con la carga de anuncios es la capacidad de actualizar los anuncios cada 30 a 240 segundos1 sin tener que volver a cargar toda la página. Este enfoque permite actualizaciones dinámicas del contenido del anuncio sin interrumpir la experiencia de navegación del usuario ni generar demoras innecesarias.
En las aplicaciones para dispositivos móviles, actualizar los anuncios en las vistas web existentes ofrece un mejor rendimiento en comparación con volver a cargar la página completa o recrear WebViews, ya que minimiza la sobrecarga de datos y recursos, lo que genera actualizaciones de contenido más rápidas y una experiencia del usuario más fluida sin la latencia asociada con empezar desde cero.
Al actualizar los anuncios de forma asíncrona, los propietarios de sitios web pueden mantener intacto el contenido de la página mientras actualizan el contenido de los anuncios de manera óptima in situ y en tiempo real. Esto no solo mejora la velocidad de la página, ya que elimina la necesidad de volver a cargarla por completo, sino que también garantiza que los anuncios que se muestran sigan siendo relevantes y atractivos. Con esta técnica, los propietarios de sitios web pueden lograr un equilibrio entre la monetización y el rendimiento para ofrecer contenido de anuncios oportuno y atractivo, a la vez que minimizan los efectos negativos en la experiencia del usuario.
Actualizar los espacios publicitarios es particularmente valioso en las páginas en las que los usuarios suelen quedarse más tiempo, como las de recetas, los instructivos de DIY y otros sitios web con mucho contenido. Por ejemplo, en una página de manualidades en la que los usuarios pasan una cantidad considerable de tiempo siguiendo los instructivos, actualizar los espacios publicitarios estratégicamente durante pausas entre los pasos o mientras ven galerías de imágenes puede mejorar tanto la experiencia del usuario como los ingresos publicitarios. Del mismo modo en una página de recetas, actualizar los espacios publicitarios después de que los usuarios se hayan desplazado por la lista de ingredientes o las instrucciones puede mantener el interés del usuario.
Prioriza la carga asíncrona
Una de las estrategias de mayor impacto para mejorar la velocidad de la página mientras se publican anuncios es la carga asíncrona. La carga asíncrona carga anuncios independientemente del contenido de la página web principal permite que la página se siga renderizando y sea interactiva sin esperar a que los anuncios se carguen por completo. Esto reduce significativamente el tiempo de carga percibido, lo que mejora la satisfacción del usuario.
Incluye el atributo async
en la definición de la etiqueta de la secuencia de comandos. Por ejemplo:
AdSense:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense (anuncios automáticos):
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Google Publisher Tag:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
Optimice los tamaños, la posición y los formatos de los anuncios
![Una ilustración de dispositivos en diferentes tamaños de viewport, con posiciones de anuncios estilizadas como cuadros verdes, cada uno con el texto "Anuncio".](https://web.dev/static/articles/loading-ads-page-speed/image/fig-7.png?authuser=5&hl=es)
El tamaño, la posición y el formato de los anuncios pueden tener un impacto significativo en la velocidad de la página. Los tamaños de anuncios grandes pueden ralentizar la carga de la página y generar frustración en los usuarios. Para mitigar este problema, los propietarios de los sitios web deben trabajar en estrecha colaboración con los anunciantes para optimizar los tamaños y formatos de los anuncios. Fomentar el uso de formatos de imagen comprimidos y un diseño eficiente de creatividades de anuncios ayuda a reducir el tamaño de los archivos sin comprometer la calidad visual. Estas optimizaciones no solo mejoran la velocidad de las páginas, sino que también minimizan el consumo de datos para los usuarios con ancho de banda limitado.
Better Ads Standards
Para mostrar anuncios, es fundamental cumplir con los Better Ads Standards porque hacerlo no solo mejora la experiencia del usuario, ya que reduce los formatos de anuncios intrusivos y disruptivos, sino que también tiene un impacto positivo en la posición de la publicación de anuncios y el tiempo de carga de la página.
Si se siguen estos estándares, es más probable que los anuncios se ubiquen en posiciones menos intrusivas y obstructivas, lo que puede generar una mayor participación del usuario y tasas de clics.
Además, cumplir con estos lineamientos también puede conducir a velocidades de carga de páginas más rápidas, ya que se favorecen los formatos de anuncios más ligeros y que consumen menos recursos, lo que mejora el rendimiento general del sitio web y la satisfacción del usuario.
Evaluación estratégica de redes y proveedores de publicidad
No todas las redes de publicidad y los proveedores se crean con el mismo rendimiento. Para garantizar una velocidad óptima de la página, los propietarios de sitios web deben evaluar meticulosamente el rendimiento de diferentes redes de publicidad, la implementación de ofertas de encabezado y los proveedores.
Forjar sociedades con proveedores que priorizan la velocidad y que tienen un historial de publicar contenido publicitario liviano de manera eficiente puede aumentar significativamente el rendimiento de la página y mejorar la experiencia del usuario.
Conclusión
Lograr un equilibrio entre la monetización y el rendimiento es crucial para los propietarios de sitios web que buscan ofrecer una experiencia del usuario excepcional y, al mismo tiempo, maximizar los ingresos a través de la publicidad en línea.
Mediante el uso de técnicas como la carga asíncrona, la carga diferida, la optimización de formatos y tamaños de anuncios, el aprovechamiento del almacenamiento en caché inteligente y la evaluación cuidadosa de las redes de publicidad, además de la oferta y los proveedores de encabezados, los propietarios de sitios web pueden sortear con éxito los desafíos de cargar anuncios sin comprometer el rendimiento de la página. Priorizar la publicación eficiente de anuncios en última instancia garantiza la estratificación de los usuarios, una mayor participación y una generación sustentable de ingresos.
Pies de página
- Es posible que los servidores de anuncios tengan restricciones y requisitos aplicables. Por ejemplo, Ad Manager requiere que los publicadores declaren su inventario que se actualiza en la IU. Algunos compradores requieren una declaración de actualización de 240 segundos o más. En general, cuanto más largo sea el intervalo entre actualizaciones, más atractivo será tu inventario para los compradores. Más información