Cómo evitar que Adsense rompa la optimización web

Si al igual que yo eres un friki de la optimización web, habrás podido comprobar que no importa cuanto trabajo dediques a mejorar tu web si luego tienes pensado añadir algún bloque de anuncios de Adsense.

Los bloques de anuncios, indiferentemente de cuales usemos, añaden una media de cómo mínimo 5 segundos en el tiempo de carga web y además, innumerables consultas que harán que nuestra web pase de estar perfectamente optimizada a dar pena.

Pero los tiempos de lamentaciones pasaron y por fin encontré algunas soluciones para evitar que Adsense roma la optimización web. A mi me ha costado meses de trabajo encontrar estas soluciones, a ti, te costará dos minutos conocerlas y poder disfrutar de ellas.

¿Por qué Adsense empeora mi puntuación Web?

Nuestra página web consta de texto, algo de código para marcar el estilo y de imágenes. Algunos códigos JS y poco más, todo esto bien optimizado y utilizando algunos plugins específicos, no debe suponer un problema.

Sin embargo, los anuncios de adsense aportan imágenes que muchas veces ni tan siquiera están comprimidas, un montón de llamadas (consultas) tanto a Adsense cómo a la web que se publicita, y un sinfin de código que aunque cargue en ASYNC (en paralelo con la web), terminará afectando muy negativamente a nuestra web.

En la primera gráfica puedes ver la puntuación de mi página web, totalmente optimizada y sin utilizar ningún bloque de publicidad de Adsense ni empresas similares.

En la segunda gráfica puedes ver la misma web analizada pero con dos bloques de Adsense añadidos. Si te fijas bien, el tiempo en el que la web carga completamente para estar interactiva pasa de 3.4 segundos a 8.7 segundos.

¿Tu esperarías 8 segundos a que cargue una página web? Quizás en el PC si, pero desde el móvil seguro que no. Además, no todo el mundo tiene 4G o 3G y esos 8 segundos, pueden ser en realidad más de 15.

¿Por que usar PageSpeed Insights para medir la velocidad?

Existen muchas herramientas para medir la velocidad de carga web, cómo Pingdom, Webpagetest, GTmetrix... Pero solo una mide la velocidad de carga real desde dispositivos móviles, y es la nueva Google PageSpeed Insights, la cuál incluye medidas de LightHouse.

Esto significa, que esta herramienta gratuita mide los tiempos reales de carga móvil y no de carga de la versión de sobremesa (PC). A sía de hoy, no existe una herramienta más completa para ello.

Puedes aprender más de la nueva herramienta de medidas desde:

• Novedades en el nuevo PageSpeed Insights de Google

Y también puedes comprobar la puntuación de tu página web, totalmente gratis, desde la propia herramienta de Google. Recuerda medir alguna entrada de tu blog y no la home, ya que la home (página principal) generalmente siempre da mejores resultados (pero las visitas no llegan siempre a la home, sino a los artículos).

• Herramienta de análisis PageSpeed Insights

¿Sorprendido con tu puntuación? Si ha sido mala, no te preocupes, todo tiene solución.

Cómo mantener una web optimizada con Adsense

Tras muchos meses de dolores de cabeza, trabajo, optimizaciones, pruebas y más pruebas... por fin di con la solución a los problemas que Adsense añade a la optimización de una página web cualquiera.

Con estas dos técnicas, podremos mantener toda o casi toda nuestra optimización sin peligro alguno de que Adsense sume consultas, tiempo extra de carga ni código a doquier en nuestra web.

Aunque no te lo creas, esto es para mi cómo el Santo Grial, pues este problema me ha acompañado durante muchos meses. Y ahora que tengo la solución, no podía dejar pasar la oportunidad de compartirla con tod@s.

Advanced Ads Pro

Advanced Ads es un plugin totalmente gratuito y muy completo que nos permite configurar anuncios de Adsense, banners publicitarios o lo que queramos, en cualquier parte de nuestra página web.

Personalmente utilizo este plugin en todas mis páginas y además siempre lo recomiendo, es sencillamente perfecto. Y no lo digo solo yo, sino las más de 500 personas que lo han votado con 5 estrellas y sus más de 80.000 instalaciones.

Puedes instalar Advanced Ads desde la opción de plugins de WordPress (Plugins - Añadir nuevo) ya que es gratuito.

Pero para poder usar la opción de Lazy Load que es la que nos permitirá optimizar Adsense sin romper ninguna optimización, necesitaremos el complemento Pro que puedes encontrar aquí:

• Complemento Advanced Ads Pro

Lo sé, es un plugin premium (de pago) pero su precio es bastante bajo y sus beneficios son increíblemente altos.

¿Cómo optimizar Adsense con Ads Pro?

En el tutorial de uso del plugin Advanced Ads explico cómo añadir anuncios en cualquier parte de nuestra página web, de forma sencilla y tremendamente práctica.

Pero para que esos anuncios no rompan la optimización web, debemos activar una opción del complemento PRO llamado Lazy Load. Para ello, una vez instalado el complemento PRO y añadido el número de serie para que esté activo, haremos lo siguiente:

1. Vamos a la pestaña de Advanced Ads y hacemos click en "Configuraciones"
2. Activamos "Almacenamiento en caché"
3. Activamos "Lazy Load"
4. Le damos a "Guardar las configuraciones de esta página"
5. Se mostraran nuevas opciones en la misma página
6. Vamos a la casilla "Start loading the ads" y ponemos "200"
7. Guardamos nuevamente con "Guardar las configuraciones de esta página"

Con esto habremos activado el Lazy Load del complemento PRO, de forma que cuando un lector llegue a la zona donde tenemos incrustado un anuncio, este comenzará a cargarse 200 pixeles antes.

Es decir, los anuncios no se cargaran con la carga de la página web, sino solamente cuando el lector esté llegando a la zona del anuncio. Si vemos que 200 pixeles es poco, podemos aumentar la cifra a 300 o al número que creamos oportuno (yo uso 200px).

Ahora llega el momento de activar el Lazy Load en los propios anuncios. Para ello, debemos haber añadido ya todos los anuncios que queramos usar desde la pestaña "Anuncios" y una vez finalizado ese proceso, pasaremos a la pestaña "Ubicaciones".

Por defecto la opción de Lazy Load estará deshabilitada, así que debemos habilitarla en todos los anuncios que tengamos en marcha. Para ellos implemente marcaremos la casilla "Habilitado" en la opción Lazy Load y luego guardaremos cambios.

Ahora solo debemos borrar la caché de nuestro plugin de caché y nuestros anuncios estarán funcionando bajo Lazy Load y sin perjudicar la puntuación de nuestra página web.

Aquí tienes un ejemplo sencillo de una de mis páginas web con tres bloques de anuncios y sin Lazy Load activado. Y debajo, la misma página con tres bloques de anuncios pero con Lazy Load activado.

A buen entendedor pocas palabras bastan ¿verdad?. También puedes analizar mi página (esta misma web) con PageSpeed Insights para que veas los resultados, aunque no siempre serán buenos pues a menudo me gusta experimentar con cosas nuevas (no siempre tengo la web optimizada).

Inconvenientes de usar Lazy Load con Ads

No todo puede ser perfecto u cómo siempre me gusta contar las cosas cómo son, lo bueno y lo malo, aquí van los inconvenientes que encontrarás al usar Lazy Load.

Adsense no solo paga por el número personas que hacen click en los anuncios de tus páginas web, también paga por el número de impresiones de dichos anuncios.

Al usar Lazy Load, si el lector no baja hasta donde esté el o los anuncios ubicados, estos no cargarán así que perderás esas impresiones. Si el lector baja hasta la ubicación de los anuncios, cobrarás dichas impresiones.

Lazy Load no funciona en los anuncios colocados en el encabezado (algo lógico, pues estos anuncios se muestran en la primera impresión y no tiene lógica que se use Lazy Load).

En resumen, no todos los lectores leen los artículos completos, por lo que notarás un pequeño descenso en el número de impresiones de tus anuncios y con ello, un pequeño descenso en los beneficios (si, pequeño, no grande).

Beneficios de usar Lazy Load con Ads

Mantener nuestra página web optimizada es un lujo con mayúsculas, porque el tiempo de carga de una página web, sobre todo en dispositivos móviles, marca la diferencia entre una buena experiencia de usuario con un bajo porcentaje de rebote y una mala experiencia de usuario con un mayor porcentaje de rebote.

¿Por que influye el porcentaje de rebote? Porque nadie espera 10 o 15 segundos desde un móvil a que una web cargue por completo y eso influye directamente en la experiencia de usuario y porcentaje de rebote.

En mi opinión personal, merece la pena y mucho, perder un poco de ingresos por las impresiones pero mantener una web bien optimizada. Y que quede claro, que la velocidad de carga web (render total) es un factor cada vez más influyente para el posicionamiento en Google.

Puedes ver más sobre dichos factores desde:

• Factores que valora Google para posicionar una web

Otras formas de optimizar con Adsense

Aunque los anuncios de Adsense cargan en ASYNC (paralelo con la carga web), lo cierto es que tardan bastante más que la propia web y además ralentizan la carga de la misma.

Por eso hay quien prefiere anular la carga ASYNC y usar una carga en DEFER (cargar los anuncios después de la carga web, no en paralelo).

Para ello solo debemos hacer algunas modificaciones básicas añadiendo un código en el "Body" de nuestra página web (podemos usar un plugin para ello).

Cambiar ASYNC a DEFER

Existe una forma muy sencilla de cambar la carga de archivos de Adsense de ASYNC a DEFER para evitar que perjudiquen al tiempo de carga y optimización de nuestra página web.

Para ello, lo primero que debemos hacer es eliminar esta parte del código de Adsense de todos los bloques de anuncios que tengamos ubicados en nuestra web:

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

Así evitaremos que hagan la carga en ASYNC. El segundo paso es añadir un código para que los anuncios carguen en DEFER, este código lo añadiremos dentro de la etiqueta "BODY" de nuestra web.

Para ello podemos usar algún plugin que no facilite la inserción del código, cómo por ejemplo:

• Plugin Insert Headers and Footers para WordPress

El código que debemos añadir es el siguiente:

<!--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-->

Y con esto, conseguiremos una carga en DEFER de los anuncios, evitando que afecten directamente a la optimización de nuestra web.

Pros y Contras del código

Los pros son los beneficios al eliminar el tiempo de carga extra y consultas de los anuncios de Adsense mientras se carga nuestra web.

Los contras, el número de impresiones que al igual que con el método anterior, se verán disminuidas, afectando así a nuestros ingresos por impresión.

Personalmente no he utilizado este código pues para mi es más sencillo y confiable hacerlo desde el propio plugin de Advanced Ads, así que si lo utilizas en tus páginas web, será siempre bajo tu propia responsabilidad.

Adsense penaliza la modificación de código de sus anuncios, pero esto no es una modificación del código en sí. No obstante, te animo a que consultes previamente en el foro de ayuda para editores de Adsense.

Conclusiones finales

Más feliz que una perdiz con mi nuevo hallazgo de Advanced Ads y la carga Lazy Load, ya que aunque pierda un poco de beneficio por el número de impresiones, gano muchísimo en optimización web, que es una de mis obsesiones.

Es lo que utilizo en todas mis páginas y en las de los clientes que me solicitan algún tipo de optimización similar. Los resultados son tan buenos, que sencillamente no existe nada mejor.

Espero haberte ayudado a resolver tus problemas de optimización con Adsense y que a partir de ahora, eso ya no sea un problema para ti, al igual que ya no lo es para mi.

Saludotes