0:00:06.760,0:00:08.600
Alors bonjour, alors on voit rien du tout avec les projos donc

0:00:08.600,0:00:11.360
je sais pas si je mets me mettre là si, allez hop

0:00:11.360,0:00:16.440
non pas là ? y'a pas de lumière donc c'est moi ben qui verrait rien

0:00:16.440,0:00:17.160
donc on va avancer

0:00:17.160,0:00:20.991
moi ça fait quand même un petit moment que je travialle sur tout ce qui est performance

0:00:20.991,0:00:24.640
l'objectif c'est d'améliorer les temps de réponse des pages web

0:00:24.640,0:00:27.910
en gros faire en sorte que quand vous cliquez sur un lien ça s'affiche le plus vite possible

0:00:27.910,0:00:29.560
on a essayé pas mal de choses

0:00:29.560,0:00:32.680
on avait YSlow à un moment, on avait Page Speed de Google

0:00:32.680,0:00:35.600
on avait beaucoup de bonnes pratiques à checker à la main

0:00:35.600,0:00:37.360
on avait des outils pour nous aider

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

0:00:42.120,0:00:43.400
c'est webpagetest

0:00:43.400,0:00:48.080
webpagetest ça vient de AOL qui avait un petit outil qui se rajoutait sur Internet Explorer

0:00:48.080,0:00:52.000
qui regardait un petit peu le trafic réseau et qui tentait de faire des analyses

0:00:52.000,0:00:55.680
ça s'est beaucoup amélioré depuis maintenant il y a une interface web

0:00:55.680,0:01:01.120
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

0:01:01.120,0:01:04.800
avec une jolie cascade pour voir les éléments dans quel ordre ils se chargent

0:01:04.800,0:01:08.720
on a une première analyse de toutes les recommandations classiques de performance

0:01:08.720,0:01:10.658
c'est très basique mais on l'a

0:01:10.658,0:01:14.520
on a l'intégration de Page Speed, qui est l'outil de Google pour l'analyse de la performance

0:01:14.520,0:01:17.120
qui est directement intégré dans l'outil en ligne

0:01:17.120,0:01:20.440
On a des statistiques d'analyse donc des jolis camemberts de répartition

0:01:20.440,0:01:22.960
par domaine, par type de fichier, etc.

0:01:22.960,0:01:24.080
Je vais vous montrer tout ça après

0:01:24.080,0:01:27.920
Et on a la feature qui est absolument indispensable

0:01:27.920,0:01:29.680
c'est la capture vidéo pas à pas

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

0:01:33.240,0:01:34.840
mais je vais vous montrer à quoi ça ressemble

0:01:34.840,0:01:38.520
et derrière on a encore apès des captures réseau brutes avec winpcap

0:01:38.520,0:01:42.040
donc captures brutes du réseau

0:01:42.040,0:01:44.720
on a des exports HAR, CSV de toutes vos données

0:01:44.720,0:01:49.480
pour après les réintégrer dans je sais pas moi vos plateformes d'intégration continue pour faire des statistiques

0:01:49.480,0:01:51.040
on a l'archivage du résultat

0:01:51.040,0:01:53.520
c'est à dire que moi les pages que j'ai testées il y a déjà longtemps

0:01:53.520,0:01:55.760
et ben je les ai encore, j'ai le lien

0:01:55.760,0:01:59.080
et quand je vais sur la page en ligne, j'ai encore toutes mes informations

0:01:59.080,0:02:02.323
c'est génial pour faire des comparaisons un an après

0:02:02.323,0:02:03.200
voilà à quoi ça ressemble

0:02:03.200,0:02:04.840
ça c'est ma feature magique

0:02:04.840,0:02:07.200
c'est celle pour laquelle j'utilise webpagetest, alors webpagetest,

0:02:07.200,0:02:10.040
un petit peu de mal avec la telecommande

0:02:10.040,0:02:11.760
webpagetest c'est ça

0:02:11.760,0:02:13.520
c'est une petite interface web

0:02:13.520,0:02:15.001
on y va, on défini une URL

0:02:15.001,0:02:18.000
on défini où est-ce qu'on veut tester la fonctionnalité

0:02:18.000,0:02:21.200
si je la teste à partir de l'autre bout du pacifique ma page sera bien plus lente

0:02:21.200,0:02:23.151
donc on défini la localisation

0:02:23.151,0:02:29.000
on a sur Paris, on a deux serveurs, un IE8 et un IE7 qui sont detenus par Globalis et Zeroload

0:02:29.000,0:02:32.903
si vous regardez un peu sur Twitter vous verrez ces deux hébergements

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

0:02:40.320,0:02:42.960
donc sur Paris on a que IE7 et IE8

0:02:42.960,0:02:45.360
D'ailleurs je fais choisir mon type de connexion

0:02:45.360,0:02:48.600
Est-ce que j'ai une ADSL, est-ce que j'ai une fibre optique, est-ce que j'ai un modem RTC ?

0:02:48.600,0:02:51.280
là j'ai pris un ASDL assez standard

0:02:51.280,0:02:56.520
je peux définir assez précisément ma latence, mon débit, tout ce que je veux

0:02:56.520,0:02:58.160
et là je lance mon test

0:02:58.160,0:03:01.720
et donc j'obtiens ça comme feature principale

0:03:01.720,0:03:03.880
Et là j'ai comparé deux sites

0:03:03.880,0:03:05.480
vous avez en haut la timeline

0:03:05.480,0:03:06.805
donc chaque image c'est une seconde

0:03:06.805,0:03:10.080
vous pouvez préciser par demi seconde, par centième de seconde comme vous voulez

0:03:10.080,0:03:12.080
et je vois mon site se charger au fur et à mesure

0:03:12.080,0:03:13.880
alors là on voit pas bien à cause du contraste

0:03:13.880,0:03:15.240
mais grosso modo là je suis blanc,

0:03:15.240,0:03:18.920
j'arrive normalement à une version un peu plus grise avec des images qui se chargent au fur et à mesure

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

0:03:24.960,0:03:28.240
par comparaison vous avez Sud Web juste en dessous

0:03:28.240,0:03:31.560
donc Sud Web s'arrête à 4 secondes, l'IG8 je crois qu'il s'arrête à huit secondes

0:03:31.560,0:03:34.280
donc on est 2 fois meilleurs que tous les politiques

0:03:34.280,0:03:39.760
(applaudissements)

0:03:39.760,0:03:43.720
voilà si vous voulez regarder un petit peu ce que ça donne pour un utilisateur

0:03:43.720,0:03:45.560
ben ça c'est génial, vous regardez avec votre concurrent

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

0:03:49.520,0:03:50.760
c'est à dire la page blanche

0:03:50.760,0:03:52.920
est-ce que les images arrivent au fur et à mesure ou d'un coup ?

0:03:52.920,0:03:55.440
c'est à dire est-ce qu'on est train de charger le bas de la page ou le haut de la page

0:03:55.440,0:03:59.400
sur le ressenti de la performance par l'utilisateur c'est vraiment ça qu'il faut regarder

0:03:59.400,0:04:01.000
après on a toutes les analyses

0:04:01.000,0:04:02.880
donc là c'est ce qu'on appelle la cascade réseau

0:04:02.880,0:04:06.410
on voit donc chaque ligne c'est un composant javascript ou image

0:04:06.410,0:04:08.440
on voit les composants se charger un à un

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

0:04:11.520,0:04:13.600
est-ce qu'il est en train de faire une requête DNS ?

0:04:13.600,0:04:16.600
donc si vous avez après repéré des problèmes dans la vidéo

0:04:16.600,0:04:17.800
c'est là dessus qu'on le voit

0:04:17.800,0:04:20.960
la première c'est toutes les ressources, normalement ça descend longuement

0:04:20.960,0:04:24.000
après vous avez le CPU, la bande passante

0:04:24.000,0:04:26.040
et là vous avez les flis de connexion de votre navigateur

0:04:26.040,0:04:29.640
votre navigateur il a plusieurs connexions vers un serveur pour faire plusieurs requêtes en parallèle

0:04:29.640,0:04:32.160
et donc là on voit un petit peu, on voit tiens ici j'ai un trou

0:04:32.160,0:04:34.800
pourquoi j'ai un trou ? peut-être que j'ai un javascript bloquant

0:04:34.800,0:04:37.720
donc à ce moment là on va retirer le javascript bloquant et on va tenter de corriger

0:04:37.720,0:04:39.720
donc voilà un petit peu ce que vous avez

0:04:39.720,0:04:43.600
... pour aller plus loin donc on a les analyses

0:04:43.600,0:04:45.240
donc ça c'est des analyses très standards

0:04:45.240,0:04:47.640
c'est est-ce que mes images sont bien optimisées ?

0:04:47.640,0:04:49.994
est-ce que mes connexions vers le serveur sont persistantes

0:04:49.994,0:04:53.560
ou est-ce que je les refais à chaque fois que je veux télécharger un compossant ?

0:04:53.560,0:04:55.120
voilà vous avez les petites grilles

0:04:55.120,0:04:59.200
la petit grille vous met du vert ou du rouge c'est super pratique

0:04:59.200,0:05:02.080
elle vous met en dessous en plus tous les détails, vous les aviez aussi pour le réseau

0:05:02.080,0:05:04.360
On a les détails de chaque connexion, on a toutes les entêtes

0:05:04.360,0:05:06.280
toutes les tailles, les temps, etc.

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

0:05:11.360,0:05:16.200
et je peux gagner exactement 128 kilos sur ma page si jamais je les code mieux.

0:05:16.200,0:05:19.800
On a après derrière l'analyse de Page Speed mais vous vous verrez

0:05:19.800,0:05:21.600
l'analyse de Page Speed, elle est pas très intéressante

0:05:21.600,0:05:23.560
ouais donc j'ai fini, hop

0:05:23.560,0:05:28.144
et ça c'est la fin, c'est tout ce qui est statistiques jolies pour apporter à votre patron

0:05:28.144,0:05:30.040
c'est des jolis camemberts donc on vous dit

0:05:30.040,0:05:34.120
par exemple là très bien je vois au niveau des requêtes j'ai

0:05:34.120,0:05:36.922
grosso modo les 2/3 de Sud Web qui est fait par des images

0:05:36.922,0:05:39.200
moitié pour GIF moitié pour JPG

0:05:39.200,0:05:42.520
Et au niveau du volume des données, le GIF il tient très très peu

0:05:42.520,0:05:43.920
donc je pense que c'est des toutes petites icônes

0:05:43.920,0:05:45.600
et par contre j'ai des très grosses JPEG qui prennent

0:05:45.600,0:05:47.600
quasiment les deux tiers de mes requêtes

0:05:47.600,0:05:49.440
donc je pense que les JPEG elles sont de très bonne qualité

0:05:49.440,0:05:51.600
peut-être ça vaudrait le coup de les réduire un petit peu par exemple

0:05:51.600,0:05:53.960
A l'inverse le javascript il prend assez peu

0:05:53.960,0:05:55.880
il prend assez peu en volume et en requête c'est assez sympa

0:05:55.880,0:06:00.920
donc ça c'est comment on peut voir un petit peu ce qui se passe et analyser très rapidement

0:06:00.920,0:06:04.120
Donc voilà pour webpagetest, je vous invite à prendre l'URL

0:06:04.120,0:06:05.900
et à y aller.