Optimisez le chargement de vos pages en changeant votre code Analytics
Par Korben | Nb visites : 2 998
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.
<script type="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.
Je vous recommande aussi la lecture des sujets suivants
- Le code de Google Analytics a changé. Il faut mettre à jour vos sites…
- Des statistiques de téléchargement avec Google Analytics
- Iframe à la taille de son contenu
- Optimisez Google Analytics
- Voir les stats Google Analytics sur iPhone ou iPod Touch
- Google Page Speed – Benchmarkez vos pages web
- 9 bookmarklets Google indispensables
- Débugger avec IE
- Debugguez vos applications web sans Firebug
- Installer PubSubHubbub sur un blog wordpress
xbb
Intéressant. Il faut que je teste ça !!
Posté le 3 décembre 2009 à 13:39:22
toto
Ça fait déjà un petit temps que ça existe. C’est une copie (ou Yahoo! a copié) de Yslow qui s’intègre dans le plugin firebug.
Posté le 3 décembre 2009 à 13:51:11
lemulot
En parlant chargement … mais page sont plutot longue mais je remarque qu’il y a pas mal de « latence » (barre clair dans le developer tools de chrome)
Comment reduire cela ?
Posté le 3 décembre 2009 à 13:51:33
Julien
« Et où le placer ? Et bien juste avant la balise fermante </head> »
–> « avant la balise fermante </body> »
http://www.google.com/support/analytics/bin/answer.py?hl=fr&answer=55488
Posté le 3 décembre 2009 à 13:57:58
Flex
Quel peut être l’intérêt de remonter son code GG Analytics en haut de page ?
il est bien là , en bas, tout au chaud non ?
Posté le 3 décembre 2009 à 14:17:54
lemulot
@Flex: L’important ici est surtout le cote asynchrone .. du coups, oui la place n’a plus d’importance.
Cependant, je préfère dans le head, c’est une question d’organisation.
Posté le 3 décembre 2009 à 14:22:29
JS
Mouais, ok, c’est sympa, mais pour le coup, je ne vois pas vraiment l’intérêt.
Le code javascript de GA est déjà en bas de page, donc si il est correctement placé, il ne gênera pas le chargement de la page.
Par contre, les sites qui s’amusent avec jQuery ou autre et qui load le javascript en début de page parce qu’ils sont obligé, genre pour modifier le DOM, etc… ben là ça bloque le chargement tant que le javascript n’est pas chargé.
Donc pour ces cas là , faire de l’asynchrone serait une bonne idée…
Posté le 3 décembre 2009 à 14:28:49
Flex
@lemulot : merci pour cette réponse, je viens de gagner 5 minutes de taff, de quoi faire une micro-sieste vite fait ! ^^
Posté le 3 décembre 2009 à 14:35:10
Korben
@Julien: Si c’est pas le code asynchrone, oui c’est avant < / body>
Mais si c’est l’asynchrone, tu peux le mettre juste avant le < / head> car ça ne bloque plus le chargement
Posté le 3 décembre 2009 à 14:47:44
Decha
Merci pour l’info !
Je viens de l’installer sur certains de mes sites. Le point le plus intéressant est l’exécution éventuel d’autres scripts après celui-ci (jQuery dans mon cas) qui, auparavant, devait attendre l’exécution de Google Analytics.
La page s’affiche plus rapidement surtout sur ce vieux boussin d’IE6. C’est appréciable
Posté le 3 décembre 2009 à 15:08:09
Mute
L’intérêt de remonter le code analytics en haut de page est de doper (un peu) sa fréquentation. Car sur des pages longues, un visiteur peut quitter la page avant d’avoir atteint je javascript et il ne sera pas comptabilisé par google analytics. Pour les gros sites qui vendent de la pub, je pense que ça peut avoir une certaine importance de faire ce genre de manip.
Posté le 3 décembre 2009 à 15:10:12
Gonomo
Et l’option « defer » ne marcherait elle pas aussi pour le code GA ?
Posté le 3 décembre 2009 à 15:10:41
Semageek
Merci de l’info, je l’avait déjà vu circuler,
Mais c’est toi qui m’a décider à la mettre en place.
On va voir à la longue si c’est efficace…
Posté le 3 décembre 2009 à 15:22:43
cloud
Ah sympa. Merci pour l’info. En effet l’intérêt est pour les longues pages qui s’affichent qui peuvent être fermées avant le chargement complet.
Je test çà ce soir
Posté le 3 décembre 2009 à 15:39:21
http://bit.ly/6hEV6v
ici c’est pr peter les stats de l’analytics d’une fille http://bit.ly/6hEV6v
Posté le 3 décembre 2009 à 18:14:29
elban44
Merci pour la trouvaille Korben !
Tu as raison l’interface de YSlow est 100 fois plus agréable que celle de PageSpeed.
T’inquiète pas pour ta note, ce qui compte c’est que le haut du site apparaisse rapidement pour ne pas faire attendre le lecteur…
Posté le 3 décembre 2009 à 18:18:16
Greg
Bah non korben (lol) Meme si c’est de l’asynchrone, il faut quand meme le mettre en bas ! Les quelques ms que le scripts met a s’exécuté, il vaut mieux que ce soit a la fin et pas au debut … En gros : TOUT les JS en bas de page …
Posté le 3 décembre 2009 à 18:29:15
1ace
plus simple, pour ne pas avoir à modifier le code js (ou simplement quand on ne peut pas le modifier):
la balise (x)HTML <script> accepte plusieurs paramètres, dont un qui est peu utilisé: defer
<script type="text/javascript" defer="defer">
// votre js
</script>
quand le moteur du browser voit cette balise, il repousse l’execution du script en fin de chargement de la page
Posté le 3 décembre 2009 à 19:05:07
ZePRiNCE
Ouaip, mais quelques problemes avec Defer sous Firefox < 3.5
Posté le 3 décembre 2009 à 19:15:56
Mathieu
Ah ben ca tombe bien ce post, merci
je suis justement en train de les intégrer sur nos sites et sous joomla les temps d’affichage sont pas top chez nous. Cela vaudrait la peine qu’on teste cette version du code analytics.
Posté le 3 décembre 2009 à 20:26:44
Dga
L’un des gros plus c’est que le faite de la placer en haut permet d’avoir des résultat plus précis.
En bas de page il suffit que le site soit tellement lent à charger que pour le coup le code GA ne soit pas charger et donc aucune visite comptabilisé.
Posté le 3 décembre 2009 à 20:42:11
Yuxx
Merci, je viens de le placer sur mon blog !!
Posté le 3 décembre 2009 à 22:58:08
Wise
Quelqu’un ne connaitrait pas une astuce similaire pour Google Adsense par hasard, qui chez moi provoque un ralentissement du chargement de la page ?
Posté le 5 décembre 2009 à 08:50:57
Kapoue
Alors ? ca donne koi ?
Posté le 7 décembre 2009 à 11:05:39
Fanf
Oui, c’est vrai ça, ça donne quoi ?!
Posté le 16 décembre 2009 à 10:12:10
Greg
Même chose pour moi, j’aimerais bien que Google fasse de même pour les pubs adsense ! Quand je regarde ma waterfall, ce fichu javascript me bloque le chargement d’images…
Déjà tenté le defer, ça ne marche pas, la pub s’affiche en pied de page.
Chargement dynamique par javascript avec un ID marche pas non plus, restriction de fonction par google adsense.
Posté le 5 janvier 2010 à 22:41:00