Como Implementar la carga diferida para los bloques de anuncios de Google AdSense

Google AdSense es un programa de monetización de Google. Para muchos editores, sigue siendo la forma más confiable de ganar dinero en línea. Un problema común que enfrentan los editores es que Google AdSense puede afectar la velocidad de nuestros sitios web y blogs. Debido a que no tenemos control sobre la optimización de los recursos, terminamos con dolor.

Al igual que las miniaturas de videos de YouTube, deben usar WebP para imágenes de bloques de anuncios. Irónicamente, a veces les da pereza usar GZIP para comprimir el servicio o minimizar recursos. Muchos recursos y carga adicional de muchas búsquedas de DNS, matando la velocidad de nuestra página como el infierno.

Cuando twitteé sobre los problemas de velocidad de los bloques de anuncios hace unos meses, no obtuve una buena respuesta. Regresé con una solución para evitar que AdSense ralentice la carga del contenido original.

No soy partidario de las imágenes de carga lenta; sin embargo, si tiene intención de dar prioridad a la entrega del contenido principal sobre los bloques de anuncios, es una opción que merece la pena considerar.

Pasos para configurar la carga diferida para AdSense

Así es como aparece el código inicial del anuncio.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Tu nombre del bloque de anuncio -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567891234"
     data-ad-slot="7361088668"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Detalles Tecnicos: Básicamente, cuando entras en una página web, se carga el script adsbygoogle.js en segundo plano, de modo que puedes seguir mirando la página sin que se bloquee.

En este caso, estamos alterando el método ASYNC a DEFER. Esto asegurará que el script de AdSense comience a descargarse en el navegador después de que la página web principal haya terminado de cargarse. De esta forma, el visitante no tendrá que esperar para acceder rápidamente a la página.

Para lograr este resultado, no es necesario realizar modificaciones importantes en su unidad de anuncios; simplemente alteraremos el estilo de carga de adsbygoogle.js, lo que generará el efecto deseado.

Para proceder, siga los dos pasos siguientes

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Ahora se verá así:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567891234"
     data-ad-slot="7361088668"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Incluya el siguiente código JavaScript en el pie de página del tema, idealmente justo antes de la etiqueta body.

Método 1. Evento de carga - onload event

<!--noptimize-->
<script type="text/jаvascript">
function downloadJSAtonload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtonload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtonload);
else window.onload = downloadJSAtonload;
</script>
<!--/noptimize-->

¿Qué hace exactamente este script?

Este script está diseñado para optimizar la carga de los bloques de anuncios de AdSense, garantizando que sean visibles una vez que la página web principal se haya cargado por completo. De este modo, se mejora la experiencia del usuario al permitir la carga diferida de estos anuncios.

Método 2. evento onscroll - onscroll event

Al desplazarse por su página web, el bloque de anuncios se cargará mediante este método.

<script type='text/jаvascript'>
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.type="text/jаvascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>

Al publicar este código, se produce un error. Para ver el código correctamente, haga clic aquí.

Confiamos en que esta información le ayude a optimizar el rendimiento de su sitio web. (Escrito por Gulshan Kumar).

Este pequeño script (evento onscroll) proporcionó un impulso significativo a la velocidad de carga del sitio web en la sesión de rendimiento de Lighthouse, lo que se tradujo en una mejora de 29 a 79. Este notable cambio fue posible gracias a la plataforma Google Adsense, que proporcionó un eficaz script publicitario.