Optimiser l’affichage de pages avec Google Adsense

Les pages Web contenant des publicités Google Adsense sont nettement plus lentes à charger que les pages qui n’en contiennent pas: c’est à cause de la méthode de chargement des publicités et de leur place dans la page. En général, les publicités se trouvent dans l’en-tête et/ou dans le menu vertical, elles sont donc chargées avant le corps de page.

Le problème

Le code fourni par Google pour afficher ses publicités est le suivant (avec des variables différentes):

Or, lors du chargement d’un fichier JavaScript, le moteur de rendu du navigateur est arrêté et le chargement de tous les éléments autres est suspendu. Par conséquent, le navigateur doit attendre que la page externe finisse de charger avant même de continuer à charger les autres éléments internes de la page Web. Ainsi, la page est nettement plus longue à charger et le ressenti utilisateur est plus mauvais…

La solution

La solution est très simple: on charge la publicité dans un div en bas de page – ici le moteur de rendu a déjà modéliser la page – et à un nouveau grâce à du JavaScript, de replace la publicité à l’endroit prévu.

Plus concrètement, à l’endroit où vous souhaitez intégrer la publicité Google Adsense, créez un div vide, d’un id spécial en spécifiant bien les tailles. Par exemple:

Ensuite, avant la balise de fin de page </body>, créez un div d’un id particulier contenant le code JavaScript de Google Adsense, comme ceci:

Pour finir, en bas de page, ajoutez ce simple code JavaScript pour placer la publicité au bon endroit:

Note: il est important de préciser le display: block; dans le loader et le height dans le div qui contiendra la publicité pour permettre au moteur de rendu de pré-charger la page.

La solution n’est donc pas vraiment une solution de code JavaScript non-bloquant, mais tout simplement de mettre le JavaScript en fin de page, permettant le rendu simple. Voici une preuve vous permettant de vous rendre compte, nombres à l’appui, que cette technique marche effectivement. 😉

facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">