Entrez vos identifiants

x
OU
Vous avez oublié votre mot de passe ?
Utilisateur wiki : vous n'aviez pas d'email ?

Korben - Site d'actualité geek et tech

Go Top

Optimisez le chargement de vos pages en changeant votre code Analytics

capturezu3 Des statistiques de téléchargement avec Google 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.


Facebook Twitter Email Copier Url

26 Responses to “Optimisez le chargement de vos pages en changeant votre code Analytics”

  1. xbb dit :

    Intéressant. Il faut que je teste ça !!

  2. toto dit :

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

  3. lemulot dit :

    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 ?

  4. Julien dit :

    “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

  5. Flex dit :

    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 ? :-)

  6. lemulot dit :

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

  7. JS dit :

    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…

  8. Flex dit :

    @lemulot : merci pour cette réponse, je viens de gagner 5 minutes de taff, de quoi faire une micro-sieste vite fait ! ^^

  9. Korben dit :

    @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

  10. Decha dit :

    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 ;)

  11. Mute dit :

    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.

  12. Gonomo dit :

    Et l’option “defer” ne marcherait elle pas aussi pour le code GA ?

  13. Semageek dit :

    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…

  14. cloud dit :

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

  15. ici c’est pr peter les stats de l’analytics d’une fille http://bit.ly/6hEV6v

  16. elban44 dit :

    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…

  17. Greg dit :

    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 …

  18. 1ace dit :

    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 ;)

  19. ZePRiNCE dit :

    Ouaip, mais quelques problemes avec Defer sous Firefox < 3.5

  20. Mathieu dit :

    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.

  21. Dga dit :

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

  22. Yuxx dit :

    Merci, je viens de le placer sur mon blog !!

  23. Wise dit :

    Quelqu’un ne connaitrait pas une astuce similaire pour Google Adsense par hasard, qui chez moi provoque un ralentissement du chargement de la page ? :)

  24. Kapoue dit :

    Alors ? ca donne koi ?

  25. Fanf dit :

    Oui, c’est vrai ça, ça donne quoi ?!

  26. Greg dit :

    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.

La menace des failles 0-Day

capture-vjhj

"En avril 2014, les chercheurs en sécurité de Google sont tombé sur une vulnérabilité présente à l’intérieur de la bibliothèque cryptographique OpenSSL. Petit problème, OpenSSL est utilisé sur les 2/3 des sites web qui utilisent HTTPS mais aussi par les téléphones Android. Heartbleed était né."

Si comme moi vous êtes un passionné de sécurité informatique et que vous vous demandez qu'est-ce qu'un truc comme Heartbleed peut causer comme dommages, la lecture de cet article sur les failles 0-Day est pour vous...et je vous rassure je ne parle pas du dernier film Blackhat récemment vu au ciné ;)

Lire la suite

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :

Twitter Facebook Google Plus Linkedin email
Rejoignez les 55236 korbenautes
et réveillez le bidouilleur qui est en vous
abonnez-vous en savoir plus
"Vous aimez bidouiller ?" Oui j'adore l'informatique et la technologie
Suivez Korben Un jour ça vous sauvera la vie.. Ou celle d'un(e) ami(e)
  • Rejoignez les 55235 bidouilleurs de la grande famille des Korbenautes
    «Je considère que votre email est aussi important que le mien.»
    Korben
  •  
  • Site hébergé par
    Agarik Sponsor Korben
  • Univers Populaires

  • Rejoignez les 55235 bidouilleurs de la grande famille des Korbenautes
    «Je considère que votre email est aussi important que le mien.»
    Korben
  • Vidéos

  • DANS TON CHAT (BASHFR)

    Chman: après ca depend si tu veux un mac (ibook/PB) ou un PC
    NuXcLeAiRe: nan mais prendre un pc portable pour un pc portable, bon voilà quoi... nan sérieux je veux que quand je parte en vacances, je sois en vacances de windows aussi !

    -- http://danstonchat.com/187.html
  • Themes

  • Une astuce pour rendre

    Windows 10 plus rapide

    Si vous trouvez que Windows 10 est un peu lent, que vos applications ne se lancent pas très vite, que vos compilations prennent du temps, voici une petite astuce débusquée par Brominou pour accélérer le bouzin. Cliquez dans la zone de recherche de la barre Windows et tapez le mot clé...lire la suite

    Cryptool pour s'initier à la cryptographie

    Alors attention, ce n'est pas nouveau, mais je me suis dit que ce serait intéressant de vous en parler si vous ne connaissez pas encore. Cryptool est un logiciel open source éducatif qui va vous permettre de comprendre les principes de base de la cryptographie. Dans sa version 2, Cryptool intègre...lire la suite

    En ce moment dans l'univers "Windows"

    Voir tous les articles »