Google AdSense es un programa de monetización dirigido por Google. Sigue siendo la forma más confiable de ganar dinero en línea para muchos editores. Un problema común que enfrentan los editores es que Google AdSense afecta la velocidad de nuestras web y blog. Debido a que no tenemos el control para optimizar los recursos, acabamos sintiéndonos tristes.

Cómo configurar la carga diferida para los bloques de anuncios de Google AdSense
Al igual que la miniatura de video de YouTube, deberían usar WebP para imágenes de bloques de anuncios. Es irónico que a veces no se molesten en servir con compresión GZIP o en minimizar los recursos. Los recursos masivos y las cargas adicionales de muchas búsquedas de DNS, matan la velocidad de nuestra página como el infierno.
@AdSense ¿Por qué tan lento?
- TheGulshanKumar
Hace unos meses, cuando tuiteé Problema de velocidad del bloque de anuncios, no obtuve una respuesta satisfactoria. Estoy de vuelta con una solución que evitará que AdSense ralentice la carga de su contenido original.

Honestamente, personalmente no soy un gran admirador de la carga perezosa, incluso para las imágenes. Pero aún así, solo quiero compartir una opción. Si lo desea, puede intentarlo una vez si está muy preocupado por publicar contenido principal primero, antes de los bloques de anuncios.


Instrucciones para configurar la carga diferida para AdSense


Naturalmente, así es como se ve un código de bloque de anuncios original.
<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 técnicos: Básicamente, lo que sucede es que se carga en forma asincrónica, significa que el navegador continúa descargando el script adsbygoogle.js sin bloquear el análisis de HTML.

Pero aquí, en el método de carga diferida, voy a cambiar el método ASYNC a DEFER. La secuencia de comandos de AdSense comenzará a descargarse en el navegador, solo una vez que la ventana complete la carga de la página web principal. De esta manera, el visitante no tiene que esperar a ver rápidamente la página completa de AdSense.

Para este propósito, no es necesario que realice grandes cambios en su bloque de anuncios. Simplemente modificaremos el estilo de carga de adsbygoogle.js que hará toda la magia.

Todo lo que necesita seguir a continuación dos pasos

En primer lugar, elimine la secuencia de comandos siguiente de todos los bloques de anuncios existentes.
<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>
Luego, agregue el código jаvascript a continuación en el pie de página del tema, posiblemente justo antes de la etiqueta del cuerpo (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?


Esta secuencia de comandos garantizará que su bloque de anuncios de AdSense comience a cargarse y se vuelva visible después de finalizar la carga completa de su página web principal. Por eso lo llamé Carga diferida para Google AdSense.

Método 2. evento onscroll - onscroll event


Este enfoque cargará el bloque de anuncios una vez que el usuario se desplace por su página web.
<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>
Espero que esto le ayude a mejorar el rendimiento de su sitio. (Escrito por Gulshan Kumar).

Desde el punto de vista de Tutoriales en linea este pequeño script de (evento onscroll - onscroll event) ayudo significativamente en la velocidad de carga de este sitio web en la sesión de performance de lighthouse paso de 29 a 79 un cambio muy brutal por un script de publicidad que da la plataforma Google Adsense para monetizar nuestras webs.

Te sugiero seguir leyendo...


¿Cómo configurar la carga diferida para los bloques de anuncios de Google AdSense? ¿Cómo configurar la carga diferida para los bloques de anuncios de Google AdSense?...
Tutoriales en linea
¿Te gusta el tutorial?





Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!