De la mesure des temps de chargement

Par  le 22 février 2012 - 19:32 dans

Si l’optimisation des temps de chargement est un sujet qui comme moi vous passionne ou dans une moindre mesure vous intéresse, vous avez sûrement été confronté à une problématique centrale : Comment mesurer efficacement la vitesse de votre site, quels KPIs pouvez-vous y associer et avec quels outils peuvent-ils être suivis ? Autant de questions qui méritent que nous y consacrions un article.

Mesurer la vitesse

Lorsqu’on parle de temps de chargement le spectre est assez large, le temps de chargement perçu par les internautes peut-être très variable selon que votre internaute consulte telle ou telle page qu’il utilise tel ou tel navigateur, qu’il se connecte pour la première fois sur votre site ou s’il possède déjà des éléments dans le cache de son navigateur, qu’il se connecte depuis une ligne ADSL, ou en 3G, que son appareil soit un portable relié à un hotspot wifi ou un ordinateur en ethernet. La diversité des supports et des environnements fait de la mesure du temps de chargement une discipline complexe.

Si nous analysons la mesure de la vitesse de façon plus pragmatique nous nous arrêterons sur deux types de mesure :

La mesure synthétique qui vise à réaliser ou simuler un test de chargement sur un navigateur, cette mesure peut-être scriptée, pour reproduire une action spécifique de l’utilisateur, un chemin de naviguation spécifique par exemple. L’avantage principal de cette mesure est qu’elle permet de réaliser des tests à périmètre constant sur un environnement donné.

La mesure du temps de chargement réel des utilisateurs ou surveillance passive, qui permet d’observer tout ou partie (idéalement un échantillon représentatif) de ses internautes vise quant à elle à étudier le temps de chargement effectifs des visiteurs, s’il n’est pas évident d’en tirer des enseignements au vu de la diversité des équipements c’est un approche qui a le mérite d’évaluer les performances effectives.

KPIs de la vitesse

  • Le Time To First Byte (TTFB) : ou premier octet reçu par le navigateur, on associe généralement cette donnée à la performance du back-end, c’est à dire la vitesse à laquelle le serveur renvoit le premier octet de donnée.
  • Le Start Render : correspond au moment ou les premiers éléments de la page apparaîssent à l’écran. Nous quittons alors l’état de page blanche désespérément vide que les anglophones, par analogie au BSoD, le fameux écran bleu de windows, nomme the White Screen of Death, lorsque cet état a tendance à s’éterniser. Le Start Render a un effet considérable sur la vitesse perçue. Travailler ses pages pour obtenir un rendu de qualité progressif permet d’améliorer fortement la sensation de vitesse de l’internaute.
  • Le LoadEvent : C’est au début de l’évènement Load que la mesure du temps de chargement est réalisée.
  • Fully Loaded : Onload + 2sec d’inactivité
  • Above-the-fold render time (AFT) : correspond au moment ou l’intégralité de la partie visible de la page (ou premier scroll) est chargée.

Le système de mesure le plus communément utilisé correspond à la norme « Navigation Timing » tel que définie par le W3C. On obtient alors le temps de chargement de la page en faisant : (LoadEventStart – Navigation start), seul couac cette solution n’est embarquée que dans les navigateurs récents, or ce sont les vieux navigateurs qui sont les plus lents et pour lesquels la marge de progression est souvent la plus importante.
Navigation Timing

Monitoring Synthétique

Le monitoring synthétique donne une analyse des plus complètes, il constitue une source d’information riche pour qui souhaite réaliser des tests et une excellente base de travail pour réaliser des optimisations.

L’outil d’analyse synthétique gratuit le plus efficace est sans conteste WebpageTest.org qui permet de réaliser des tests depuis divers emplacements géographiques (dont Paris) et depuis différents navigateurs.

Monitoring Passif

La mesure passive, de part sa nature très hétérogène, introduit d’énormes variations rendant complexe sa lecture d’un point de vu micro mais reste indispensable pour avoir un curseur permettant de piloter la performance d’un point de vu macro. Vous l’ignorez peut-être pas mais si vous êtes utilisateur de Google Analytics, le monitoring passif des temps de chargement de votre site est déjà activé!
Mesure WebPerf

Vitesse de site dans Google Analytics

En effet l’onglet Site Speed (ou Vitesse de Site) dans Google Analytics est actif par défaut sur tous les comptes depuis mi-novembre, Analytics réalise des mesures sur en principe 1% du trafic (dans les faits l’échantillon est souvent inférieur). Ces données sont très intéressantes a fortiori si vous observez leurs évolutions. Toutefois Analytics est un outil jeune de la mesure de la performance et il a connu quelques difficultés lors de son lancement : notamment quand on observe les résultats temps obtenus via Internet Explorer dans ses versions 8 et inférieurs. En effet les informations sont récoltés via la Google toolbar or la méthode de mesure est forcément différente de la norme « Navigation Timing » qui n’est pas implémentée sur ces vieux navigateurs. De plus les résultats d’IE8 semblent un peu trop optimistes pour être crédible, enfin les données recoltées via Firefox sur les versions 7 et 8 ne sont pas viables, un bug décalant le chrono n’a été corrigé que depuis la version 9 du navigateur de Mozilla.

Performance du site dans les Google Webmasters Tools

Le laboratoire des GWT affiche depuis décembre 2009 une courbe représentant la vitesse mesurée des sites via les outils tiers de Google à savoir la Google Toolbar avec la mesure du pagerank activée, or depuis le lancement de son navigateur Chrome, et l’apparition des boites de recherche intégrées en natif sur les navigateurs récents, la Toolbar de Google est moins utilisée, et se retrouve essentiellement sur les vieux navigateurs IE7 et IE8. Les chiffres ainsi obtenus sont donc issus des navigateurs les plus lents du marché. De plus Il n’y a pas de possibilité de filtrage et d’analyse puisque les données concernant la périodicité se limitent au graphique. Finalement l’information la plus intéressante consiste en l’évaluation comparative de la vitesse du site par rapport à la concurrence.

Les deux types de monitoring actif et passif sont complémentaires. Par prudence, lorsque vous réalisez du monitoring synthétique multipliez les points de mesure et diversifiez vos environnements de test!

4 Trackbacks

Par La veille du week-end (vingt-cinquième) | LoïcG  le 24 février 2012

[...] Pour ceux qui l’ont loupé hier : De la mesure des temps de chargement : via @5eg [...]

Par RESONEO présent au SEO Campus 2012 - RESONEO  le 5 mars 2012

[...] que pour cela, ça vaut le coup de venir ! N’hésitez pas à (re)lire son article sur les KPIs WebPerf pour avoir les bonnes bases en [...]

Par Il n'y a pas qu'Apache comme serveur web dans la vie - RESONEO  le 13 mars 2012

[...] (excellents) billets du blog RESONEO, vous êtes-vous déjà penchés en profondeur sur la mesure du temps de chargement de votre site sous un autre serveur web ? Qu’utilisent les gros sites ? Sont-ils tous sous Apache ? [...]

Par seo camp'us 2012 : nous y étions  le 19 mars 2012

[...] des pages web, par Julien Coulon de Cedexis et Thomas Soudaz, dont vous avez pu profiter des conseils avisés sur notre blog. Les conférenciers ont voulu démontrer que l’optimisation du temps de chargement [...]

Ajouter le votre
26 commentaires
Fanny Sylvestre 22 février 2012 - 19:54 - Répondre

Belle synthèse sur la vitesse, même si le billet est consacré à l’observation visiblement, quelques conseils peut être en fin d’article pour optimiser cette vitesse ou quelques liens utiles vers des conseils éventuellement ?

Cache navigateur, cache images, poids des images, js, regroupement css et js, images sur sous-domaine, etc… ?

Si certaines personnes ne savent pas du tout quoi faire… ça pourrait leur être utile !

Merci pour ce beau billet en tout cas qui nous rappelle la complexité et la diversité de tout ce qui influe sur la vitesse d’un site.

ou 24 février 2012 - 0:30 - Répondre

ou gtmetrix.com

Grym - annonce legale 24 février 2012 - 12:59 - Répondre

Dans le même genre et plutôt sympa, tools.pingdom.com .
Il reprends également le scoring de speed (l’exension liée à firebug) et permet d’avoir un rendu plus visuel et surtout indique le nombre de requêtes générées, le temps de chargement de la page ainsi que le poids de la page en question.
L’onglet performance grade donne de bonnes pistes d’amélioration de la page également et il y a également un historique pour la page testée : vous y retrouverez les variations constatées dans le temps.

Nils 22 février 2012 - 23:43 - Répondre

Article intéressant, merci. Pour mesurer la vitesse de chargement de son site (deux méthodes différentes), on pourra également consulter cet article : http://www.seomix.fr/temps-chargement-analytics/

Gwardenn 22 février 2012 - 23:51 - Répondre

Un très bon article expliquant plusieurs façon de monitorer ce fameux temps de chargement.
Fanny a raison, des bonnes pratiques seraient les bienvenues, surtout venant d’un spécialiste comme toi.
ps : parle de champagne à Olivier. ;)

Seg 23 février 2012 - 0:03 - Répondre

@Thomas : n’écoute pas Aurélien, il a trop bu ^^

JulienC 23 février 2012 - 9:00 - Répondre

Merci pour ces éléments THomas :)

Et le temps de chargement Googlebot ? La donnée historiquement remontée dans GWT, elle correspond plutôt à l’envoi du premier octet de la page, au téléchargement complet de l’HTML de la page, à la résolution DNS ?

Merci :)

Linux 23 février 2012 - 10:24 - Répondre

Bonjour,
Un outil à connaitre pour de la mesure de perfs, c’est cedexis.com
Ses radars permettent des relevés t qui proviennent directement des internautes. Donc par FAI / pays …
absolument génial. ;)

Evenstood 23 février 2012 - 10:41 - Répondre

Hehe très bon ce genre d’article thématique sur les KPI.

J’ai vu, j’ai lu et j’ai appris, moi qui ne suis pas un féru de l’optimisation du temps de chargement, c’est plutôt intéressant au moins d’analyser si je suis dans le mur ou pas ;)

Aurélien 23 février 2012 - 11:08 - Répondre

Superbe article.

Merci beaucoup

Sébastien 23 février 2012 - 11:10 - Répondre

Quand on voit les impacts positifs de travailler sa performance pour une boutique e-commerce, c’est toujours intéressant d’y passer du temps et d’y consacrer un budget.

Pour fait un test sur une page, j’utilise également gtmetrix

LaurentB 23 février 2012 - 11:20 - Répondre

Tiens voilà un article de référence sur le sujet.
Pour ma part, la plaie du Web est le temps de latence – entre le time to first byte et begin download.

référencement grenoble 23 février 2012 - 11:25 - Répondre

avec firebug, il est facile de mesurer et d’améliorer grace aux conseils fournis les temps de chargement d’un site. optimisation des classes css, zip des fichiers, configuration du serveur apache. une excellente premiere etape vers un site plus rapide à charger !

Thomas Soudaz 23 février 2012 - 14:53 - Répondre

oui, puisqu’on est dans les plugins pagespeed et yslow (qui se branche sur firebug) sont d’excellents outils de diagnostique.

Palbertus 23 février 2012 - 11:48 - Répondre

Article et analyse très pertinentes cher Thomas ! Et pour compléter ta position sur le monitoring, je conseille l’API Google Page Speed (https://code.google.com/apis/console/b/0/), dispo dans la console Google API Search, et aussi sous forme de plugins WP!.

Expert référencement France 23 février 2012 - 12:01 - Répondre

Juste pour confirmer que l’outil de WebpageTest est un outil pérenne quand à ses analyses de performances de site ..
Optimiser le téléchargement de son site a comme avantages de faire optimiser le référencement et de faciliter l’accès aux robots des engins lors de leurs crawlings des pages internet.
Moyennant le temps de téléchargement ne devra pas passer les 5 ou 5 secondes pour ne pas détourner les internautes vers d’autres sites moins lourds dans leurs chargement ..

Thomas Soudaz 23 février 2012 - 13:09 - Répondre

@JulienC : Pour l’essentiel c’est le temps de chargement moyen du HTML. Même si Googlebot crawl les autres contenus images/flash/css/js (surtout quand il les croise pour la première fois), sa came c’est surtout le html.

Patrice 23 février 2012 - 14:12 - Répondre

Article passionnant, qui temoigne bien de ton expertise, merci. Je pense qu il aurait pu être intéressant d’y ajouter aussi quelques liens sur les impacts de l optimisation du temps de chargement (impact SEO, tx de rebond, tx de conversion…).
À ta dispo si tu veux faire un cas d analyse sur e-santé ! ;-)

Cohen David - 23 février 2012 - 17:41 - Répondre

Good Job! Thomas;
Tes définitions
Le Time To First Byte (TTFB) : …
Le Start Render : …..
…..
clarifient les traductions approximatives que nous rencontrons trop souvent..

RDV à SEO Campus bien sur.

David

Cohen David - 23 février 2012 - 17:51 - Répondre

et puis les temps de réponse d’un site selon les pays

http://wheresitup.com

@+
David

Morpheus 01 mars 2012 - 17:10 - Répondre

On voit bien la, la complexité de la mesure d’une vitesse de chargement d’un site…

Et dire que google en tient compte dans ses algos… Ou alors tente de nous le faire croire ;)

Fanny Sylvestre 13 mars 2012 - 14:04 - Répondre

Bonjour Thomas

Sais-tu comment optimiser les js et images qui viennent de Google ? Je n’arrive pas à plus de 98% sur PageSpeed car il reste à chaque fois les code de Google que je n’arrive pas à optimiser…

par exemple :

Certaines ressources pouvant être mises en cache ont une durée d’actualisation limitée. Spécifiez un délai d’expiration d’au moins une semaine pour les ressources suivantes :

pagead2.googlesyndication.com/pagead/show_ads.js (1 hour)
google-analytics.com/ga.js (2 hours)

ou encore :

Si vous optimisez les images suivantes, vous pourriez réduire leur taille de 1.7 Ko (réduction de 53%).

Si vous compressez google.fr/cse/intl/en/images/google_custom_search_watermark.gif sans perte, vous pourriez libérer 1.4 Ko (réduction de 71%). See optimized version or Save as.

ou encore

Les ressources suivantes ne sont associées à aucune technique de mise en cache et ne peuvent donc pas être actualisées efficacement. Spécifiez un en-tête Last-Modified ou ETag afin d’activer la validation du cache pour les ressources suivantes :

google.fr/coop/cse/brand?form=cse-search-box&lang=

ou encore

Les images suivantes ne sont associées à aucun attribut de largeur et/ou de hauteur.

pagead2.googlesyndication.com/pagead/abglogo/abg-fr-100c-000000.png (dimensions : 91 x 16) (2 utilisations)

ou encore

Spécifier un en-tête « Vary: Accept-Encoding »

Les ressources compressibles suivantes, qui peuvent être mises en cache, doivent être associées à un en-tête « Vary: Accept-Encoding » :

pagead2.googlesyndication.com/pagead/expansion_embed.js
pagead2.googlesyndication.com/pagead/js/r20120229/r20110914/show_ads_impl.js
pagead2.googlesyndication.com/pagead/osd.js
pagead2.googlesyndication.com/pagead/show_ads.js
pagead2.googlesyndication.com/pagead/sma8.js
google.fr/coop/cse/brand?form=cse-search-box&lang=

enfin la liste est longue de tout ce qui vient de chez Google… c’est quand-même un peu en contradiction avec leur fameuse devise de cet après-midi au SEO Campus, je cite « Google est fou de vitesse ! »

Enfin voilà, je voulais savoir si tu avais une astuce, une recommandation ou autre conseil.

Merci et bravo pour ton intervention super intéressante au SEO Campus ! :-)

Thomas 15 mars 2012 - 10:16 - Répondre

le score Pagespeed est un excellent indicateur mais obtenir un score de 100 points ne veut pas dire que ton site est complètement optimisé.
A part pour le ga.js que tu peux héberger chez toi, pour Adsense Il n’y a rien pas grand chose à faire de simple en tout cas.
la solution pour optimiser encore plus les appels des blocs adsense serait de charger les blocs dans une iframe qui se chargerait au onload, mais vu que Google utilise déjà une iframe asynchrone ça serait se compliquer un peu la vie.
A moins d’avoir un gros site e-commerce pour qui 100ms est primordial je n’y accorderai pas trop d’importance.

l’impact sur la vitesse des optimisations que Google pourrait effectuer sur ses fichiers est vraiment très faible d’autant plus que le chargement de tous ces fichiers est non bloquant lorsqu’il sont bien intégrés, en fait ce qui est listé correspond à des petites optimisations et souvent c’est par choix plutôt que par oubli, par exemple les dates d’expirations non lointaine permettent d’avoir du traffic HTTP très régulier de tous les sites ayant Google search ou Analytics et de faire un peu le « big brother ».
Le fait de pas mettre de hauteur/largeur sur le logo du custom search j’imagine que c’est pour péter le rendu d’un minimum d’interface…

C’est un peu la limite des outils d’analyse automatiques style pagespeed qui accordent de l’importance à des micro-optimisations qui n’ont pas une incidence importante sur les temps de chargement et qui peuvent passer à côté de gros trucs qui ne s’identifient que manuellement.

Fanny Sylvestre 15 mars 2012 - 10:56 - Répondre

Bonjour Thomas

merci pour ta réponse, je laisse donc tomber ce point-ci car en effet, ça ne vaut pas le coup de perdre de son temps si ce n’est pas si bloquant que ça et si ça ne réduit pas le temps d’affichage…

j’utilise également l’audit de chrome qui m’indique encore d’autres éléments à améliorer et bien sur, je commence toujours par le manuel :-) mais ces outils m’aident à rectifier quelques oublis parfois ou autres détails auxquels je n’aurais pas pensé.

Bonne journée

David 21 septembre 2012 - 16:00 - Répondre

Excellent article… en tous cas, sous Magento, pas toujours simple de faire en sorte que le fameux White Screen of Death soit court… Quand je suis sous les 1,5 secondes, je crie victoire !