Chargement pub Adsense lazyload : Eviter les erreurs PageSpeed Insights
Article ajouté le 07/12/2020
MAJ 2022 : Avant de continuer à lire l'article
Ayant été depuis longtemps sur Adsense, j'ai décidé d'essayer une autre solution et aujourd'hui mes performances et mes revenus ont considérablement augmentés depuis. Je vous conseille vivement de lire cet article : Ezoic vs Adsense : Comparaison de revenus, une alternative à Google Adsense ?
Aujourd'hui je vous parle d'un problème que beaucoup se pose et qui s'avère difficile à résoudre car on trouve peu de source à ce sujet. Il s'agit de charger proprement sa pub Adsense sans que cela n'interfère avec le chargement de sa page.
En effet, quand on ajoute de la publicité Google Adsense sur son site en utilisant les bouts de code fournis, le chargement du site devient plus lent et quand on veut faire un test d'optimisation avec Google PageSpeed Insights par exemple, on remarque que la pub Adsense a un fort impact sur le chargement de notre page. Voici le type de message qu'on peut retrouver sur PageSpeed Insights :
- Supprimez les ressources JavaScript inutilisées
- Réduire l'impact du code tiers - Le thread principal a été bloqué par du code tiers pendant X ms voir X sec.
- Réduisez le travail du thread principal
- Évitez document.write()
- Réduisez le temps d'exécution de JavaScript
Pour ma part, je me suis déjà retrouvé plusieurs fois dans ce cas pour l'un de mes sites ou le site d'un de mes clients. Ils sont pas cool chez Google, ils nous donnent du code pour mettre en place des bannières de pub mais on s'aperçoit que celui-ci n'est pas optimisé quand on le check avec leur propre outil d'optimisation.
Bref, j'ai longuement cherché une solution pour pour pallier à ce problème. En regardant la doc de Google, on nous explique qu'on peut simplement charger le script en asynchrone en ajoutant "async" sur notre balise script. J'ai beau essayer de mon côté, ça ne change rien...
Je me suis donc dis qu'en créant un script permettant de charger le JS Adsense en lazyload ou encore par temporisation et tout ça après le chargement du document serait l'idéal.
Ci-après vous trouverez la solution qui vous permettra d'en finir avec vos erreurs PageSpeed Insights. Pour info, la première fois que j'ai mis ce petit bout de code en place, je suis passé d'un score de 51/100 à 99/100 en mobile et de 95/100 à 100/100 en ordinateur sur PageSpeed Insights.
Le code JavaScript de chargement des pubs
function createAdsElement(clientID, elementID, adUnitID, format, layoutKey, responsive, class)
{
var parent = document.getElementById(elementID);
if(parent!=null)
{
var ele = document.createElement('ins');
ele.style.display = 'block';
ele.className = class;
ele.setAttribute('data-ad-client', clientID);
ele.setAttribute('data-ad-slot', adUnitID);
if(format!=''){ ele.setAttribute('data-ad-format', format); }
if(layoutKey!=''){ ele.setAttribute('data-ad-layout-key', layoutKey); }
if(responsive!=''){ ele.setAttribute('data-full-width-responsive', responsive); }
parent.appendChild(ele);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
function loadAds()
{
var clientID = 'ca-pub-XXXXXXXXXXXXXXX';
var parent = document.getElementById('footer');
var ele = document.createElement('script');
ele.setAttribute('data-ad-client', clientID);
ele.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
ele.async=1;
parent.appendChild(ele);
(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
createAdsElement(clientID, 'bancontent', 'XXXXXXXXXXXXXXX', '', '', '', 'adsbygoogle');
createAdsElement(clientID, 'banfooter', 'XXXXXXXXXXXXXXX', 'auto', '', 'true', 'adsbygoogle');
}
window.addEventListener('load',function(event){
setTimeout('loadAds()',1500);
});
Le code HTML de vos pubs
<html>
<body>
<div id="bancontent"></div>
<footer id="footer">
<div id="banfooter"></div>
</footer>
</body>
</html>
Petites explications
Le principe est très simple :
- Nous avons tout d'abord une fonction principale loadAds dans laquelle il faut définir la variable clientID en remplaçant les X par votre identifiant Adsense.
- Juste en dessous de cette variable, vous pouvez remplacer le "footer" par l'identifiant de l'élément HTML dans lequel vous souhaitez que le javascript adsbygoogle.js soit généré.
- Enfin, un peu plus bas vous trouverez deux appels à la fonction createAdsElement qui permet de générer les publicités où bon vous semble.
La fonction createAdsElement prend plusieurs paramètres :
- clientID est votre identifiant Adsense
- elementID est l'identifiant de l'élément HTML dans lequel vous souhaitez que votre bannière soit générée
- adUnitID est l'identifiant de la bannière Adsense
- format est la valeur data-ad-format de la bannière (Celle-ci peut être vide)
- layoutKey est la valeur data-ad-layout-key de la bannière (Celle-ci peut être vide)
- responsive est la valeur data-full-width-responsive de la bannière (Celle-ci peut être vide)
- class est la valeur de classe de la bannière ("adsbygoogle" étant la classe utilisée sur les bannières Adsense). Vous pouvez en ajouter une personnalisée si vous le souhaitez : "adsbygoogle customClass".
Enfin, on retrouve la méthode de chargement de la publicité avec un setTimeout à 1,5 secondes. Vous pouvez bien évidemment modifier ce timer à votre guise.
Mais vous pouvez aussi appeler la fonction loadAds au scroll de la page. Les bannières seront alors chargées en lazyload.
Voilà c'est à vous de jouer, n'hésitez pas à me laisser un petit commentaire.