mercredi, juin 27, 2007

[Truc perso] Analyse du temps de chargement d'une page

Vous trouvez le temps de chargement de votre homepage trop long et vous voulez le décomposer / l'analyser?

Alors, je vous conseille le "Full Page Test" de Pingdom, service de suivi de sites Internet, fort intéressant dont j'ai déjà parlé au sujet de la disponibilité des grands sites de l'Internet.

Ils viennent de mettre à disposition ici une page (écrite en AJAX) qui permet de décomposer tous les éléments constituants d'une page ((X)HTML, images, fichiers CSS, contenu RSS, scripts Javascript, etc...), d'en connaître le nombre, le temps et l'ordre de chargement.

[Cliquez les images ci-dessous pour les zoomer]

Commençons par le bon (l'excellent ?) élève: www.google.com


Analyse: un fichier XHTML + une image chargée "pesant" 14.5 Koctets. Et c'est tout! 250 millisecondes pour charger le tout. Le cas d'école! Bon, quand on l'affiche des (dizaines) de milliards de fois chaque mois, il faut que ce soit de la "qualité horlogère" (comme on dit chez moi dans la vallée Joux, célèbre au plan mondial pour les montres de luxe).

Rappel aux "envieux": il faut un nombre comme les 450'000 serveurs de Google répartis - qui servent aussi et surtout à calculer les résultats... - sur 25+ centres de calcul sur la planète pour atteindre ce résultat en permanence quand on traite 60%+ du trafic de recherche de cette planète.

Dans la même famille mais nettement moins spartiate (!...) : www.youtube.com


Ici, la homepage se compose de 68 objets dont 58 images. Le temps de chargement reste quand même très honnête avec moins de 2 secondes!

Maintenant, testez donc l'outil Pingdom avec une page un peu plus complexe pour voir l'intérêt du chronogramme décrivant graphiquement l'enchaînement du chargement des différents éléments. Par exemple, prenez la homepage de Media&Tech ou de votre blog si vous allez comme moi chercher des composants à droite et à gauche (myBlogLog, Critéo, Wikio, Sitemeter): vous verrez tout de suite si l'un de vos "prestataires" est particulièrement responsable du long temps de chargement de la page en question!

Je suis intéressé par vos feedbacks sur cet outil. merci d'avance!

PS: le mode d'emploi détaillé est ici

Source:
blog Media & Tech (par didier durand)

9 commentaires:

Anonyme a dit…

Vraiment pas mal comme outil...

cela dit, faut il vraiment prendre en compte le temps de chargement COMPLET pour définir le confort de l'expérience utilisateurs

pour ma part je sais que je consulte fréquement des pages (la mienne notamment) alors que les contenus ne sont pas totalement chargé

surtout pour les blogs ou souvent tous les articles sont présents en entier sur la page d'accueil...

cela dit, l'outil est vraiment bien fait pour voir sur quel éléments influer pour réduire ses temps de chargement ou sa bande passante

Didier Durand a dit…

Salut Luc,

Je savais d'avance que je pouvais compter sur une réaction de ta part. Merci!

didier

Anonyme a dit…

On rentre actuellement dans une nouvelle êre de la statistique sur internet...

entre des services comme celui la et d'autre comme crazy egg.

bientôt, les site n'auront plus aucun secret pour les marketeux!

d'ailleur a ce sujet, je trouve hallucinant a quel point les marketeux on su apprivoiser internet qui était un chose encore complètement GEEK il y'a 5 ou 6 ans...

j'ai vraiment l'impression qu'internet "grand public" se transforme de plus en plus en catalogue géant...

pour ma part, comme a mon habitude, je me situe entre les deux...

cela dit, ma geek part, me dit de faire attention :p

Emmanuel Douaud a dit…

Juste merci.

Didier Durand a dit…

@Manu,

Si c'est utile, tant mieux!
didier

Anonyme a dit…

Il y a aussi une extension géniale pour firefox : firebug.

Bonne continuation

Didier Durand a dit…

Bonjour Gaston,

Pour mes devs Javascript, je suis un grand fan de Firebug: un outil génial!

didier

Anonyme a dit…

En passant sur votre site, je me permet d'attirer votre attention sur un logiciel que j'ai découvert il y a peu, et qui est relatif à l'outil en ligne dont vous faites une rapide analyse. Il s'agit de HTTPWatch, qui permet également de décomposer les temps de chargement. ça se présente sous la forme d'un plugin FF & IE. Une version gratuite existe, qui permet de bien se rendre compte des différents temps entrant en jeu lors de l'appel d'une page via HTTP.

En vous souhaitant bonne continuation sur ce site que j'aurai, je pense, plaisir à revisiter dans qques mois.

Une URL : http://www.httpwatch.com/

Didier Durand a dit…

Bonjour Anonyme,

Merci pour le pointeur vers HTTPWatch
didier