Optimiser les blocs d’annonces Google AdSense ?

Google AdSense est un programme de monétisation géré par Google. C’est toujours le moyen le plus fiable de gagner de l’argent en ligne pour de nombreux éditeurs. Un problème courant auquel les éditeurs sont souvent confrontés est que Google AdSense affecte la vitesse de notre blog d’origine. En raison de ne pas avoir le contrôle pour optimiser les ressources, nous finissons par nous sentir tristes.

Comme la miniature de la vidéo YouTube, ils doivent utiliser WebP pour les images des blocs d’annonces. Il est ironique que parfois ils ne prennent pas la peine de servir avec la compression GZIP ou de minimiser les ressources. Les ressources massives et les charges supplémentaires de nombreuses recherches DNS, tuent notre vitesse de page comme un enfer.

@AdSense Pourquoi si lent ?

 

– Le Gulshan Kumar

Il y a quelques mois, lorsque j’ai tweeté Problème de vitesse de bloc d’annonces, je n’ai obtenu aucune réponse satisfaisante. Je suis de retour avec une solution qui empêchera AdSense de ralentir le chargement de votre contenu original.

Honnêtement, je ne suis pas personnellement un grand fan du lazy load même pour les images. Mais quand même, je veux juste partager une option légère. Si vous le souhaitez, vous pouvez essayer une fois si vous êtes très soucieux de diffuser le contenu principal en premier, avant les blocs d’annonces.

Instructions pour la configuration du chargement différé pour AdSense

Naturellement, voici à quoi ressemble un code de bloc d’annonces 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>

Détails techniques : Fondamentalement, ce qui se passe lorsqu’il se charge sous forme asynchrone, signifie que le navigateur continue de télécharger le script adsbygoogle.js sans bloquer l’analyse HTML.

Mais ici, dans la méthode de chargement paresseux, je vais changer la méthode ASYNC en vraie DEFER. Le script AdSense commencera à se télécharger dans le navigateur, une seule fois la fenêtre terminera le chargement de la page Web principale. De cette façon, le visiteur n’a pas à attendre de voir la page entière rapidement pour AdSense.

À cette fin, vous n’avez pas besoin d’apporter de modifications importantes à votre bloc d’annonces. Nous allons simplement modifier le style de chargement de adsbygoogle.js qui fera toute la magie.

Tout ce que vous devez suivre ci-dessous deux étapes

Tout d’abord, supprimez le script ci-dessous de tous les blocs d’annonces existants.

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

Maintenant, il apparaîtra comme ceci

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

Ensuite, ajoutez ci-dessous le code JavaScript dans votre pied de page de thème, éventuellement juste avant la balise body.

Méthode 1. événement onload

Astuce : la balise Noptimize est présente pour rendre compatible avec Autoptimize . Cela empêchera l’agrégation de JS en ligne AdSense paresseux.

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

1. Code ci-dessus, vous pouvez utiliser via l’option Thème si disponible pour ajouter un script personnalisé
2. Pour Genesis, utilisez le  plugin Genesis Simple Hooks avec option genesis_after
3. ou plugin Header and Footer  pour tout autre thème.

Que fait exactement ce script ?

Ce script garantira que votre bloc d’annonces AdSense commencera à se charger et deviendra visible une fois le chargement complet de votre page Web principale terminé. C’est pourquoi je l’ai nommé, Lazy Loading pour Google AdSense.

Méthode 2. événement onscroll

Cette approche chargera le bloc d’annonces une fois que l’utilisateur aura fait défiler votre page Web.

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

J’espère que cela vous aidera à améliorer les performances de votre site.