Un problema común al que se enfrentan los editores es que Google AdSense afecta a la velocidad original de nuestro blog. Al no tener control sobre la optimización de los recursos, acabamos sintiéndonos tristes.
Al igual que las miniaturas de los vídeos de YouTube, deberían utilizar WebP para las imágenes de los bloques de anuncios. Es irónico que a veces no se molesten en servir con compresión GZIP, o mantener los recursos minificados. Los recursos masivos y las cargas adicionales de muchas búsquedas de DNS, matan la velocidad de nuestra página como el infierno.
@AdSense Why so slow?
– TheGulshanKumar
Hace unos meses, cuando tuiteé el problema de la velocidad de las unidades de anuncios, no obtuve ninguna respuesta satisfactoria. He vuelto con una solución que evitará que AdSense ralentice la carga de su contenido original.
Honestamente, no soy personalmente un gran fan de la carga perezosa incluso para las imágenes. Pero aún así, sólo quiero compartir una opción ligera. Si quieres, puedes probar una vez si te preocupa mucho servir primero el contenido principal, antes de los Ad Units.
Consejo: Puedes usar Ezoic para ganar más que AdSense y alojar WP de forma gratuita.
Instrucciones para configurar la carga lenta de AdSense
Naturalmente, así es como se ve el código de un bloque de anuncios original.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Detalles técnicos: Básicamente lo que ocurre es que se carga de forma asíncrona, lo que significa que el navegador sigue descargando el script adsbygoogle.js sin bloquear el análisis del HTML.
Pero aquí, en el método de carga perezosa voy a cambiar el método ASYNC a DEFER real. El script de AdSense comenzará a descargarse en el navegador, sólo una vez que la ventana termine de cargar la página web principal. De esta manera, el visitante no tiene que esperar para ver toda la página rápidamente para el AdSense.
Para ello, no es necesario hacer grandes cambios en su unidad de anuncio. Simplemente alteraremos el estilo de carga de adsbygoogle.js que hará toda la magia.
All you need to follow below two Steps
Elimine el siguiente script de todos los bloques de anuncios existentes.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Ahora aparecerá así
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Después, añada el siguiente código JavaScript en el pie de página de su tema, posiblemente justo antes de la etiqueta body.
Método 1. Evento onload
Sugerencia: La etiqueta Noptimize está presente para hacerla compatible con Autoptimize. Evitará la agregación de AdSense lazy loader inline JS.
<!--noptimize-->
<script type="text/javascript">
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-->- El código anterior, se puede utilizar a través de la opción de Tema si está disponible para agregar la secuencia de comandos personalizada
- Para Genesis, utilice el plugin Genesis Simple Hooks con la opción
genesis_after - o el plugin Header and Footer para cualquier otro tema.
¿Qué hace exactamente este script?
Este script se asegurará de que su unidad de anuncios de AdSense comenzará a cargar y se hará visible después de terminar la carga completa de su página web principal. Es por eso que lo nombré, Lazy Loading para Google AdSense.
Método 2. Evento onscroll
Este enfoque cargará el bloque de anuncios sólo cuando el usuario se desplace por la página web o no.
<script type='text/javascript'>
//<![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/javascript",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>Método 3. Mostrar unidades de publicidad en la interacción con el usuario
Si desea mostrar anuncios de manera oportuna sin comprometer los ingresos y el rendimiento, puede utilizar el plugin «Flying Scripts by WP Speed Matters» para descargar y ejecutar JS basado en la interacción del usuario.
The best part, you don’t need to make any changes in your ad code at all.
- Ir a la configuración del plugin, incluir la palabra clave adsbygoogle
- A continuación, guarde la configuración y purgue (borre) la caché de la página. Eso es todo.
Resultado del rendimiento
He estado utilizando este plugin en uno de mis clientes que utiliza la red de anuncios Mediavine (que está siendo más pesado que las unidades de anuncios de Adsense) el núcleo vital pasó con éxito para móviles y de escritorio tanto.
