Optimisez le chargement de vos pages en changeant votre code Analytics

Le souci avec les appels javascript, c’est que pendant que le browser l’exécute, il ne se passe rien d’autre… Du coup, si votre javascript est lourd et que vous l’avez placé en début de page, cette dernière mettra du temps à apparaitre, devant attendre que le JS se soit complétement exécuté.

Jusqu’à maintenant, une règle de base de l’optimisation est donc de placer ses javascripts le plus en bas de ses pages HTML, c’est à dire juste avant la balise fermante </body> pour que tout le contenu d’une page ai le temps de se charger sans être bloquée par le code javascript.

Et si je vous raconte tout ça, c’est parce que Google, dans sa volonté d’accélérer le chargement du web, a publié dans sa doc, un petit bout de code qui permet d’appeller vos stats analytics de manière asynchrone, c’est à dire sans bloquer le navigateur. Pour cela, il suffit de remplacer votre code analytics par celui-ci, en prenant soin de bien changer le code UA-XXXXX-X par le votre.

<scripttype="text/javascript">

  var _gaq = _gaq ||[];
  _gaq.push(['_setAccount','UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function(){
    var ga = document.createElement('script');
    ga.src =('https:'== document.location.protocol ?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
    ga.setAttribute('async','true');
    document.documentElement.firstChild.appendChild(ga);
  })();</script>

Et où le placer ? Et bien juste avant la balise fermante </head> par exemple, puisque là, ça ne bloquera plus le chargement des pages. Donc vous pouvez vous permettre de le remonter dans vos pages.

Je l’ai mis en place sur Korben.info, on verra sur le long terme.

Edit : et j’ai appris ce matin dans le métro, via Philippe que Google avait rajouté un outil dans Webmaster Tools qui permet de voir où on se situe en terme de vitesse de chargement de son site…(Dans l’onglet Labs) avec le lien qui va bien vers son plugin Firefox PageSpeed.