16/03/10

Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery

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



11 commentaires pour “Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery”

  1. jpvincent dit :

    yes, c’est pas mal pour différer le chargement d’adsense et donc d’accélérer le rendu pour l’utilisateur.

    ça serait parfait si on pouvait appliquer la même technique à toutes les publicités, on avait essayé il y a quelques années sur un site grand public et la réalité nous a vite rattrapé : les perfs étaient excellentes, mais certaines pubs ne le permettent pas (les expandables par exemple) et les commerciaux et annonceurs n’étaient pas d’accord avec cette solution qui faisait que la pub apparaissait bien après le contenu (normal, il s’affichait vite lui, pas les pubs)

  2. pagetronic dit :

    moi j’aurai tendance à faire l’inverse mais c’est pas possible :)

  3. LebossTom dit :

    Si vous n’utilisez pas déjà jquery (oui oui ça existe :p) c’est pas top, ça serait dommage de rajouter un gros js, pour améliorer la vitesse de chargement d’un élément qui se charge tout de même assez vite (les perf des serveurs de GG sont assez bonnes ^^), et puis adsense génère des iframes donc ce n’est pas vraiment critique comme opti.

  4. Arnaud dit :

    Salut, c’est bien mais Adsense utilise le texte autour pour contextualiser ses pubs. placer les codes en bas de page limite ctte contextualisation. C’est peut être une fausse bonne idée car les perfs des annonces risquent de baisser

  5. PlanRencontre dit :

    A priori, on peut aussi le faire pour d’autre widget et contenu de site tiers qui ralentisse les pages (TimeLine twitters,…) ?

  6. Bruno Bichet dit :

    @jpvincent, @pagetronic — oui, je comprends que les services commerciaux aient tendance à vouloir l’inverse. Après, si vraiment la publicité met trop de temps pour s’afficher, c’est que le problème est ailleurs. Pour ma part, j’ai eu du mal à apercevoir l’image de loading pour m’assurer que tout fonctionnait ;)

    @LebossTom — Je ne suis pas vraiment spécialiste de Javascript, mais l’adaptation du code jQuery ne devrait pas aboutir à un gros JS ;) Les perfs des serveurs de Google sont bonnes, mais ça ne le met pas à l’abri d’un engorgement du réseau (en attendant que le réseau appartienne à Google, bien sûr).

    @Arnaud — J’ignorais que le texte autour de la pub était pris en compte. je pensais que Google se faisait une idée de la page dans son ensemble pour l’affichage des publicité.

    Ceci dit, rien n’empêche de mettre du texte optimiser pour GG en bas de la page… Bon, ok, en display: none ou text-indent: -9999px, ça sent un peu le cloaking ^_^v

    En ce qui concerne les perfs des annonces, c’est effectivement quelque chose qu’il serait intéressant de tester en mettant une fois sur deux le code adsense en bas de la page ou à l’emplacement d’affichage.

  7. Bruno Bichet dit :

    @PlanRencontre — oui, bien sûr, on peut utiliser cette technique pour différer tout type de contenu (script, visuels, etc.)

  8. Guy dit :

    Bonjour,

    Mettre les annonces Google Adsense en bas de page ??!! et du coup, elles ne sont plus aussi visibles alors ça risque de diminuer fortement le CTR de la page !

    Je ne prendrais pas ce risque …

  9. Bruno Bichet dit :

    @Guy — « Le principe consiste à réserver les emplacements des publicités là où vous voulez les afficher »

    Seuls les scripts sont situés en bas de page ; les pub s’affichent là où tu le veux ;)

  10. piouPiouM dit :

    @bruno merci pour le billet ;-)

    @LebossTom pour ce qui est de la dépendance jQuery, j’éditerai le billet pour ajouter une version en JavaScript natif. Pour en revenir aux performances, le navigateur attendra le chargement de pouvoir contacter la source de l’iframe avant de passer à la suite. Tu peux vite te prendre une dizaine de secondes (minute déjà constaté) dans les dents si tu cumules des latences de connexion pour joindre le service d’ad puis une autre pour atteindre la publicité.

    @Arnaud Pas vraiment. Adsence dispose de bots qui vont analyser l’intégralité de la page et non le texte environnent. Le service de Google permet même de cibler le contenu à l’aide de sections pour gagner en pertinence.

  11. [...] Perfs : accélérer le rendu de ses page en différant l’appel à adSense plus loin dans la page puis en déplaçant le contenu. C’est une vieille technique mais il est toujours bon de la connaître. Par contre pour l’avoir appliqué puis retiré il y a plusieurs années sur un site grand public, je peux vous en dire les limitations : cela ne marche pas avec certaines publicités (expandable, mal codées…) et ni le service commercial ni les annonceurs ne sont d’accord pour voir leur publicité s’afficher plusieurs secondes après le contenu, préférant voir le browser freezer avec une partie du contenu et un peu de pub. (via js4design) [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »

Subscribe without commenting