Temps de chargement et Analytics

Avec 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).

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

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

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.

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.

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

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.

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.

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.

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.

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.