Optimiser le chargement des AdSense

Dans : Développement Web

11 mar 2010

Il n’y a rien de plus horripilant que d’attendre que des publicités chargent pour accéder au contenu d’un article. C’est malheureusement une situation que l’on rencontre fréquemment. La faute en incombe au fonctionnement des blocs AdSense des publicitaires.

En effet, ils nécessitent que nous insérerions le code correspondant à un bloc à l’endroit où il sera affiché. Cela pour deux raisons notamment :

  1. Des variables globales identifiants l’annonce sont déclarées.
  2. Le script qui va charger l’annonce est immédiatement exécuté et fait appel à des actions d’écriture dans le flux via write.

Le deuxième point oblige le navigateur à traiter le code de l’adsense dès qu’il le rencontre puisque ce dernier n’utilise pas de gestionnaire de chargement. En plus d’écrire dans le flux courant, le système du publicitaire va charger des éléments extérieurs. Pour peu que la latence des réponses soit élevée, l’impression de ralentissement du chargement de la page augmente.

S’est ainsi que si un article est précédé d’un encart publicitaire, l’utilisateur devra patiemment attendre le chargement de ce dernier avant de pouvoir accéder au contenu désiré.
L’expérience utilisateur s’en trouve dégradée.

En finir avec les ralentissements de chargement des pages

Vous l’aurez peut-être remarqué, mais sur piouPiouM’s dev, le chargement des blocs publicitaires est comme temporisé, ne gênant ainsi en rien la navigation sur le site.
Voyons dans la suite du billet comment y parvenir, en prenant pour exemple le service Google Adsense.

Intégration dans une maquette

On commence par définir les emplacements des encarts publicitaires. Cela vous permet ainsi d’intégrer les annonces dans vos maquettes HTML, tout en vous assurant que cette apparence sera conservée pour les utilisateurs n’ayant pas JavaScript d’activé, ou qui bloquent les annonces publicitaires.
Je prend ici le parti d’annoncer la couleur, en précisant la mention Publicité.

1
2
3

<div id="ads-[ads_id]" class="ads [ads_format]">
    Publicité
</div>

En sommes, il s’agit d’un simple élément <div> ayant pour attributs :

  • un identifiant [ads_id] : un identifiant unique qui va servir de point d’ancrage au contenu de l’adsense. Vous pouvez par exemple, dans le cas de Google Adsense, utiliser le nom du critère personnalisé en notation CamelCase.
  • une classe ads : le style des encarts de pub lorsque celles-ci sont en attente de chargement.
  • une classe [ads_format] : le format de l’encart publicitaire. Par exemple, square250 pour une annonce de 250px de côtés ou encore banner468 pour une bannière au format 468 x 60.

Appliquez les styles CSS qui suivent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* @group Tools */
 
.hide {
  display: none;
}
 
/* @end   Tools */
/* @group Adsense */
 
.ads {
  background-color: #F4F4F4;
  color: #666666;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}
.square250 {
  height: 250px;
  line-height: 250px;
  width: 250px;
}
.banner468 {
  height: 60px;
  line-height: 60px;
  width: 468px;
}
 
/* @end   Adsense */

Insertion du code de l’annonceur

Insérez en fin de page les différents codes donnés par votre annonceur (ici, Google Adsense).

1
2
3
4
5
6
7
8
9
10
11
12

<div class="hide">
    <!-- Ads -->
    <div id="adsref-[ads_id]">
        <script type="text/javascript">
google_ad_client = "pub-[client_id]";
google_ad_slot   = "[slot_id]";
google_ad_width  = 250;
google_ad_height = 250;
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>

Chaque annonce est incluse dans un élément ayant pour identifiant adsref-[ads_id] (voir Intégration de la maquette) qui fait le lien avec l’emplacement final de la publicité.

Le tout étant masqué à l’aide d’un div.hide. Il serait en effet désagréable d’afficher les annonces publicitaires en bas de page, même si ce n’est que pour une poignée de [micro]secondes.

Un Adsense Loader avec jQuery

Il ne reste plus qu’à déplacer à l’aide de JavaScript les blocs AdSense aux endroits souhaités. Avec jQuery cela donne :

1
2
3
4
5
6
7

$(function() {
    var $ads;
    $('div[id^="adsref-"]').each(function() {          // pour chaque bloc d'annonce #adsref-[ads_id]
        $ads = $('#ads-' + this.id.substr(7)).empty(); // supprimer de #ads-[ads_id] tout éventuel contenu
        $('ins:first', this).appendTo($ads);           // déplacer l'annonce dans #ads-[ads_id]
    });
});

Bien évidemment, et comme vous êtes sensible aux bonnes pratiques liées à la performance web, vous insérerez naturellement ce code en fin de page ;-)

publicité (chargement)

15 réponses pour Optimiser le chargement des AdSense

  1. patpro dit :
    11 mars 2010 à 19 h 10 min

    Sinon tu peux aussi désactiver Javascript, et là, ça charge vraiment bien :D (et moi j’ai viré les pub de mon blog, parce que vraiment, c’est n’importe quoi).

  2. piouPiouM dit :
    11 mars 2010 à 19 h 33 min

    Tu es médisant, je vais bientôt pouvoir m’acheter un café et une viennoiserie avec… =]

  3. Palleas dit :
    11 mars 2010 à 21 h 01 min

    Attends un peu, que tu puisses m’en offrir un aussi!

    (J’ai cliqué sur tes pubs, du coup!)

  4. BlOg'X Office 46 : petit medley du Web | Autour du Web dit :
    14 mars 2010 à 15 h 02 min

    […] Optimiser le chargement des AdSense […]

  5. Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery dit :
    16 mars 2010 à 8 h 58 min

    […] Optimiser le chargement des AdSense – J’ai eu la chance d’avoir l’explication IRL mais j’attendais avec impatience le billet de Mehdi pour vous en parler. Le principe consiste à réserver les emplacements des publicités là où vous voulez les afficher, de placer les scripts fournis par Google Adsense à la fin de votre page et d’ajouter une pincée de CSS et un soupçon de jQuery pour remettre chaque publicité à sa place quand la page est chargée. J’ai mis cette technique en place sur ce blog et sur css 4 design et ça marche niguel ghrome :D […]

  6. Nico dit :
    17 mars 2010 à 10 h 31 min

    Bonjour,

    Très bonne présentation de cette astuce indispensable quand on insère des pubs dans un doc HTML. Juste un petit bémol à mon goût : la solution présentée est spécifique Google AdSense.

    Pourtant il en faut très peu pour rendre la solution un peu plus universelle : Au lieu d’aller chercher une balise INS dans le contenu de la pub généré par Google Adsense, on peu simplement récupérer tout le contenu du div “adsref”, à l’excéption des balises script. Du coup, il y a plus de chance que ça marche avec d’autres régies de pub.

    1
2
3
4
5
6
7
8
9
10
11
12

    $(function() {
    $('div[id^="adsref-"]')
        .each(function() {                  // pour chaque bloc d'annonce #adsref-[ads_id]
            $('#ads-' + this.id.substr(7))  // On récupère le bloc de destination de la pub
                .empty()                    // On le vide
                .append(
                    $(this)                 // On lui inject le contenu de la zone adsref, sauf les balises script
                        .contents()
                            .not('script')
                );
        });
});
  7. Johan BLEUZEN dit :
    23 mars 2010 à 11 h 24 min

    Bonjour, Je ne suis pas un pro de la pub, donc je ne connais pas toutes les arcanes. Nous avons testé une solution similaire sur un site à forte audience. En gros, on utilise une div de chargement (avec display:hidden) qui contient le script qui récupère la pub puis nous déplacons la pub vers la div finale de la pub.

    Seul problème, nous avons constaté une augmentation du nombres d’affichage des publicités de 50%…

    Ma question, est ce que tu as constaté une augmentation quelconque avec cette solution ? Merci !

  8. piouPiouM dit :
    23 mars 2010 à 11 h 41 min

    Bonjour Johan, Jusqu’à présent je n’ai pas relevé un tel comportement. Mais il faudrait tester sur un site à fort trafic, ce qui n’est pas le cas avec ce site. Si tu as la possibilité de me faire un retour d’expérience d’utilisation de cette solution je suis preneur !

  9. Johan BLEUZEN dit :
    1 avril 2010 à 21 h 12 min

    Malheureusement, je ne pourrais pas tester cette solution avant un certain temps… Mais je la garde dans un coin de ma mémoire…

    Et désolé pour la réponse tardive !

  10. dontpanik dit :
    25 avril 2010 à 5 h 14 min

    Mais ce n’est pas interdit par Google ?

  11. Paul Poulet dit :
    31 mai 2010 à 13 h 33 min

    @dontpanik > “Mais ce n’est pas interdit par Google ?” > J’espère que les CGU permettent au moins de faire cela. Un retour d’expérience ?

  12. Edo dit :
    16 juin 2010 à 16 h 07 min

    Idée intéressante. Je pensais que le contenu des annonces Adsense était contextualisé en fonction du texte situé autour de leurs emplacements. Par exemple les annonces sont ciblées en fonction du paragraphe dans lequel elles sont insérées. C’est pas du tout gênant pour ton blog, mais dans d’autres design de sites (par exemple si les Adsense sont placées dans le corps du texte), tu prends pas le risque de perdre le bénéfice de cette technologie et voir tes annonces perdre en pertinence ? Qu’en penses-tu ?

  13. piouPiouM dit :
    16 juin 2010 à 17 h 09 min

    Ce n’est absolument pas préjudiciable dans la mesure où tu peux baliser les sections à cibler pour la correspondance des annonces ;-)

  14. Kiwitic dit :
    24 juin 2010 à 16 h 23 min

    Bonjour,

    J’ai également suivi ton conseil pour plusieurs sites que j’édite et le résultat est plutôt bon en gain de temps. A voir pour le ciblage également.

    Loïc

  15. Ciarán dit :
    22 juillet 2010 à 10 h 34 min

    “You may have noticed, but piouPiouM dev’s, the loading blocks advertising is like delay” from what I can see the absence doesn’t load at all for me. Could be google translate though or maybe there are no ad’s to serve.

    Interesting post anyway I think I might do this with a few of my websites. When I get a spare minute.

Ajouter un commentaire

Recherche
publicité (chargement)

Syndication

Réseaux sociaux

Le thème Compositio est créé par : Design Disease acheté pour vous par PremiumThemes.com – Traduction française piouPiouM.fr.