[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:06.76,0:00:08.60,Default,,0000,0000,0000,,Alors bonjour, alors on voit rien du tout avec les projos donc
Dialogue: 0,0:00:08.60,0:00:11.36,Default,,0000,0000,0000,,je sais pas si je mets me mettre là si, allez hop
Dialogue: 0,0:00:11.36,0:00:16.44,Default,,0000,0000,0000,,non pas là ? y'a pas de lumière donc c'est moi ben qui verrait rien
Dialogue: 0,0:00:16.44,0:00:17.16,Default,,0000,0000,0000,,donc on va avancer
Dialogue: 0,0:00:17.16,0:00:20.99,Default,,0000,0000,0000,,moi ça fait quand même un petit moment que je travialle sur tout ce qui est performance
Dialogue: 0,0:00:20.99,0:00:24.64,Default,,0000,0000,0000,,l'objectif c'est d'améliorer les temps de réponse des pages web
Dialogue: 0,0:00:24.64,0:00:27.91,Default,,0000,0000,0000,,en gros faire en sorte que quand vous cliquez sur un lien ça s'affiche le plus vite possible
Dialogue: 0,0:00:27.91,0:00:29.56,Default,,0000,0000,0000,,on a essayé pas mal de choses
Dialogue: 0,0:00:29.56,0:00:32.68,Default,,0000,0000,0000,,on avait YSlow à un moment, on avait Page Speed de Google
Dialogue: 0,0:00:32.68,0:00:35.60,Default,,0000,0000,0000,,on avait beaucoup de bonnes pratiques à checker à la main
Dialogue: 0,0:00:35.60,0:00:37.36,Default,,0000,0000,0000,,on avait des outils pour nous aider
Dialogue: 0,0:00:37.36,0:00:42.12,Default,,0000,0000,0000,,Depuis un petit moment on en a un, moi j'utilise quasi plus que ça avant de faire mes analyses manuelles
Dialogue: 0,0:00:42.12,0:00:43.40,Default,,0000,0000,0000,,c'est webpagetest
Dialogue: 0,0:00:43.40,0:00:48.08,Default,,0000,0000,0000,,webpagetest ça vient de AOL qui avait un petit outil qui se rajoutait sur Internet Explorer
Dialogue: 0,0:00:48.08,0:00:52.00,Default,,0000,0000,0000,,qui regardait un petit peu le trafic réseau et qui tentait de faire des analyses
Dialogue: 0,0:00:52.00,0:00:55.68,Default,,0000,0000,0000,,ça s'est beaucoup amélioré depuis maintenant il y a une interface web
Dialogue: 0,0:00:55.68,0:01:01.12,Default,,0000,0000,0000,,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
Dialogue: 0,0:01:01.12,0:01:04.80,Default,,0000,0000,0000,,avec une jolie cascade pour voir les éléments dans quel ordre ils se chargent
Dialogue: 0,0:01:04.80,0:01:08.72,Default,,0000,0000,0000,,on a une première analyse de toutes les recommandations classiques de performance
Dialogue: 0,0:01:08.72,0:01:10.66,Default,,0000,0000,0000,,c'est très basique mais on l'a
Dialogue: 0,0:01:10.66,0:01:14.52,Default,,0000,0000,0000,,on a l'intégration de Page Speed, qui est l'outil de Google pour l'analyse de la performance
Dialogue: 0,0:01:14.52,0:01:17.12,Default,,0000,0000,0000,,qui est directement intégré dans l'outil en ligne
Dialogue: 0,0:01:17.12,0:01:20.44,Default,,0000,0000,0000,,On a des statistiques d'analyse donc des jolis camemberts de répartition
Dialogue: 0,0:01:20.44,0:01:22.96,Default,,0000,0000,0000,,par domaine, par type de fichier, etc.
Dialogue: 0,0:01:22.96,0:01:24.08,Default,,0000,0000,0000,,Je vais vous montrer tout ça après
Dialogue: 0,0:01:24.08,0:01:27.92,Default,,0000,0000,0000,,Et on a la feature qui est absolument indispensable
Dialogue: 0,0:01:27.92,0:01:29.68,Default,,0000,0000,0000,,c'est la capture vidéo pas à pas
Dialogue: 0,0:01:29.68,0:01:33.24,Default,,0000,0000,0000,,Donc pareil, je vais pas vous montrer, parce qu'en 5 minutes ça va être trop court, la vidéo
Dialogue: 0,0:01:33.24,0:01:34.84,Default,,0000,0000,0000,,mais je vais vous montrer à quoi ça ressemble
Dialogue: 0,0:01:34.84,0:01:38.52,Default,,0000,0000,0000,,et derrière on a encore apès des captures réseau brutes avec winpcap
Dialogue: 0,0:01:38.52,0:01:42.04,Default,,0000,0000,0000,,donc captures brutes du réseau
Dialogue: 0,0:01:42.04,0:01:44.72,Default,,0000,0000,0000,,on a des exports HAR, CSV de toutes vos données
Dialogue: 0,0:01:44.72,0:01:49.48,Default,,0000,0000,0000,,pour après les réintégrer dans je sais pas moi vos plateformes d'intégration continue pour faire des statistiques
Dialogue: 0,0:01:49.48,0:01:51.04,Default,,0000,0000,0000,,on a l'archivage du résultat
Dialogue: 0,0:01:51.04,0:01:53.52,Default,,0000,0000,0000,,c'est à dire que moi les pages que j'ai testées il y a déjà longtemps
Dialogue: 0,0:01:53.52,0:01:55.76,Default,,0000,0000,0000,,et ben je les ai encore, j'ai le lien
Dialogue: 0,0:01:55.76,0:01:59.08,Default,,0000,0000,0000,,et quand je vais sur la page en ligne, j'ai encore toutes mes informations
Dialogue: 0,0:01:59.08,0:02:02.32,Default,,0000,0000,0000,,c'est génial pour faire des comparaisons un an après
Dialogue: 0,0:02:02.32,0:02:03.20,Default,,0000,0000,0000,,voilà à quoi ça ressemble
Dialogue: 0,0:02:03.20,0:02:04.84,Default,,0000,0000,0000,,ça c'est ma feature magique
Dialogue: 0,0:02:04.84,0:02:07.20,Default,,0000,0000,0000,,c'est celle pour laquelle j'utilise webpagetest, alors webpagetest,
Dialogue: 0,0:02:07.20,0:02:10.04,Default,,0000,0000,0000,,un petit peu de mal avec la telecommande
Dialogue: 0,0:02:10.04,0:02:11.76,Default,,0000,0000,0000,,webpagetest c'est ça
Dialogue: 0,0:02:11.76,0:02:13.52,Default,,0000,0000,0000,,c'est une petite interface web
Dialogue: 0,0:02:13.52,0:02:15.00,Default,,0000,0000,0000,,on y va, on défini une URL
Dialogue: 0,0:02:15.00,0:02:18.00,Default,,0000,0000,0000,,on défini où est-ce qu'on veut tester la fonctionnalité
Dialogue: 0,0:02:18.00,0:02:21.20,Default,,0000,0000,0000,,si je la teste à partir de l'autre bout du pacifique ma page sera bien plus lente
Dialogue: 0,0:02:21.20,0:02:23.15,Default,,0000,0000,0000,,donc on défini la localisation
Dialogue: 0,0:02:23.15,0:02:29.00,Default,,0000,0000,0000,,on a sur Paris, on a deux serveurs, un IE8 et un IE7 qui sont detenus par Globalis et Zeroload
Dialogue: 0,0:02:29.00,0:02:32.90,Default,,0000,0000,0000,,si vous regardez un peu sur Twitter vous verrez ces deux hébergements
Dialogue: 0,0:02:32.90,0:02:40.32,Default,,0000,0000,0000,,Donc on va définir le navigateur, on a IE7, IE8, IE6 normalement je crois et on a du Chrome en expérimental
Dialogue: 0,0:02:40.32,0:02:42.96,Default,,0000,0000,0000,,donc sur Paris on a que IE7 et IE8
Dialogue: 0,0:02:42.96,0:02:45.36,Default,,0000,0000,0000,,D'ailleurs je fais choisir mon type de connexion
Dialogue: 0,0:02:45.36,0:02:48.60,Default,,0000,0000,0000,,Est-ce que j'ai une ADSL, est-ce que j'ai une fibre optique, est-ce que j'ai un modem RTC ?
Dialogue: 0,0:02:48.60,0:02:51.28,Default,,0000,0000,0000,,là j'ai pris un ASDL assez standard
Dialogue: 0,0:02:51.28,0:02:56.52,Default,,0000,0000,0000,,je peux définir assez précisément ma latence, mon débit, tout ce que je veux
Dialogue: 0,0:02:56.52,0:02:58.16,Default,,0000,0000,0000,,et là je lance mon test
Dialogue: 0,0:02:58.16,0:03:01.72,Default,,0000,0000,0000,,et donc j'obtiens ça comme feature principale
Dialogue: 0,0:03:01.72,0:03:03.88,Default,,0000,0000,0000,,Et là j'ai comparé deux sites
Dialogue: 0,0:03:03.88,0:03:05.48,Default,,0000,0000,0000,,vous avez en haut la timeline
Dialogue: 0,0:03:05.48,0:03:06.80,Default,,0000,0000,0000,,donc chaque image c'est une seconde
Dialogue: 0,0:03:06.80,0:03:10.08,Default,,0000,0000,0000,,vous pouvez préciser par demi seconde, par centième de seconde comme vous voulez
Dialogue: 0,0:03:10.08,0:03:12.08,Default,,0000,0000,0000,,et je vois mon site se charger au fur et à mesure
Dialogue: 0,0:03:12.08,0:03:13.88,Default,,0000,0000,0000,,alors là on voit pas bien à cause du contraste
Dialogue: 0,0:03:13.88,0:03:15.24,Default,,0000,0000,0000,,mais grosso modo là je suis blanc,
Dialogue: 0,0:03:15.24,0:03:18.92,Default,,0000,0000,0000,,j'arrive normalement à une version un peu plus grise avec des images qui se chargent au fur et à mesure
Dialogue: 0,0:03:18.92,0:03:24.96,Default,,0000,0000,0000,,ça c'est l'IG8, donc c'est à dire normalement ce qui se fait de mieux normalement sur internet, voilà
Dialogue: 0,0:03:24.96,0:03:28.24,Default,,0000,0000,0000,,par comparaison vous avez Sud Web juste en dessous
Dialogue: 0,0:03:28.24,0:03:31.56,Default,,0000,0000,0000,,donc Sud Web s'arrête à 4 secondes, l'IG8 je crois qu'il s'arrête à huit secondes
Dialogue: 0,0:03:31.56,0:03:34.28,Default,,0000,0000,0000,,donc on est 2 fois meilleurs que tous les politiques
Dialogue: 0,0:03:34.28,0:03:39.76,Default,,0000,0000,0000,,(applaudissements)
Dialogue: 0,0:03:39.76,0:03:43.72,Default,,0000,0000,0000,,voilà si vous voulez regarder un petit peu ce que ça donne pour un utilisateur
Dialogue: 0,0:03:43.72,0:03:45.56,Default,,0000,0000,0000,,ben ça c'est génial, vous regardez avec votre concurrent
Dialogue: 0,0:03:45.56,0:03:49.52,Default,,0000,0000,0000,,vous voyez exactement, est-ce que votre page elle met plus longtemps à se charger en zone blanche
Dialogue: 0,0:03:49.52,0:03:50.76,Default,,0000,0000,0000,,c'est à dire la page blanche
Dialogue: 0,0:03:50.76,0:03:52.92,Default,,0000,0000,0000,,est-ce que les images arrivent au fur et à mesure ou d'un coup ?
Dialogue: 0,0:03:52.92,0:03:55.44,Default,,0000,0000,0000,,c'est à dire est-ce qu'on est train de charger le bas de la page ou le haut de la page
Dialogue: 0,0:03:55.44,0:03:59.40,Default,,0000,0000,0000,,sur le ressenti de la performance par l'utilisateur c'est vraiment ça qu'il faut regarder
Dialogue: 0,0:03:59.40,0:04:01.00,Default,,0000,0000,0000,,après on a toutes les analyses
Dialogue: 0,0:04:01.00,0:04:02.88,Default,,0000,0000,0000,,donc là c'est ce qu'on appelle la cascade réseau
Dialogue: 0,0:04:02.88,0:04:06.41,Default,,0000,0000,0000,,on voit donc chaque ligne c'est un composant javascript ou image
Dialogue: 0,0:04:06.41,0:04:08.44,Default,,0000,0000,0000,,on voit les composants se charger un à un
Dialogue: 0,0:04:08.44,0:04:11.52,Default,,0000,0000,0000,,les couleurs c'est est-ce que mon navigateur il attend, est-ce qu'il est en train de télécharger,
Dialogue: 0,0:04:11.52,0:04:13.60,Default,,0000,0000,0000,,est-ce qu'il est en train de faire une requête DNS ?
Dialogue: 0,0:04:13.60,0:04:16.60,Default,,0000,0000,0000,,donc si vous avez après repéré des problèmes dans la vidéo
Dialogue: 0,0:04:16.60,0:04:17.80,Default,,0000,0000,0000,,c'est là dessus qu'on le voit
Dialogue: 0,0:04:17.80,0:04:20.96,Default,,0000,0000,0000,,la première c'est toutes les ressources, normalement ça descend longuement
Dialogue: 0,0:04:20.96,0:04:24.00,Default,,0000,0000,0000,,après vous avez le CPU, la bande passante
Dialogue: 0,0:04:24.00,0:04:26.04,Default,,0000,0000,0000,,et là vous avez les flis de connexion de votre navigateur
Dialogue: 0,0:04:26.04,0:04:29.64,Default,,0000,0000,0000,,votre navigateur il a plusieurs connexions vers un serveur pour faire plusieurs requêtes en parallèle
Dialogue: 0,0:04:29.64,0:04:32.16,Default,,0000,0000,0000,,et donc là on voit un petit peu, on voit tiens ici j'ai un trou
Dialogue: 0,0:04:32.16,0:04:34.80,Default,,0000,0000,0000,,pourquoi j'ai un trou ? peut-être que j'ai un javascript bloquant
Dialogue: 0,0:04:34.80,0:04:37.72,Default,,0000,0000,0000,,donc à ce moment là on va retirer le javascript bloquant et on va tenter de corriger
Dialogue: 0,0:04:37.72,0:04:39.72,Default,,0000,0000,0000,,donc voilà un petit peu ce que vous avez
Dialogue: 0,0:04:39.72,0:04:43.60,Default,,0000,0000,0000,,... pour aller plus loin donc on a les analyses
Dialogue: 0,0:04:43.60,0:04:45.24,Default,,0000,0000,0000,,donc ça c'est des analyses très standards
Dialogue: 0,0:04:45.24,0:04:47.64,Default,,0000,0000,0000,,c'est est-ce que mes images sont bien optimisées ?
Dialogue: 0,0:04:47.64,0:04:49.99,Default,,0000,0000,0000,,est-ce que mes connexions vers le serveur sont persistantes
Dialogue: 0,0:04:49.99,0:04:53.56,Default,,0000,0000,0000,,ou est-ce que je les refais à chaque fois que je veux télécharger un compossant ?
Dialogue: 0,0:04:53.56,0:04:55.12,Default,,0000,0000,0000,,voilà vous avez les petites grilles
Dialogue: 0,0:04:55.12,0:04:59.20,Default,,0000,0000,0000,,la petit grille vous met du vert ou du rouge c'est super pratique
Dialogue: 0,0:04:59.20,0:05:02.08,Default,,0000,0000,0000,,elle vous met en dessous en plus tous les détails, vous les aviez aussi pour le réseau
Dialogue: 0,0:05:02.08,0:05:04.36,Default,,0000,0000,0000,,On a les détails de chaque connexion, on a toutes les entêtes
Dialogue: 0,0:05:04.36,0:05:06.28,Default,,0000,0000,0000,,toutes les tailles, les temps, etc.
Dialogue: 0,0:05:06.28,0:05:11.36,Default,,0000,0000,0000,,Donc ça me dit par exemple voilà, j'ai 41 ressources sur 100 qui sont mal codées
Dialogue: 0,0:05:11.36,0:05:16.20,Default,,0000,0000,0000,,et je peux gagner exactement 128 kilos sur ma page si jamais je les code mieux.
Dialogue: 0,0:05:16.20,0:05:19.80,Default,,0000,0000,0000,,On a après derrière l'analyse de Page Speed mais vous vous verrez
Dialogue: 0,0:05:19.80,0:05:21.60,Default,,0000,0000,0000,,l'analyse de Page Speed, elle est pas très intéressante
Dialogue: 0,0:05:21.60,0:05:23.56,Default,,0000,0000,0000,,ouais donc j'ai fini, hop
Dialogue: 0,0:05:23.56,0:05:28.14,Default,,0000,0000,0000,,et ça c'est la fin, c'est tout ce qui est statistiques jolies pour apporter à votre patron
Dialogue: 0,0:05:28.14,0:05:30.04,Default,,0000,0000,0000,,c'est des jolis camemberts donc on vous dit
Dialogue: 0,0:05:30.04,0:05:34.12,Default,,0000,0000,0000,,par exemple là très bien je vois au niveau des requêtes j'ai
Dialogue: 0,0:05:34.12,0:05:36.92,Default,,0000,0000,0000,,grosso modo les 2/3 de Sud Web qui est fait par des images
Dialogue: 0,0:05:36.92,0:05:39.20,Default,,0000,0000,0000,,moitié pour GIF moitié pour JPG
Dialogue: 0,0:05:39.20,0:05:42.52,Default,,0000,0000,0000,,Et au niveau du volume des données, le GIF il tient très très peu
Dialogue: 0,0:05:42.52,0:05:43.92,Default,,0000,0000,0000,,donc je pense que c'est des toutes petites icônes
Dialogue: 0,0:05:43.92,0:05:45.60,Default,,0000,0000,0000,,et par contre j'ai des très grosses JPEG qui prennent
Dialogue: 0,0:05:45.60,0:05:47.60,Default,,0000,0000,0000,,quasiment les deux tiers de mes requêtes
Dialogue: 0,0:05:47.60,0:05:49.44,Default,,0000,0000,0000,,donc je pense que les JPEG elles sont de très bonne qualité
Dialogue: 0,0:05:49.44,0:05:51.60,Default,,0000,0000,0000,,peut-être ça vaudrait le coup de les réduire un petit peu par exemple
Dialogue: 0,0:05:51.60,0:05:53.96,Default,,0000,0000,0000,,A l'inverse le javascript il prend assez peu
Dialogue: 0,0:05:53.96,0:05:55.88,Default,,0000,0000,0000,,il prend assez peu en volume et en requête c'est assez sympa
Dialogue: 0,0:05:55.88,0:06:00.92,Default,,0000,0000,0000,,donc ça c'est comment on peut voir un petit peu ce qui se passe et analyser très rapidement
Dialogue: 0,0:06:00.92,0:06:04.12,Default,,0000,0000,0000,,Donc voilà pour webpagetest, je vous invite à prendre l'URL
Dialogue: 0,0:06:04.12,0:06:05.90,Default,,0000,0000,0000,,et à y aller.