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)

27 réponses pour Optimiser le chargement des AdSense

  1. patpro dit :

    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 :

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

  3. Palleas dit :

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

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

  4. […] Optimiser le chargement des AdSense […]

  5. […] 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 :

    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 :

    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 :

    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 :

    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 :

    Mais ce n’est pas interdit par Google ?

  11. Paul Poulet dit :

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

    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 :

    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 :

    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 :

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

  16. GTA Mania dit :

    Merci pour cette petite astuce. J’avais déjà essayer quelques astuces pour éviter que les pubs ne se chargent avant le contenu, mais je n’avais jamais pensé à les déplacer après chargement de la page ! Je vais donc de ce pas essayer ça en production pour juger des gains de temps :p

    D’une manière générale, je découvre ton blog et je le trouve très intéressant. Reader +1 :p

  17. Bonjour,

    J’ai voulu tester le script sur mon blog de test pour en connaître l’impact, mais cela ne fonctionne pas.

    En fait, cela marche parfaitement pour le 1er encart de publicité. Mais les suivants affichent le contenu du premier, au lieu d’afficher les contenus relatifs. Mon code est ainsi :

    Mes emplacements de pubs :

    1
    2
    
    <div id="ads-1" class="sidebar_pub"></div>
     ...

    Dans le footer : Le lien vers le Javascript donné dans l’article

    1
    2
    3
    4
    5
    6
    
    <div class="hide">
        <div id="adsref-1">Mon script Adsense</div>
        <div id="adsref-2">Mon script Adsense</div>
        <div id="adsref-3">Mon script Adsense</div>
        ...
    </div>

    Et j’ai bien ajouté le JavaScript tel quel.

    Où me suis-je trompé ? Merci d’avance pour vos réponses.

  18. Problème résolu : c’est parce que je travaillais sur mon thème avec l’extension “Theme Test Drive” de Wordpress, et que les javascripts d’Adsense ne comprenait pas le contenu de ma page (et donc tout plantait).

  19. piouPiouM dit :

    Super ! J’avais du mal a évaluer la source de ton problème, sachant que tu t’y étais bien pris :-) Merci pour le retour.

  20. Symfoniste dit :

    Merci pour ce script ;-)

    N’est-il finalement pas plus simple de mettre :

    GA_googleFillSlot(“pub_left_adsense”); document.getElementById(“ads-pub_left_adsense”).appendChild(document.getElementById(“adsref-pub_left_adsense”));

    à la place de la fonction javascript ?

    Cela a le mérite d’afficher immédiatement une pub quand elle est chargée…

  21. Mr.MoOx dit :

    Technique intéressante. J’ai un besoin de tester les adsenses en asynchrone sur un site à très fort trafic. Des retours à ce propos ? Y’a-t-il des affichages en plus comme l’a rapporté Johan ?

  22. Cédric dit :

    Bonsoir

    Pour ma part je suis confronté à un problème avec mon cache (j’ai testé plusieurs plugins sur WP, mais aucun ne convient parfaitement) dans la mesure où : - mes pubs sont intégrées DANS le contenu des articles - elles ne sont affichées que pour les visiteurs venant des moteurs OU sur les articles vieux de plus de 30 jours

    Dans le second cas, no soucie, mais dans le premier… l’affichage est mis en cache avec le reste de la page, et donc mon système ne FONCTIONNE PAS :-(

    Du coup j’ai désactivé le cache pour le contenu des articles (bof bof).

    J’ai donc pensé à un chargement “asynchrone” via JQuery, mais qui irait donc lire mon cookie (je crée un cookie d’une validité d’une heure pour chaque visiteur venant des moteurs) afin de déterminer s’il doit afficher ou pas les ADSense.

    Qu’en pensez-vous ?

    NB : je précise que mon site fait un certain trafic (>2000 VU/jour sur certaines périodes de l’année) et que je tiens donc à mon cache ;-)

  23. Limonads dit :

    Merci pour ce tuto, je vais le tester, voir ce que ça donne. ;-)

  24. […] Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery. […]

  25. uiop dit :

    Super merci,

    Je vais tester ca demain pour voir si je gagne en temps de chargement. Personnellement, j’aimerais mettre la pub dans un div qui affiche une image en grande resolution (un lightbox en quelque sorte) mais pour l’instant je n’y arrive pas.

  26. Mon problème demeure entre Chrome (pas les autres) et Adsense. Le délai est parfois invraissemblable. Adsense semble attendre l’affichage total de la page, c’est à dire l’exécution du body onload avant de fournir sa pub. Je l’ai essayé sousle body, puis dans un second body. C’est pareil. Le problème que je subis doit être tout autre.

    (Encore peu familier avec JQuery, j’utilise plutôt js et une référence getElementById(‘id’).innerHTML .)

  27. Louis dit :

    Excellent tutoriel

Ajouter un commentaire


Syndication

Réseaux sociaux