Webpagetest en 5 minutes (Éric Daspet) - Sud Web 2011

La lenteur d'un site peut avoir des conséquences dramatiques sur la fidélité de vos visiteurs, leur montant de commande et surtout leur satisfaction.

Plutôt que répéter les bonnes pratiques que vous avez déjà entendu (ou que vous pourrez lire sur le web), nous ferons un tour rapide de webpagetest : un outil en ligne pour analyser les performances d'un site.

Grâce à une vidéo du chargement centième de seconde par centième de seconde, c'est un des meilleurs outils pour faire un vrai travail utile dans ce qui doit ou pas être affiché en priorité sur votre site

http://sudweb.fr

Alors bonjour, alors on voit rien du tout avec les projos donc

je sais pas si je mets me mettre là si, allez hop

non pas là ? y'a pas de lumière donc c'est moi ben qui verrait rien

donc on va avancer

moi ça fait quand même un petit moment que je travialle sur tout ce qui est performance

l'objectif c'est d'améliorer les temps de réponse des pages web

en gros faire en sorte que quand vous cliquez sur un lien ça s'affiche le plus vite possible

on a essayé pas mal de choses

on avait YSlow à un moment, on avait Page Speed de Google

on avait beaucoup de bonnes pratiques à checker à la main

on avait des outils pour nous aider

Depuis un petit moment on en a un, moi j'utilise quasi plus que ça avant de faire mes analyses manuelles

c'est webpagetest

webpagetest ça vient de AOL qui avait un petit outil qui se rajoutait sur Internet Explorer

qui regardait un petit peu le trafic réseau et qui tentait de faire des analyses

ça s'est beaucoup amélioré depuis maintenant il y a une interface web

le but c'est de mesurer tout ce qui est temps de réseau, tout ce qui est CPU, tout ce qui est temps d'affichage

avec une jolie cascade pour voir les éléments dans quel ordre ils se chargent

on a une première analyse de toutes les recommandations classiques de performance

c'est très basique mais on l'a

on a l'intégration de Page Speed, qui est l'outil de Google pour l'analyse de la performance

qui est directement intégré dans l'outil en ligne

On a des statistiques d'analyse donc des jolis camemberts de répartition

par domaine, par type de fichier, etc.

Je vais vous montrer tout ça après

Et on a la feature qui est absolument indispensable

c'est la capture vidéo pas à pas

Donc pareil, je vais pas vous montrer, parce qu'en 5 minutes ça va être trop court, la vidéo

mais je vais vous montrer à quoi ça ressemble

et derrière on a encore apès des captures réseau brutes avec winpcap

donc captures brutes du réseau

on a des exports HAR, CSV de toutes vos données

pour après les réintégrer dans je sais pas moi vos plateformes d'intégration continue pour faire des statistiques

on a l'archivage du résultat

c'est à dire que moi les pages que j'ai testées il y a déjà longtemps

et ben je les ai encore, j'ai le lien

et quand je vais sur la page en ligne, j'ai encore toutes mes informations

c'est génial pour faire des comparaisons un an après

voilà à quoi ça ressemble

ça c'est ma feature magique

c'est celle pour laquelle j'utilise webpagetest, alors webpagetest,

un petit peu de mal avec la telecommande

webpagetest c'est ça

c'est une petite interface web

on y va, on défini une URL

on défini où est-ce qu'on veut tester la fonctionnalité

si je la teste à partir de l'autre bout du pacifique ma page sera bien plus lente

donc on défini la localisation

on a sur Paris, on a deux serveurs, un IE8 et un IE7 qui sont detenus par Globalis et Zeroload

si vous regardez un peu sur Twitter vous verrez ces deux hébergements

Donc on va définir le navigateur, on a IE7, IE8, IE6 normalement je crois et on a du Chrome en expérimental

donc sur Paris on a que IE7 et IE8

D'ailleurs je fais choisir mon type de connexion

Est-ce que j'ai une ADSL, est-ce que j'ai une fibre optique, est-ce que j'ai un modem RTC ?

là j'ai pris un ASDL assez standard

je peux définir assez précisément ma latence, mon débit, tout ce que je veux

et là je lance mon test

et donc j'obtiens ça comme feature principale

Et là j'ai comparé deux sites

vous avez en haut la timeline

donc chaque image c'est une seconde

vous pouvez préciser par demi seconde, par centième de seconde comme vous voulez

et je vois mon site se charger au fur et à mesure

alors là on voit pas bien à cause du contraste

mais grosso modo là je suis blanc,

j'arrive normalement à une version un peu plus grise avec des images qui se chargent au fur et à mesure

ça c'est l'IG8, donc c'est à dire normalement ce qui se fait de mieux normalement sur internet, voilà

par comparaison vous avez Sud Web juste en dessous

donc Sud Web s'arrête à 4 secondes, l'IG8 je crois qu'il s'arrête à huit secondes

donc on est 2 fois meilleurs que tous les politiques

(applaudissements)

voilà si vous voulez regarder un petit peu ce que ça donne pour un utilisateur

ben ça c'est génial, vous regardez avec votre concurrent

vous voyez exactement, est-ce que votre page elle met plus longtemps à se charger en zone blanche

c'est à dire la page blanche

est-ce que les images arrivent au fur et à mesure ou d'un coup ?

c'est à dire est-ce qu'on est train de charger le bas de la page ou le haut de la page

sur le ressenti de la performance par l'utilisateur c'est vraiment ça qu'il faut regarder

après on a toutes les analyses

donc là c'est ce qu'on appelle la cascade réseau

on voit donc chaque ligne c'est un composant javascript ou image

on voit les composants se charger un à un

les couleurs c'est est-ce que mon navigateur il attend, est-ce qu'il est en train de télécharger,

est-ce qu'il est en train de faire une requête DNS ?

donc si vous avez après repéré des problèmes dans la vidéo

c'est là dessus qu'on le voit

la première c'est toutes les ressources, normalement ça descend longuement

après vous avez le CPU, la bande passante

et là vous avez les flis de connexion de votre navigateur

votre navigateur il a plusieurs connexions vers un serveur pour faire plusieurs requêtes en parallèle

et donc là on voit un petit peu, on voit tiens ici j'ai un trou

pourquoi j'ai un trou ? peut-être que j'ai un javascript bloquant

donc à ce moment là on va retirer le javascript bloquant et on va tenter de corriger

donc voilà un petit peu ce que vous avez

... pour aller plus loin donc on a les analyses

donc ça c'est des analyses très standards

c'est est-ce que mes images sont bien optimisées ?

est-ce que mes connexions vers le serveur sont persistantes

ou est-ce que je les refais à chaque fois que je veux télécharger un compossant ?

voilà vous avez les petites grilles

la petit grille vous met du vert ou du rouge c'est super pratique

elle vous met en dessous en plus tous les détails, vous les aviez aussi pour le réseau

On a les détails de chaque connexion, on a toutes les entêtes

toutes les tailles, les temps, etc.

Donc ça me dit par exemple voilà, j'ai 41 ressources sur 100 qui sont mal codées

et je peux gagner exactement 128 kilos sur ma page si jamais je les code mieux.

On a après derrière l'analyse de Page Speed mais vous vous verrez

l'analyse de Page Speed, elle est pas très intéressante

ouais donc j'ai fini, hop

et ça c'est la fin, c'est tout ce qui est statistiques jolies pour apporter à votre patron

c'est des jolis camemberts donc on vous dit

par exemple là très bien je vois au niveau des requêtes j'ai

grosso modo les 2/3 de Sud Web qui est fait par des images

moitié pour GIF moitié pour JPG

Et au niveau du volume des données, le GIF il tient très très peu

donc je pense que c'est des toutes petites icônes

et par contre j'ai des très grosses JPEG qui prennent

quasiment les deux tiers de mes requêtes

donc je pense que les JPEG elles sont de très bonne qualité

peut-être ça vaudrait le coup de les réduire un petit peu par exemple

A l'inverse le javascript il prend assez peu

il prend assez peu en volume et en requête c'est assez sympa

donc ça c'est comment on peut voir un petit peu ce qui se passe et analyser très rapidement

Donc voilà pour webpagetest, je vous invite à prendre l'URL

et à y aller.