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.