1
00:00:06,760 --> 00:00:08,600
Alors bonjour, alors on voit rien du tout avec les projos donc

2
00:00:08,600 --> 00:00:11,360
je sais pas si je mets me mettre là si, allez hop

3
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

4
00:00:16,440 --> 00:00:17,160
donc on va avancer

5
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

6
00:00:20,991 --> 00:00:24,640
l'objectif c'est d'améliorer les temps de réponse des pages web

7
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

8
00:00:27,910 --> 00:00:29,560
on a essayé pas mal de choses

9
00:00:29,560 --> 00:00:32,680
on avait YSlow à un moment, on avait Page Speed de Google

10
00:00:32,680 --> 00:00:35,600
on avait beaucoup de bonnes pratiques à checker à la main

11
00:00:35,600 --> 00:00:37,360
on avait des outils pour nous aider

12
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

13
00:00:42,120 --> 00:00:43,400
c'est webpagetest

14
00:00:43,400 --> 00:00:48,080
webpagetest ça vient de AOL qui avait un petit outil qui se rajoutait sur Internet Explorer

15
00:00:48,080 --> 00:00:52,000
qui regardait un petit peu le trafic réseau et qui tentait de faire des analyses

16
00:00:52,000 --> 00:00:55,680
ça s'est beaucoup amélioré depuis maintenant il y a une interface web

17
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

18
00:01:01,120 --> 00:01:04,800
avec une jolie cascade pour voir les éléments dans quel ordre ils se chargent

19
00:01:04,800 --> 00:01:08,720
on a une première analyse de toutes les recommandations classiques de performance

20
00:01:08,720 --> 00:01:10,658
c'est très basique mais on l'a

21
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

22
00:01:14,520 --> 00:01:17,120
qui est directement intégré dans l'outil en ligne

23
00:01:17,120 --> 00:01:20,440
On a des statistiques d'analyse donc des jolis camemberts de répartition

24
00:01:20,440 --> 00:01:22,960
par domaine, par type de fichier, etc.

25
00:01:22,960 --> 00:01:24,080
Je vais vous montrer tout ça après

26
00:01:24,080 --> 00:01:27,920
Et on a la feature qui est absolument indispensable

27
00:01:27,920 --> 00:01:29,680
c'est la capture vidéo pas à pas

28
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

29
00:01:33,240 --> 00:01:34,840
mais je vais vous montrer à quoi ça ressemble

30
00:01:34,840 --> 00:01:38,520
et derrière on a encore apès des captures réseau brutes avec winpcap

31
00:01:38,520 --> 00:01:42,040
donc captures brutes du réseau

32
00:01:42,040 --> 00:01:44,720
on a des exports HAR, CSV de toutes vos données

33
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

34
00:01:49,480 --> 00:01:51,040
on a l'archivage du résultat

35
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

36
00:01:53,520 --> 00:01:55,760
et ben je les ai encore, j'ai le lien

37
00:01:55,760 --> 00:01:59,080
et quand je vais sur la page en ligne, j'ai encore toutes mes informations

38
00:01:59,080 --> 00:02:02,323
c'est génial pour faire des comparaisons un an après

39
00:02:02,323 --> 00:02:03,200
voilà à quoi ça ressemble

40
00:02:03,200 --> 00:02:04,840
ça c'est ma feature magique

41
00:02:04,840 --> 00:02:07,200
c'est celle pour laquelle j'utilise webpagetest, alors webpagetest,

42
00:02:07,200 --> 00:02:10,040
un petit peu de mal avec la telecommande

43
00:02:10,040 --> 00:02:11,760
webpagetest c'est ça

44
00:02:11,760 --> 00:02:13,520
c'est une petite interface web

45
00:02:13,520 --> 00:02:15,001
on y va, on défini une URL

46
00:02:15,001 --> 00:02:18,000
on défini où est-ce qu'on veut tester la fonctionnalité

47
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

48
00:02:21,200 --> 00:02:23,151
donc on défini la localisation

49
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

50
00:02:29,000 --> 00:02:32,903
si vous regardez un peu sur Twitter vous verrez ces deux hébergements

51
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

52
00:02:40,320 --> 00:02:42,960
donc sur Paris on a que IE7 et IE8

53
00:02:42,960 --> 00:02:45,360
D'ailleurs je fais choisir mon type de connexion

54
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 ?

55
00:02:48,600 --> 00:02:51,280
là j'ai pris un ASDL assez standard

56
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

57
00:02:56,520 --> 00:02:58,160
et là je lance mon test

58
00:02:58,160 --> 00:03:01,720
et donc j'obtiens ça comme feature principale

59
00:03:01,720 --> 00:03:03,880
Et là j'ai comparé deux sites

60
00:03:03,880 --> 00:03:05,480
vous avez en haut la timeline

61
00:03:05,480 --> 00:03:06,805
donc chaque image c'est une seconde

62
00:03:06,805 --> 00:03:10,080
vous pouvez préciser par demi seconde, par centième de seconde comme vous voulez

63
00:03:10,080 --> 00:03:12,080
et je vois mon site se charger au fur et à mesure

64
00:03:12,080 --> 00:03:13,880
alors là on voit pas bien à cause du contraste

65
00:03:13,880 --> 00:03:15,240
mais grosso modo là je suis blanc,

66
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

67
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à

68
00:03:24,960 --> 00:03:28,240
par comparaison vous avez Sud Web juste en dessous

69
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

70
00:03:31,560 --> 00:03:34,280
donc on est 2 fois meilleurs que tous les politiques

71
00:03:34,280 --> 00:03:39,760
(applaudissements)

72
00:03:39,760 --> 00:03:43,720
voilà si vous voulez regarder un petit peu ce que ça donne pour un utilisateur

73
00:03:43,720 --> 00:03:45,560
ben ça c'est génial, vous regardez avec votre concurrent

74
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

75
00:03:49,520 --> 00:03:50,760
c'est à dire la page blanche

76
00:03:50,760 --> 00:03:52,920
est-ce que les images arrivent au fur et à mesure ou d'un coup ?

77
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

78
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

79
00:03:59,400 --> 00:04:01,000
après on a toutes les analyses

80
00:04:01,000 --> 00:04:02,880
donc là c'est ce qu'on appelle la cascade réseau

81
00:04:02,880 --> 00:04:06,410
on voit donc chaque ligne c'est un composant javascript ou image

82
00:04:06,410 --> 00:04:08,440
on voit les composants se charger un à un

83
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,

84
00:04:11,520 --> 00:04:13,600
est-ce qu'il est en train de faire une requête DNS ?

85
00:04:13,600 --> 00:04:16,600
donc si vous avez après repéré des problèmes dans la vidéo

86
00:04:16,600 --> 00:04:17,800
c'est là dessus qu'on le voit

87
00:04:17,800 --> 00:04:20,960
la première c'est toutes les ressources, normalement ça descend longuement

88
00:04:20,960 --> 00:04:24,000
après vous avez le CPU, la bande passante

89
00:04:24,000 --> 00:04:26,040
et là vous avez les flis de connexion de votre navigateur

90
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

91
00:04:29,640 --> 00:04:32,160
et donc là on voit un petit peu, on voit tiens ici j'ai un trou

92
00:04:32,160 --> 00:04:34,800
pourquoi j'ai un trou ? peut-être que j'ai un javascript bloquant

93
00:04:34,800 --> 00:04:37,720
donc à ce moment là on va retirer le javascript bloquant et on va tenter de corriger

94
00:04:37,720 --> 00:04:39,720
donc voilà un petit peu ce que vous avez

95
00:04:39,720 --> 00:04:43,600
... pour aller plus loin donc on a les analyses

96
00:04:43,600 --> 00:04:45,240
donc ça c'est des analyses très standards

97
00:04:45,240 --> 00:04:47,640
c'est est-ce que mes images sont bien optimisées ?

98
00:04:47,640 --> 00:04:49,994
est-ce que mes connexions vers le serveur sont persistantes

99
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 ?

100
00:04:53,560 --> 00:04:55,120
voilà vous avez les petites grilles

101
00:04:55,120 --> 00:04:59,200
la petit grille vous met du vert ou du rouge c'est super pratique

102
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

103
00:05:02,080 --> 00:05:04,360
On a les détails de chaque connexion, on a toutes les entêtes

104
00:05:04,360 --> 00:05:06,280
toutes les tailles, les temps, etc.

105
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

106
00:05:11,360 --> 00:05:16,200
et je peux gagner exactement 128 kilos sur ma page si jamais je les code mieux.

107
00:05:16,200 --> 00:05:19,800
On a après derrière l'analyse de Page Speed mais vous vous verrez

108
00:05:19,800 --> 00:05:21,600
l'analyse de Page Speed, elle est pas très intéressante

109
00:05:21,600 --> 00:05:23,560
ouais donc j'ai fini, hop

110
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

111
00:05:28,144 --> 00:05:30,040
c'est des jolis camemberts donc on vous dit

112
00:05:30,040 --> 00:05:34,120
par exemple là très bien je vois au niveau des requêtes j'ai

113
00:05:34,120 --> 00:05:36,922
grosso modo les 2/3 de Sud Web qui est fait par des images

114
00:05:36,922 --> 00:05:39,200
moitié pour GIF moitié pour JPG

115
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

116
00:05:42,520 --> 00:05:43,920
donc je pense que c'est des toutes petites icônes

117
00:05:43,920 --> 00:05:45,600
et par contre j'ai des très grosses JPEG qui prennent

118
00:05:45,600 --> 00:05:47,600
quasiment les deux tiers de mes requêtes

119
00:05:47,600 --> 00:05:49,440
donc je pense que les JPEG elles sont de très bonne qualité

120
00:05:49,440 --> 00:05:51,600
peut-être ça vaudrait le coup de les réduire un petit peu par exemple

121
00:05:51,600 --> 00:05:53,960
A l'inverse le javascript il prend assez peu

122
00:05:53,960 --> 00:05:55,880
il prend assez peu en volume et en requête c'est assez sympa

123
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

124
00:06:00,920 --> 00:06:04,120
Donc voilà pour webpagetest, je vous invite à prendre l'URL

125
00:06:04,120 --> 00:06:05,900
et à y aller.