Accueil > WebMarketing > Webanalytics > Temps de chargement et Analytics

Temps de chargement et Analytics

Publié le 30 juin 2011 Webanalytics

Temps de chargement et Google AnalyticsAvec la nouvelle version de Google Analytics, on peut analyser le temps de chargement de son site Internet. En réalité, il existait déjà différents moyens pour mesurer la vitesse des pages, mais ils étaient plus complexe à mettre en place et les données récupérées étaient légèrement différentes.

Le problème, c'est que cette nouvelle fonctionnalité de Google Analytics est loin d'être parfaite...

Pourquoi mesurer le temps de chargement?

Depuis quelques temps déjà, Google indique qu'il prend en compte la vitesse comme un facteur pour le référencement naturel d'un site Internet. Même si je suis persuadé que cela est vrai, cela reste encore un critère secondaire pour votre positionnement (même s'il est probable que la rapidité d'un site va prendre de plus en plus d'importance).

Cet indicateur est en revanche crucial pour vos visiteurs et le ressenti qu'ils ont de votre site Internet : cela influe sur les ventes ou encore sur les prises de contact (cf. mon article sur le temps de chargement et ecommerce).

Cela nous donne donc deux bonnes raisons de s'attarder sur la question. Malheureusement, il faut pouvoir mesurer cette variable pour savoir sur quels éléments agir. Pour cela, vous avez déjà la possibilité d'utiliser des outils externes, comme ces 5 outils pour mesurer le temps de chargement. Mais cela reste insuffisant car ils ne vont mesurer la vitesse qu'à un instant T, depuis un lieu prédéfini, ce qui est loin d'être le cas de l'ensemble de vos visiteurs...

Grâce à Google Analytics, il existe deux solutions différentes et complémentaires pour mesurer cela.

TrackPageLoadTime

La première solution est également la plus récente et la plus simple à mettre en place. Il suffit d'ajouter une simple ligne à votre code de suivi Analytics pour mettre en place le suivi du temps de chargement.

_gaq.push(['_trackPageLoadTime']);

Il faut placer cette ligne juste après le traditionnel trackpageview, ce qui donne le code final suivant :


 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
 _gaq.push(['_trackPageview']);
 _gaq.push(['_trackPageLoadTime']);
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

Attention cependant, on ne peut avoir accès à ce rapport qu'avec la nouvelle version de Google Analytics (un lien permet d'y accéder en haut de page).

Google Analytics nouvelle version
Accédez à la nouvelle version d'Analytics

Vous aurez désormais accès à une rubrique "Vitesse du site" placé dans la section "Contenu".

Menu Vitesse de Google Analytics
Le menu "Vitesse"

Cette rubrique va vous donner des informations générales :

  • Temps de chargement moyen de la page (en l’occurrence du site)
  • Le nombre de pages vues
  • Exemples de chargement de page (c'est à dire le nombre de chargements utilisés pour calculer le temps moyen)
  • Le taux de rebond
  • Le pourcentage de sortie moyen des pages du site
Google Analytics : vitesse du site
La vitesse du site sur Google Analytics

On retrouve ensuite ces valeurs page par page. On peut donc connaître les pages qui posent problème et on pourra notamment établir (ou non) une corrélation entre le temps de chargement et le taux de rebond ou de sortie.

Vitesse par page dans Google Analytics
Analysez la vitesse de chaque page

Les données d'Analytics sur la vitesse d'un site peuvent ensuite être réutilisées dans d'autres rapports. Ceux en gras sont ceux que je juge particulièrement intéressants.

  • Par sources de trafic. Cela inclut le temps de chargement :
    • Par source
    • Par support
    • Par campagne
    • Par mot clé
  • Par type de visiteur (ce qui permet d'analyser le temps de chargement quand l'utilisateur a déjà mis en cache certaines données)
  • Par configuration utilisée (navigateur, système d'exploitation, ...)
  • Par origine géographique du visiteur (par ville, langue, continent ou encore par région)

On peut donc déceler les pages posant un réel problème, tout en analysant un temps de chargement global, ce qui est très pratique pour suivre l'évolution de celui-ci en fonction des modifications que l'on apporte à son site.

Le problème, c'est que cette nouvelle option de Google Analytics est incomplète et peut induire en erreur... Elle donne le temps de chargement global du site et le temps de chargement global d'une page. Mais parfois, un chargement peut prendre un temps fou, ce qui va fausser toutes les données. Par exemple :

  1. une page reçoit 40 visites, chacune ayant un temps de chargement de 2 ou 4 secondes. Cela fait donc un temps de chargement moyen de 3 secondes
  2. Imaginons maintenant que la 41ème visite prenne 50 secondes à charger.
  3. => Le temps de chargement moyen indiqué par Google Analytics sera de plus de 4 secondes...

On aurait pu également se dire que ce premier problème n'est pas grave, puisque plus on augmente le nombre d'analyses, plus on réduit la marge d'erreur, mais cela nous amène au second problème:

Les données ne sont pas récupérées sur l'ensemble des pages chargées. Google Analytics utilise en effet l'expression "Exemple de chargement de page". L'outil sélectionne donc de manière arbitraire certains chargements et en exclut d'autre, ce qui augmente encore la marge d'erreur de l'analyse. Je me retrouve ainsi avec des pages ayant des temps de chargement astronomiques, basés sur une seule visite... Sur mon compte, Google Analytics ne prend en compte que 0,52% de mes pages vues pour afficher la vitesse de mon site...

Temps de chargement avec le suivi d'évènements

La seconde solution est plus lourde, mais je la trouve beaucoup plus fiable. On va faire appel au suivi d'évènements et à l'ajout de deux codes javascripts qui vont permettre le suivi du temps de chargement de la page. La solution d'origine vient d'OptimisationBeacon.

Attention cependant, le défaut de la méthode est que le calcul n'est pas réalisé en seconde, mais en dixièmes de secondes (le suivi d'évènements de Google Analytics ne sait pas gérer les chiffres à virgules). Donc quand vous lirez 11, il faut comprendre 1,1 seconde.

Un nouveau profil

Commencez par créer un nouveau profil qui ne servira qu'à récupérer les données de vitesse. Je pars du principe que vous êtes sur la nouvelle version d'Analytics. Cliquez sur l'engrenage situé à droite de la page.

Les paramètres du nouveau Google Analytics
Les paramètres du nouveau Google Analytics

Sélectionnez votre compte, puis cliquez sur Nouveau Site Web.

L'ajout d'un nouveau site
L'ajout d'un nouveau site

Entrez les informations de votre domaine, puis récupérez le code Analytics UA-XXXXXXX-XX dont vous aurez besoin un peu plus loin. Vous aurez ainsi un compte distinct dédié à l'analyse du temps de chargement. Vous pouvez bien entendu le faire dans le profil principal mais j'ai toujours pris pour habitude de faire attention à avoir un profil vierge pour éviter toute erreur dans la manipulation des données.

Le Javascript

Ensuite, il va falloir ajouter quelques lignes de codes. La première ligne élément est à placer dans le header de votre page, juste après l'ouverture du <head>, afin de lancer le compteur :

var plstart = new Date();

Le second code doit être placé cette fois ci après le code habituel de Google Analytics (qui est présent soit dans votre header, soit dans votre footer). Pensez-juste à remplacer UA-XXXXXXX-XX par votre propre identifiant.


window.onload=function(){
 var plend=new Date();
 var plload=plend.getTime()-plstart.getTime();
 var plload2=Math.round(plload/100);
 if(plload<1000)lc="1 Tres rapide (-1s)";
 else if(plload<2000)lc="2 Rapide (-2s)";
 else if(plload<3000)lc="3 Normal (-3s)";
 else if(plload<5000)lc="4 Legerement lent (-5s)";
 else if(plload<8000)lc="5 Lent (-8s)";
 else lc="6 Tres lent (+8s)";
 var fn=document.location.pathname;
 if(document.location.search)fn+=document.location.search;
 try{
 _gaq.push(['loadTracker._setAccount','UA-XXXXXXX-XX']);
 _gaq.push(['loadTracker._trackEvent','Vitesse des pages','Temps, en dixième de seconde'+lc,fn,plload2]);
 _gaq.push(['loadTracker._trackPageview']);
 _gaq.push(['loadTracker._trackPageLoadTime']);}
 catch(err){}}

Un suivi efficace du temps de chargement

Comme indiqué, on va donc suivre la vitesse du site grâce au suivi d'évènement (dont je parlais déjà dans mon article sur les variables personnalisées de Google Analytics). Rendez-vous donc "Contenu" => "Évènements" => "Principaux Évènements", puis cliquez sur l'évènement "Page Load". Vous allez donc voir le nombre total de chargements selon chaque période définie dans le code donné précédemment.

Temps de chargement dans Analytics
Une autre version du temps de chargement dans Analytics

Le code actuel décompose les temps de chargement en plusieurs "tranches" :

  • Très rapide (moins de 1 seconde)
  • Rapide (moins de 2 secondes)
  • Normal (moins de 3 secondes)
  • Légèrement lent (moins de 5 secondes)
  • Lent (moins de 8 secondes)
  • Très lent (plus de 8 secondes)

Pour analyser une tranche supplémentaire, il suffit de modifier le code précédent en ajoutant une ligne supplémentaire selon ce format:

 else if (plload<XXX)lc = "W Normal (-YYYs)";
  • XXX correspond au temps de chargement en millièmes de secondes (1000 pour 1 seconde, 4500 pour 4,5 secondes, ...)
  • W est juste l'ordre dans lequel j'ai placé mes jalons. Ce sera utile pour un tri par ordre croissant de vitesse (et donc par ordre alphabétique d'action)
  • YYY est le temps de chargement en secondes.

Par exemple :

 else if (plload<12500)lc = "10 Très très lent (-12,5s)";

Temps de chargement du site

Grâce à ces différentes durées, on va donc pouvoir analyser de manière plus précise le temps de chargement global ainsi que celui de chaque page. Tout d'abord, changez l'affichage pour obtenir celui en pourcentage.

Affichage des données d'Analytics
Changez l'affichage des données d'Analytics

Vous aurez ainsi la répartition des visites par temps de chargement. Dans l'exemple ci-dessous, on observe donc que

  • 16% des visites sont très lentes à charger (+ de 8 secondes).
  • 9% des chargements sont à l'inverse très rapides (moins d'une seconde).
  • 52% des visites de SeoMix prennent moins de 3 secondes à charger entièrement.
La répartition des temps de chargement
La répartition des temps de chargement

Temps de chargement par URL

Vous pouvez ensuite obtenir ces données page par page dans Google Analytics. Pour cela, cliquez sur libellé d'évènement puis choissisez l'URL que vous voulez analyser.

Suivez les évènements selon le libellé
Suivez les évènements selon le libellé

Vous obtenez ainsi la liste des évènement de la page, et notamment le temps de chargement de celle-ci. Là aussi, la vision sous forme de graphique rend beaucoup plus lisible ces données.

Là où il vous faut être prudent, c'est que cette solution ne peut mesurer le temps de chargement complet d'une page, car le script utilisé par Google Analytics ne peut calculer le temps de réponse serveur. En effet, il ne commence à s'exécuter qu'à partir du début du chargement de la page par le visiteur, et non pas dès la demande de génération de la page. Toutes les optimisations liées au temps de calcul des pages (les requêtes PHP et SQL notamment) ne vont pas apparaître. On peut donc avoir un temps de chargement très court dans Analytics, alors que la page à mis 10 secondes à être calculée par le serveur...

La première solution permet normalement de mesurer cet aspect du temps de chargement, mais rappelez-vous que la marge d'erreur est forte.

Ce qu'Analytics ne peut mesurer

Malheureusement, les deux méthodes ne sont pas parfaites : la première est facile à mettre en place mais est trop incomplète pour pouvoir avoir une réelle analyse. La seconde est complexe à installer et un peu plus difficile à lire.

Attention : un autre aspect de la vitesse ne peut être mesuré. Il s'agit du ralentissement des pages lié au contenu. Si par exemple vous utilisez des vidéos, de l'audio, des CSS3 ou du javascript, cela va donner aux visiteurs une impression de lenteur, provoquant même des blocages sur certains ordinateurs : on ne parle donc plus de temps de chargement au sens propre, même si cela aura un impact direct sur le ressenti de la vitesse par les internautes... Pour cela, je vous conseille ces 4 outils pour mesurer la performance d'un site Internet.

Si je peux donner un conseil : il faut toujours réduire au maximum le temps de chargement de votre site Internet, que ce soit pour les visiteurs ou pour le référencement naturel. Et il vous faudra constamment tester avec différents outils qui possèdent chacun leurs propres atouts.

Daniel Roch CEO - Créateur de SEOMIX & SEOKEY

Expert SEO WordPress - Créateur de SeoMix et SEOKEY - Orateur - Auteur de nombreux livres sur le référencement naturel

17 Commentaires

Jean-Louis Bourghol Le 30 juin 2011 à 9h48

Et sinon on peut rien faire avec TimeTracker de Google Analytics ?
http://code.google.com/intl/fr/apis/analytics/docs/tracking/eventTrackerWrappers.html

On peut aussi optimiser l'appel JS du tag GA.js grâce au snippet expliqué ici :
http://mathiasbynens.be/notes/async-analytics-snippet

Il fait parti du template HTML5 Boilerplate.

Merci pour ce billet intéressant.

Johan Le 30 juin 2011 à 10h33

J'ai testé ce nouvel outil et je dois dire que je suis assez surpris par les mesures réalisées par le script GA et par le fait qu'il choisisse arbitrairement les pages qui sont mesurées...

Je testerai ta solution plus tard, merci !

Vince Le 30 juin 2011 à 11h10

Merci pour tes solutions : c'est un grand coup de main que tu donnes à un mauvais utilisateur d'Analytics comme moi. Tes indications vont me permettre de fouiller cet outil un peu plus et d'être plus performant.

Xavier Le 30 juin 2011 à 14h18

Pareillement, merci pour cet article très intéressant, la deuxième solution me semble plus pertinente, certes un peu plus compliquée à mettre en place mais rien d'impossible non plus ... plus qu'a attendre quelques jours pour récupérer les résultats et faire quelques analyses.

Jusqu’à présent pour voir le temps "constaté par Google" sur l'un de mes sites j'allais voir dans Google Webmaster Tools / Labo / Performances du site.

alex_penyauski Le 30 juin 2011 à 15h03

Daniel, si j'ai bien compris on aura 2 codes GA différents sur le site ? Le 1er est celui qui a été fournis lors de la création du site et le 2ème est celui du profil vierge. Right ?

Daniel Roch Le 30 juin 2011 à 15h25

@Alex : non, il n'y a qu'un code Analytics. Par contre, il y a deux trackers (deux trackPageview en l’occurrence).

alex_penyauski Le 30 juin 2011 à 15h36

D'accord. Mais si l'on crée un nouveau site comme tu l'as décrit on a un nouveau code GA. Pour chaque site, Google fournit un code. Du coup on a le code du site principal dans le tag GA et le code du site créé pour implémenter la solution présentée dans ton article.

Daniel Roch Le 30 juin 2011 à 15h56

En fait, il n'y a qu'un javascript chargé, mais deux trackers (donc deux codes GA) l'utilisent bel et bien. D'ailleurs, on n'est pas obligé de créer un nouveau profil. Cela me permet juste d'avoir un profil vierge non modifié par l'ensemble de mes scripts, y compris celui-ci sur le temps de chargement.

Davidseo Le 01 juillet 2011 à 11h46

Daniel, quel est ton retour sur cette méthode par rapport aux outils dispo sur le web ? Tu penses qu'il faut mieux utiliser celui-ci ? Un mix de tous plutôt ;)

Snipeo Le 01 juillet 2011 à 12h19

Le code de suivi avec la ligne _gaq.push(['_trackPageLoadTime']); deviendra surement natif à terme.
Même si d'après toi l'analyse n'est pas encore parfaite c'est dommage de passé à côté et merci pour ton intervention sur le sujet afin de m'éviter que ce soit le cas me concernant ;)

Daniel Roch Le 04 juillet 2011 à 10h15

@Davidseo : pour avoir testé conjointement les deux solutions, je constate qu'elles sont complémentaires et que les données varient. Par exemple, j'ai un temps moyen global de 10 secondes pour le trackpageloadtime et de plus de 11 avec l'autre.

Là où les données varient le plus est la décomposition page par page des temps de chargement, qui change du tout au tout en fonction de la solution choisie dans Google Analytics.

Nicolas Le 04 juillet 2011 à 17h03

Hum, pas mal ça comme petit tuto et c'est surtout bien utile...

Même si je n'aime pas forcément passer 3h à optimiser mon temps de chargement chaque semaine, l'aspect in-GA va me permettre de suivre le temps de chargement sans avoir à utiliser tes outils (qui plus est très bon) et avoir une vision globale rapidement.

Benoit Le 04 juillet 2011 à 21h15

Super Article, surtout pour la deuxième solution que je ne connaissais pas du tout. La première était déjà en place chez moi mais je vais rapidement tester la N°2
Merci !

BenoitBottle Le 05 juillet 2011 à 12h08

"Google Analytics ne prend en compte que 0,52% de mes pages vues pour afficher la vitesse de mon site"
Pour moi c'est moins de 0,2% des pages vues, la pertinence n'est pas vraiment là.

Merci pour la seconde solution qui va être plus intéressante.

@benoitbottle

Matthieu Le 21 août 2011 à 0h09

Article très intéressant, d'autant plus que Google prend de plus en plus en compte le temps de chargement des sites internet dans son algorithme.
Il y a fort à parier que Google l'implémentera d'ici peu directement dans son code de tracking comme pour le tracking des actions sociales.
Enfin il faut espérer.

Kevin Le 19 février 2014 à 10h27

Bonjour et merci pour cet article très très intéressant !
Vous auriez quelques éléments à nous donner afin d'entreprise une remise au goût du jour sur Analytics Universal (analytics.js) ?

Notamment ici :

_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
_gaq.push(['loadTracker._setAccount','UA-XXXXXXX-XX']);
_gaq.push(['loadTracker._trackEvent','Vitesse des pages','Temps, en dixième de seconde'+lc,fn,plload2]);
_gaq.push(['loadTracker._trackPageview']);
_gaq.push(['loadTracker._trackPageLoadTime']);

Par quoi remplacer ce lignes ?
Merci beaucoup encore.

    Daniel Roch Le 23 février 2014 à 19h05

    Je note cela et j'essaierai de faire une mise à jour dès que possible.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *