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 manera eficaz sin afectar la velocidad de tu página, a garantizar una experiencia del usuario fluida y a 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 principal fuente de ingresos. Sin embargo, a veces la presencia de anuncios en los sitios web puede afectar 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 anunciantes, y la experiencia del usuario.
Considera un sitio web que ubica muchos anuncios en su contenido con el objetivo de generar ingresos altos. Sin embargo, la gran cantidad de anuncios frustra a los usuarios, lo que genera una experiencia del usuario deficiente y porcentajes de rebote altos. A pesar del potencial de generar ingresos significativos por los anuncios, el abandono obstaculiza notablemente el éxito del sitio web.
Del otro lado del espectro, considera un sitio web sin anuncios. Este entorno sin anuncios atrae una cantidad significativa de usuarios debido a su rápido tiempo de carga 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 entorpecer su crecimiento y sustentabilidad 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 esencial cuando se trata de cargar anuncios sin afectar negativamente la velocidad de la página. Las Métricas web esenciales, que incluyen 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 la experiencia del usuario de tu sitio web.
Largest Contentful Paint (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 ser visible dentro del viewport. Al minimizar el tiempo de carga del contenido del anuncio y priorizar las técnicas de carga asíncronas, los propietarios de sitios web pueden reducir el LCP y disminuir el tiempo de renderización de los elementos con contenido más destacados de una página.
Interacción con el siguiente procesamiento de imagen (INP)
En segundo lugar, mejorar INP es crucial para las experiencias del usuario responsivas. INP mide la latencia de cada clic, toque y interacción del teclado que ocurre durante el ciclo de vida de una página. El valor resultante suele ser la interacción que tardó más tiempo 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 afectan negativamente a INP. Esto puede frustrar a los usuarios, ya que crea experiencias lentas o, incluso, incompletas en casos extremos. Implementar la carga diferida de los anuncios y aplazar la ejecución de JavaScript no crítico puede ayudar a reducir el INP de una página y, por lo tanto, mejorar la capacidad de respuesta general de la página.
Cumulative Layout Shift (CLS)
Por último, CLS mide la estabilidad visual de una página al medir 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 forma dinámica pueden generar inestabilidad en el diseño, lo que genera experiencias del usuario deficientes, ya que pueden perder de vista la ubicación en la página o incluso presionar involuntariamente los elementos incorrectos debido a cambios de diseño inesperados. Para mitigar esto, los propietarios de sitios web deben optimizar CLS para asegurarse de que los anuncios tengan espacio reservado para evitar cambios de diseño, y los tamaños de los anuncios deben optimizarse para evitar reprocesamientos repentinos de contenido.
Cómo estructurar la página web en bloques de contenido diferentes
Estructurar tu página web con bloques de contenido para el texto, las imágenes y el contenido del anuncio, a la vez que utilizas la propiedad content-visibility:
de CSS, puede mejorar significativamente el tiempo de renderización general en los navegadores modernos.
Si aplicas de manera estratégica la propiedad content-visibility:
dentro de estos bloques de contenido, optimizarás el proceso de renderización del contenido de texto, imágenes y anuncios. Esto garantiza que solo el contenido del viewport se renderice por completo, lo que da como resultado una carga inicial de la página más rápida y una interacción más fluida para el usuario. Esta mejora del rendimiento es particularmente valiosa al trabajar con 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 necesidad de desplazarse en el primer viewport. Los anuncios en la mitad inferior de la página se vuelven visibles después de 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 de la mitad superior de la página concepto de anuncio.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-3.png?authuser=7&hl=es-419)
Los espacios publicitarios en la mitad superior de la página se refieren 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 principales se consideran valiosas por varios motivos:
- Los anuncios colocados en la mitad superior de la página son visibles de inmediato para los usuarios cuando cargan una página web. Es más probable que los usuarios observen estos anuncios e interactúen con ellos, lo que genera tasas de clics más altas.
- Los anunciantes suelen considerar que la parte superior de una página web es el inmueble más valioso. Es la primera impresión que obtienen los usuarios cuando visitan un sitio, lo que la convierte en un área crucial para mostrar anuncios premium y de alto impacto.
- Los anuncios en la mitad superior de la página tienen los porcentajes de visibilidad más altos porque están directamente a la vista del usuario. Esto garantiza que la mayoría de los usuarios que visiten la página vean estos anuncios sin tener que desplazarse.
Sin embargo, es importante lograr un equilibrio entre la monetización y la experiencia del usuario al utilizar los 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 de carga lenta pueden tener un impacto negativo en la experiencia del usuario y aumentar los porcentajes de rebote. Optimizar los tiempos de carga de los anuncios es crucial para mantener una experiencia del usuario y de navegación fluida.
- 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, interrumpe la legibilidad del contenido y perjudica la experiencia del usuario. Esfuérzate por lograr un equilibrio entre la monetización y el mantenimiento de un diseño limpio y fácil de usar.
- Asegúrate 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 de la mitad inferior de la página concepto de anuncio.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-4.png?authuser=7&hl=es-419)
Los espacios publicitarios en la mitad inferior de la página (es decir, los anuncios colocados en la parte de una página web que solo se hace visible después de desplazarse hacia abajo) también tienen un valor considerable en el mundo de la publicidad digital. Estas ubicaciones ofrecen ventajas únicas que se complementan con 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 para explorar más contenido. Estas posiciones captan la atención de los usuarios comprometidos que buscan activamente información adicional, lo que las hace valiosas 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 lograr 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 en la mitad inferior de la página pueden integrarse sin problemas con el contenido que los rodea, lo que les da un aspecto menos invasivo a los usuarios. Esta integración, también conocida como publicidad nativa, puede ofrecer una experiencia del usuario más armoniosa.
- Las posiciones de anuncios que se requieren con desplazamiento ofrecen un diseño más creativo y una mayor flexibilidad de formato, con amplio espacio y libertad para experimentar. Los anuncios de video, los elementos interactivos y las imágenes más grandes se pueden cargar 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 las posiciones 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 que se anime a los usuarios a desplazarse para verlos. Implementar señales visuales o avances de contenido puede persuadir a los usuarios para que exploren más a fondo, lo que aumenta la probabilidad de que el anuncio sea visible.
- La colocación de los anuncios en la mitad inferior de la página no debe comprometer la calidad del contenido ni la legibilidad. Mantener un equilibrio entre los anuncios y el contenido para evitar abrumar a los usuarios y garantizar una experiencia del usuario positiva
- A diferencia de las posiciones 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. Si demoras la carga de estos anuncios hasta que estén cerca de ingresar al viewport del usuario, puedes mejorar la velocidad general de carga de la página y reducir los tiempos de renderización de la página inicial.
Cuando se usan de manera estratégica, los anuncios en 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, la optimización de la visibilidad, el equilibrio del contenido y la administración del 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
- Minimiza el cambio de diseño
- Supervisa el rendimiento
- Cómo evitar errores de implementación comunes
Carga anuncios de forma diferida cuando corresponda.
![Visualización de los recursos de carga diferida en comparación con los que no lo son. Cuando los recursos se cargan de forma diferida, el ancho de banda se conserva durante la carga de la página y los recursos se difieren hasta el punto en que es más probable que el usuario los vea.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-5.png?authuser=7&hl=es-419)
La carga diferida es una técnica que aplaza la carga de recursos no esenciales hasta que sean necesarios. Aplicar la carga diferida para anuncios que no son visibles de inmediato (es decir, anuncios en la mitad inferior de la página) garantiza que solo se carguen cuando son visibles, lo que 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
.
Mediante la implementación de 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á altamente correlacionado con INP) en el subproceso principal en esa parte crucial del ciclo de vida de la página, lo que minimiza los impactos negativos en la experiencia del usuario.
Cómo actualizar los anuncios sin actualizar la página
![Es una visualización de anuncios que se actualizan en la página, sin que se actualice la página de nivel superior.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-6.gif?authuser=7&hl=es-419)
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 realizar actualizaciones dinámicas del contenido de los anuncios sin interrumpir la experiencia de navegación del usuario ni causar demoras innecesarias.
En las aplicaciones para dispositivos móviles, la actualización de los anuncios en las vistas web existentes proporciona un mejor rendimiento en comparación con volver a cargar toda la página o volver a crear componentes WebView, ya que minimiza la sobrecarga de datos y recursos, lo que agiliza las actualizaciones de contenido y ofrece una experiencia del usuario más fluida sin la latencia que conlleva comenzar desde cero.
Al actualizar los anuncios de forma asíncrona, los propietarios de los sitios web pueden mantener intacto el contenido de la página y, al mismo tiempo, actualizar sin problemas el contenido del anuncio in situ y en tiempo real. Esto no solo mejora la velocidad de la página, ya que elimina la necesidad de volver a cargar toda la página, sino que también garantiza que los anuncios mostrados 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, lo que les permite ofrecer contenido del anuncio oportuno y atractivo, a la vez que minimiza los efectos negativos en la experiencia del usuario.
La actualización de espacios publicitarios resulta particularmente valiosa en páginas donde los usuarios tienden a quedarse más tiempo, como las de recetas, instructivos de DIY y otros sitios web con mucho contenido. Por ejemplo, en una página de manualidades DIY en la que los usuarios pueden dedicar una gran cantidad de tiempo a seguir los instructivos, actualizar los espacios publicitarios estratégicamente durante las pausas entre los pasos o mientras visualizan galerías de imágenes, puede mejorar la experiencia del usuario y los ingresos publicitarios. Del mismo modo en una página de recetas, actualizar los espacios publicitarios después de que los usuarios se desplazan por la lista de ingredientes o las instrucciones puede mantener el interés de los usuarios.
Prioriza la carga asíncrona
Una de las estrategias de mayor impacto para mejorar la velocidad de las páginas mientras se publican anuncios es la carga asíncrona. La carga asíncrona carga los anuncios independientemente del contenido de la página web principal, lo que permite que la página continúe dibujando y se vuelva interactiva sin esperar a que los anuncios se carguen por completo. Esto reduce de manera significativa el tiempo de carga percibido, lo que aumenta 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 el tamaño, la posición y los formatos de los anuncios
![Una ilustración de dispositivos con diferentes tamaños de viewport, con posiciones de anuncios estilizadas como cuadros verdes, y cada una dice "Anuncio".](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-7.png?authuser=7&hl=es-419)
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, lo que provocará la frustración de los usuarios. Para mitigar este problema, los propietarios de sitios web deben trabajar estrechamente con los anunciantes para optimizar los tamaños y formatos de los anuncios. Alentar el uso de formatos de imagen comprimidos y un diseño eficiente de las 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 la página, sino que también minimizan el consumo de datos de los usuarios con ancho de banda limitado.
Better Ads Standards
Es fundamental cumplir con Better Ads Standard para mostrar anuncios, ya que esto no solo mejora la experiencia del usuario, ya que reduce los formatos de anuncios intrusivos y disruptivos, sino que también repercute de forma positiva en la posición de 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 disruptivas, lo que puede generar una mayor participación de los usuarios y tasas de clics más altas.
Además, el cumplimiento de estas pautas también puede acelerar la velocidad de carga de las páginas, 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 de publicidad y proveedores
No todos los proveedores ni las redes de publicidad tienen el mismo rendimiento. Para garantizar una velocidad de página óptima, los propietarios de sitios web deben evaluar meticulosamente el rendimiento de las diferentes redes de publicidad, la implementación de las ofertas de encabezado y los proveedores.
Formar asociaciones con proveedores que priorizan la velocidad y que tienen una trayectoria en la entrega de contenido de anuncios ligero de forma eficiente puede aumentar significativamente el rendimiento de las páginas y mejorar la experiencia del usuario.
Conclusión
Lograr un equilibrio entre la monetización y el rendimiento es fundamental para los propietarios de sitios web que buscan proporcionar una experiencia del usuario excepcional y, al mismo tiempo, maximizar los ingresos a través de la publicidad en línea.
Con el uso de técnicas como la carga asíncrona, la carga diferida, la optimización de formatos y tamaños de anuncios, el uso del almacenamiento en caché inteligente y la evaluación cuidadosa de las redes de publicidad, y las ofertas de encabezado y los proveedores, los propietarios de sitios web pueden abordar satisfactoriamente los desafíos de cargar anuncios sin comprometer el rendimiento de la página. Priorizar la publicación eficiente de anuncios garantiza, en última instancia, la estratificación de los usuarios, una mayor participación y una generación de ingresos sostenible.
Pies de página
- Es posible que los servidores de anuncios tengan restricciones y requisitos que se apliquen. Por ejemplo, Ad Manager requiere que los publicadores declaren el 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