Lazy Load AdSense Ads Responsive

Lazy Load AdSense Ads Responsively me alegró el día. He estado optimizando mi sitio web durante un mes y cuando comencé la optimización de mi sitio web. Me sorprendió cuando vi que mi sitio web tiene un tiempo de carga muy alto y en GTmatriz el grado de carga de la página de mi sitio web fue C.

Antes de eso, nunca probé mi sitio en ninguna herramienta de prueba de velocidad de carga y comencé a optimizar mi sitio para reducir su tiempo de carga para que se clasifique en el motor de búsqueda de Google.

Mientras realizaba la optimización, vi que los anuncios de AdSense eran el factor principal que hacía que mi sitio web se cargara más lentamente y fue una tarea muy difícil para mí resolver este problema porque los anuncios de AdSense también son muy importantes para cargar. Después de investigar, encontré una solución para los anuncios de AdSense receptivos de carga diferida que me ayudó mucho.

La técnica que utilicé para la carga diferida de anuncios de AdSense es que en este artículo también puede implementar esta técnica de carga diferida para que sus anuncios de AdSense se carguen solo cuando sean necesarios, no en el momento de carga de la página.

Antes de la optimización, el grado de velocidad de mi sitio web era C pero ahora puede verificar el tiempo de carga de mi sitio web y su calificación será aproximadamente A y 90% puntuaciones.

hay un sencillo plugin disponible en la versión jquery o en la versión vainilla JS, puede usar cualquiera que lo ayude a cargar de forma diferida sus anuncios de AdSense con capacidad de respuesta.

Hay muchas ventajas de usar esta carga diferida plugin para los anuncios de AdSense, pero antes que nada, déjeme decirle los problemas que enfrenta si no utiliza este inicio de sesión.

Anuncios de AdSense antes de usar la carga diferida:

Anuncios de AdSense después de usar Lazy Load:

Si no está usando este plugin luego, sus anuncios de AdSense se cargarán automáticamente cuando se cargue la página web de su sitio web y todos los anuncios de AdSense se carguen simultáneamente al mismo tiempo.

El tamaño del anuncio se decide en la carga de la página y si el usuario cambia la orientación de su dispositivo, el tamaño del anuncio no cambiará, seguirá siendo el mismo que se decide en el momento de la carga de la página. ¡Eso no suena bien! ¿Lo es?

Usando esto Anuncios de AdSense receptivos de carga diferida plugin también puede configurar la función de impresión automática en sus anuncios usando cualquier evento como un clic, desplazamiento, cambio de tamaño o cualquier otro evento usando el método de destrucción. No te preocupes, te lo cuento todo.

Problemas sin el complemento de anuncios de Adsense de carga diferida:

Ahora, en resumen, estos son algunos problemas que puede enfrentar si no está usando este anuncios de Adsense receptivos de carga diferida plugin.

• El tiempo de carga de su sitio web será muy alto.
• El tamaño del anuncio no se ajustará si el usuario cambia la orientación de su dispositivo.
• No puede destruir anuncios si lo desea.

La solución para todos los problemas enumerados anteriormente es usar este inicio de sesión de anuncios de AdSense receptivo de carga diferida sin importar dónde se encuentre el anuncio de AdSense, arriba o debajo de la ventana gráfica, no se cargará en la carga de la página y solo se cargará si el anuncio está a la vista. .

Este plugin también ayuda a cambiar el tamaño de AdSense anuncios cuando el usuario cambia la orientación de su pantalla o dispositivo. También puede recargar los banners en puntos de interrupción particulares usando este plugin.

El plugin en sí mismo no es mucho más un fragmento de código, es un fragmento muy pequeño o corto de código JavaScript que está disponible en dos versiones, vainilla js y jQuery.

El nombre de la función global para el plugin nombre es cargador de adsense.

Puede descargar los archivos js desde los enlaces a continuación.

adsenseloader.js sin dependencias (IE 9+) 1,1 KB cuando se minimiza y se comprime con gzip.

jquery.adsenseloader.js dependencia de jQuery 835 bytes cuando se minimiza y se comprime con gzip.

Inicialización:

Para inicializar esto plugin use el siguiente código.

// vanilla
var instance = new adsenseLoader('.adsense'); // accepted argument types: Selector String, Element, NodeList, Array
 
// jQuery
$('.adsense').adsenseLoader();

Opciones predeterminadas:

El opciones predeterminadas o configuraciones que se utilizan en este plugin Si puede personalizarlos de acuerdo con sus requisitos, también se proporciona la descripción.

var options = {
    laziness: 1,
    /*
        @int (<=0)
        This sets the laziness of loading the ads: (viewport height) * laziness. For example:
        0 – ad load starts when at least a tiny part of it gets in the viewport;
        1 – ad load starts when the distance between the ad and the viewport is no more than the height of the viewport;
        2 – 2x viewports, etc.
    */

    onLoad: false,
    /*
        @bool
        A callback function is fired when the ad is fully loaded.
        A single argument (object) of the ad element is passed. For example:
        onLoad: function( ad )
        {
            alert( ad.getAttribute('data-ad-slot') + ' ad is loaded');
        }
    */
};

// vanilla
var instance = new adsenseLoader(".adsense", options);

// jQuery
$(".adsense").adsenseLoader(options);

Método/función de destrucción:

Como te he dicho al principio de este artículo que este plugin también tiene un destruir método o función que realiza la funcionalidad como su nombre lo indica, destruye los anuncios y devuelve el fragmento DOM correspondiente al estado predeterminado o, de manera simple, esta función lo ayudará a recargar sus anuncios de AdSense.

// vanilla
var instance = new adsenseLoader('.adsense', options);
 
instance.destroy(); // Destroys All Ads
// or
document.querySelectorAll('.adsense')[0].adsenseLoader('destroy'); // Destroys First Ad

// jQuery
$('.adsense').adsenseLoader(options);
 
$('.adsense').adsenseLoader('destroy'); // Destroys All Ads
// or
$('.adsense').eq(0).adsenseLoader('destroy'); // Destroys First Ad

Otras variables globales/opciones:

Estos son algunos otros opciones que se utilizan globalmente en esto plugin también puede personalizarlos, pero los valores predeterminados se proporcionan a continuación.

var options = {
    scriptUrl: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
    /*
        @string (url)
        URL for Google Adsense's executive script file
    */

    throttle: 250,
    /*
        @int (milliseconds)
        This defines how often the plugin should make calculations during the processes such as resize of a browser's window or viewport scroll.
        250 means that this happens 4 times in a second.
    */
};

// vanilla
adsenseLoaderConfig(options);

// jQuery
$.adsenseLoaderConfig(options);

Así que después de la inicialización de este plugin y agregar el código JavaScript en su sitio web ahora es el momento de agregar el código HTML para que pueda implementar sus anuncios de AdSense en su sitio web.

Simplemente tienes que crear un elemento con clase. adsense porque adsense es la clase que se usa en el script anterior para su comodidad, use el siguiente código que se proporciona a continuación.

Marcado HTML:

<div class="adsense">
  <ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

Ahora aquí viene controlar el tamaño de sus anuncios de AdSense y lo haremos usando CSS. Existe el código CSS, hemos utilizado consultas de medios CSS para que sus anuncios de AdSense respondan a todos los dispositivos.

Marcado CSS:

.adsense {
    width: 970px;
    height: 90px;
    display: block;
}
.adsense:before {
    display: none !important;
}
.adsense ins {
    width: 100%;
    height: 100%;
    display: block;
}

@media screen and (max-width: 1024px) {
    .adsense {
        width: 728px;
        height: 90px;
    }
    .adsense:before {
        content: "1024";
    }
}

@media screen and (max-width: 800px) {
    .adsense {
        width: 468px;
        height: 60px;
    }
    .adsense:before {
        content: "800";
    }
}

Ahora, AdSense publicará automáticamente anuncios que tengan dimensiones de acuerdo con las dimensiones dadas en el código CSS anterior y mediante consultas de medios y pseudoelementos. ::antes guiaremos a la plugin cuándo deben cargarse los anuncios.

El trabajo de dimensionamiento de anuncios se divide en dos ramas en las que CSS es la lógica y JavaScript se utiliza para la ejecución.

Si quieres ver la demo de Anuncios de AdSense receptivos de carga diferida puede ver los anuncios de mi sitio web, directamente en esta página.

Si desea mostrar varios anuncios de AdSense en diferentes tamaños, también puede hacerlo, pero para eso, debe proporcionar lógica mediante CSS.

A continuación se muestra el código HTML para anuncios de AdSense de dos tamaños, uno es una tabla de clasificación para la que nuestro elemento tendrá principal de adsense nombre de clase y el otro está dentro de la barra lateral con lado de adsense nombre de clase con sus estilos particulares, puede usar cualquiera si lo desea.

Marcado HTML:

<!-- HTML code for Leaderboard -->
<div class="adsense adsense--main">
<ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

<!-- HTML code for Sidebar Square -->
<div class="adsense adsense--side">
<ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

Marcado CSS:

.adsense:before {
    display: none !important;
}
.adsense ins {
    width: 100%;
    height: 100%;
    display: block;
}

.adsense--main {
    width: 728px;
    height: 90px;
}
.adsense--side {
    width: 336px;
    height: 280px;
}

@media screen and (max-width: 1024px) {
    .adsense--main {
        width: 468px;
        height: 60px;
    }
    .adsense--main:before {
        content: "1024";
    }
}

@media screen and (max-width: 800px) {
    .adsense--side {
        width: 250px;
        height: 250px;
    }
    .adsense--side:before {
        content: "800";
    }
}

Indicando Agregar proceso de carga:

Si desea indicar el proceso de carga de los anuncios de AdSense, puede hacerlo de varias maneras proporcionando una imagen de marcador de posición, agregando un texto, un borde, un color de fondo o cualquier otra cosa que cumpla con sus requisitos. Este marcador de posición se mostrará cuando su anuncio no esté cargado; cuando se carga, este marcador de posición se eliminará automáticamente.

Para indicar el proceso de carga de sus anuncios de AdSense, puede utilizar el código que se proporciona a continuación.

Marcado HTML:

<div class="adsense">
  <ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
  <p class="adsense__loading"><span>Loading...</span></p>
</div>

Marcado CSS:

.adsense {
    position: relative;
}
.adsense__loading {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: table; /* for vertical centering */
    position: absolute;
    top: 0;
    left: 0;
}
.adsense--loaded .adsense__loading {
    display: none;
}

.adsense__loading span {
    text-align: center;
    vertical-align: middle; /* for vertical centering */
    display: table-cell; /* for vertical centering */
}

Uso de una función de devolución de llamada cargar podemos agregar una clase cargado con adsense a nuestro elemento principal, que es responsable de ocultar el elemento de carga o el marcador de posición de AdSense.

Marcado Javascript:

// vanilla
var instance = new adsenseLoader(".adsense", {
    onLoad: function (ad) {
        if (ad.classList) ad.classList.add("adsense--loaded");
        // IE 10+
        else ad.className += " " + "adsense--loaded"; // IE 8-9
    },
});

// jQuery
$(".adsense").adsenseLoader({
    onLoad: function ($ad) {
        $ad.addClass("adsense--loaded");
    },
});

En los códigos de ejemplo anteriores, debe reemplace su ID de cliente de AdSense y también su ID de espacio publicitario de AdSense también intente agregar todos los atributos proporcionados por Adsense en En s etiqueta cuando genera el código de anuncio.

Después de usar este plugin La velocidad de su sitio web se optimizará, lo que lo ayudará a obtener una clasificación más alta en los resultados de búsqueda de Google y obtener más tráfico.

Comprima los códigos antes de usarlos para que no enfrente ningún error o dificultad.

Terminar:

Ahora aquí termina este artículo. Espero haber cubierto todos los temas y todas las preguntas relacionadas con los anuncios de AdSense receptivos de carga diferida.

Si aún tiene algún tipo de problema, puede comentar sus problemas en la sección de comentarios a continuación. Estaré esperando sus comentarios y responderé tan pronto como pueda.