WEBVTT

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

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

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

00:00:16.440 --> 00:00:17.160
donc on va avancer

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

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

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

00:00:27.910 --> 00:00:29.560
on a essayé pas mal de choses

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

00:00:32.680 --> 00:00:35.600
on avait beaucoup de bonnes pratiques à checker à la main

00:00:35.600 --> 00:00:37.360
on avait des outils pour nous aider

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

00:00:42.120 --> 00:00:43.400
c'est webpagetest

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

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

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

00:00:55.680 --> 00: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

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

00:01:04.800 --> 00:01:08.720
on a une première analyse de toutes les recommandations classiques de performance

00:01:08.720 --> 00:01:10.658
c'est très basique mais on l'a

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

00:01:14.520 --> 00:01:17.120
qui est directement intégré dans l'outil en ligne

00:01:17.120 --> 00:01:20.440
On a des statistiques d'analyse donc des jolis camemberts de répartition

00:01:20.440 --> 00:01:22.960
par domaine, par type de fichier, etc.

00:01:22.960 --> 00:01:24.080
Je vais vous montrer tout ça après

00:01:24.080 --> 00:01:27.920
Et on a la feature qui est absolument indispensable

00:01:27.920 --> 00:01:29.680
c'est la capture vidéo pas à pas

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

00:01:33.240 --> 00:01:34.840
mais je vais vous montrer à quoi ça ressemble

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

00:01:38.520 --> 00:01:42.040
donc captures brutes du réseau

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

00:01:44.720 --> 00: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

00:01:49.480 --> 00:01:51.040
on a l'archivage du résultat

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

00:01:53.520 --> 00:01:55.760
et ben je les ai encore, j'ai le lien

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

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

00:02:02.323 --> 00:02:03.200
voilà à quoi ça ressemble

00:02:03.200 --> 00:02:04.840
ça c'est ma feature magique

00:02:04.840 --> 00:02:07.200
c'est celle pour laquelle j'utilise webpagetest, alors webpagetest,

00:02:07.200 --> 00:02:10.040
un petit peu de mal avec la telecommande

00:02:10.040 --> 00:02:11.760
webpagetest c'est ça

00:02:11.760 --> 00:02:13.520
c'est une petite interface web

00:02:13.520 --> 00:02:15.001
on y va, on défini une URL

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

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

00:02:21.200 --> 00:02:23.151
donc on défini la localisation

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

00:02:29.000 --> 00:02:32.903
si vous regardez un peu sur Twitter vous verrez ces deux hébergements

00:02:32.903 --> 00: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

00:02:40.320 --> 00:02:42.960
donc sur Paris on a que IE7 et IE8

00:02:42.960 --> 00:02:45.360
D'ailleurs je fais choisir mon type de connexion

00:02:45.360 --> 00: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 ?

00:02:48.600 --> 00:02:51.280
là j'ai pris un ASDL assez standard

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

00:02:56.520 --> 00:02:58.160
et là je lance mon test

00:02:58.160 --> 00:03:01.720
et donc j'obtiens ça comme feature principale

00:03:01.720 --> 00:03:03.880
Et là j'ai comparé deux sites

00:03:03.880 --> 00:03:05.480
vous avez en haut la timeline

00:03:05.480 --> 00:03:06.805
donc chaque image c'est une seconde

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

00:03:10.080 --> 00:03:12.080
et je vois mon site se charger au fur et à mesure

00:03:12.080 --> 00:03:13.880
alors là on voit pas bien à cause du contraste

00:03:13.880 --> 00:03:15.240
mais grosso modo là je suis blanc,

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

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

00:03:24.960 --> 00:03:28.240
par comparaison vous avez Sud Web juste en dessous

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

00:03:31.560 --> 00:03:34.280
donc on est 2 fois meilleurs que tous les politiques

00:03:34.280 --> 00:03:39.760
(applaudissements)

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

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

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

00:03:49.520 --> 00:03:50.760
c'est à dire la page blanche

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

00:03:52.920 --> 00: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

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

00:03:59.400 --> 00:04:01.000
après on a toutes les analyses

00:04:01.000 --> 00:04:02.880
donc là c'est ce qu'on appelle la cascade réseau

00:04:02.880 --> 00:04:06.410
on voit donc chaque ligne c'est un composant javascript ou image

00:04:06.410 --> 00:04:08.440
on voit les composants se charger un à un

00:04:08.440 --> 00: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,

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

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

00:04:16.600 --> 00:04:17.800
c'est là dessus qu'on le voit

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

00:04:20.960 --> 00:04:24.000
après vous avez le CPU, la bande passante

00:04:24.000 --> 00:04:26.040
et là vous avez les flis de connexion de votre navigateur

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

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

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

00:04:34.800 --> 00:04:37.720
donc à ce moment là on va retirer le javascript bloquant et on va tenter de corriger

00:04:37.720 --> 00:04:39.720
donc voilà un petit peu ce que vous avez

00:04:39.720 --> 00:04:43.600
... pour aller plus loin donc on a les analyses

00:04:43.600 --> 00:04:45.240
donc ça c'est des analyses très standards

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

00:04:47.640 --> 00:04:49.994
est-ce que mes connexions vers le serveur sont persistantes

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

00:04:53.560 --> 00:04:55.120
voilà vous avez les petites grilles

00:04:55.120 --> 00:04:59.200
la petit grille vous met du vert ou du rouge c'est super pratique

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

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

00:05:04.360 --> 00:05:06.280
toutes les tailles, les temps, etc.

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

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

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

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

00:05:21.600 --> 00:05:23.560
ouais donc j'ai fini, hop

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

00:05:28.144 --> 00:05:30.040
c'est des jolis camemberts donc on vous dit

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

00:05:34.120 --> 00:05:36.922
grosso modo les 2/3 de Sud Web qui est fait par des images

00:05:36.922 --> 00:05:39.200
moitié pour GIF moitié pour JPG

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

00:05:42.520 --> 00:05:43.920
donc je pense que c'est des toutes petites icônes

00:05:43.920 --> 00:05:45.600
et par contre j'ai des très grosses JPEG qui prennent

00:05:45.600 --> 00:05:47.600
quasiment les deux tiers de mes requêtes

00:05:47.600 --> 00:05:49.440
donc je pense que les JPEG elles sont de très bonne qualité

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

00:05:51.600 --> 00:05:53.960
A l'inverse le javascript il prend assez peu

00:05:53.960 --> 00:05:55.880
il prend assez peu en volume et en requête c'est assez sympa

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

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

00:06:04.120 --> 00:06:05.900
et à y aller.