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.
6 commentaires
@Stéphanie 2021-01-07 13:27:55
Merci pour ce partage je trouve ça très intéressant ! J'ai essayé sur mon site mais pour le moment cela ne fonctionne pas. Je continue de chercher !
Petite question de compréhension : dans le cas de ta balise bancontent, le parent n'est pas footer, cela ne pose pas un souci ?
@p3x 2021-01-07 14:02:17
Bonjour Stéphanie,
Non ce n'est pas un problème car dans l'élément footer on ne place que l'appel au fichier adsbygoogle.js.
On aurait très bien pu appeler ce fichier dans n'importe quel autre élément html.
Il suffit donc d'appeler ce fichier une seule fois et c'est ensuite la ligne (adsbygoogle = window.adsbygoogle || []).push({}); qui chargera la ou les pubs.
Tu peux m'en dire plus concernant ton problème ?
D'autre part, j'ai fait plusieurs recherches concernant les règles de diffusion Adsense et je ne vois pas de restriction quant à cette technique. J'ai vu que le lazyload au scroll ne posait apparemment pas de problème.
Donc le mieux c'est peut-être de charger les pubs au scroll.
Ce qui donnerait en jQuery à la place des lignes 41,42,43 :
$(window).scroll(function(){ loadAds(); });
@Stéphanie 2021-01-07 21:04:35
J'ai positionné dans mon widget HTML personnalisé le code suivant :
<script>
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-moncodeclient';
var parent = document.getElementById('custom_html-15');
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, 'banfooter', 'moncodebanniere', 'auto', '', '', 'adsbygoogle');
}
$(window).scroll(function(){ loadAds(); });
</script>
<div id="banfooter"> </div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Mais la publicité ne s'affiche pas dans la sidebar
@Stéphanie 2021-01-08 13:39:53
J'ai réussi à faire fonctionner
J'ai renommé class en un autre nom moins anbigue
et j'ai corrigé la fin de ton code
window.addEventListener('load',function(){
setTimeout(loadAds(),1500);
}
Malheureusement je n'ai pas eu autant d'amélioration que toi à mon score ! Je vais continuer à creuser !! Merci quand même !
@p3x 2021-01-08 14:56:22
Ravi que tu ais pu trouver la solution.
Bonne continuation.
@Micka 2021-04-05 21:32:30
Bonjour je fais de la pub sur mon site mais je trouve le chargement assez lent par rapport à mes concurrents avez-vous un tips à me donner ?
Bonne journée à vous