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.