Chargement pub Adsense lazyload : Eviter les erreurs PageSpeed Insights

Article ajouté le 07/12/2020

Chargement pub Adsense lazyload : Eviter les erreurs PageSpeed Insights

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.

5 commentaires

S

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

Répondre

p

@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(); });

Répondre

S

@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

Répondre

S

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

Répondre

p

@p3x 2021-01-08 14:56:22

Ravi que tu ais pu trouver la solution.
Bonne continuation.

Répondre

Poster un commentaire

Commentaire

Nom

Adresse e-mail

Votre adresse e-mail n'est pas publiée lorsque vous ajoutez un commentaire.
Tous les champs sont obligatoires pour soumettre votre commentaire.


Référencer son site Internet

Boostez votre audience de plusieurs manières : référencement naturel sur les moteurs de recherche, publicités et marketing, communication sur les réseaux sociaux, etc...

Augmentez rapidement vos visites sur votre site Internet en suivant mes conseils et placez-vous au dessus de vos concurrents dans les résultats de recherche.

Référencer un site