johanBleuzen

Avant mercredi soir, je n'avais jamais été à un ensemble de présentations regroupées sur un même sujet et je regrette aujourd'hui de ne pas en avoir fait avant tant c'est intéressant sur le point technique, le tout dans une ambiance décontractée. Dire que j'ai été emballé par cette première soirée sur les performances web serait un euphémisme, on a eu droit à quatre présentations de très bonne qualité et j'espère très sincèrement qu'il y aura d'autres soirées sur ce thème dans le futur...

Rendez vous était donc pris mercredi 21 juillet pour 19h au 50 avenue des Champs Elysées dans les locaux de la société Octo. Très bien accueilli par quelques employés de la société, des petits fours, des petites bières et de superbes locaux nous attendaient pour que les présentations démarrent. Je note juste un tout petit bémol concernant l'enregistrement vidéo et sonore des présentations, le micro n'a fonctionné qu'à partir de la seconde présentation... Heureusement qu'Eric a parlé bien fort pour faire l'introduction !

Je vais donc essayer de faire un petit résumé des différentes présentations dans les lignes à venir, en cas d'erreur n'hésitez pas à m'en informer dans les commentaires et si vous étiez présent allez donner votre avis sur le formulaire feedback de l'évènement qui vient d'être mis en ligne par Eric.

Impacts de la performance web, rappels

Petite introduction d'Eric Daspet sur les performances web, il a présenté de nombreux graphiques et chiffres qui sont hallucinants. Travaillant actuellement sur un méta-moteur les informations sur Bing, Google et Yahoo m'ont un peu marquées :

• +1 seconde au chargement = -2,8% de revenus pour Bing
• +500 ms au chargement = -20% de trafic pour Google
• +400 ms au chargement = 5 à 9% d'abandon d'affichage pour Yahoo

Ensuite un autre point intéressant, c'est lorsqu'Eric a demandé quels types de profils étaient présent. Sur une cinquantaine de geeks, il devait bien y avoir 80 à 90% de développeurs, une personne dans le WebDesign, une autre dans le SEO, un administrateur système dans l'hébergement et quelques chefs... Les performances n'intéressent que les développeurs à de très rares occasions près.

Le message que je vais retenir de son introduction, c'est sa volonté de voir émerger une vraie communauté française qui graviterai autour des WebPerf. Le format que prendra la communauté n'est pas encore défini, il a été question de blog, forum, wiki, mailling-list. Du coup Eric a fait un second sondage sur ce que l'on attend du fonctionnement de la communauté.

Progressive downloads and rendering

Avec cette présentation on entre vraiment dans le vif du sujet. Stoyan Stefanov travaille dans l'équipe Exceptionnal Performance à Yahoo. La présentation était vraiment intéressante et il dégageait une aisance dans sa présentation qui m'a vraiment donné l'impression qu'il était habitué de faire ce genre de présentation.

Au début, Stoyan a fait une petite introduction sur la relativité du temps, c'est un point que j'ai beaucoup apprécié car on parle de performances et on passe notre temps à mesurer le temps de chargement d'une page ainsi que son poids, mais ce qui est important ce n'est pas le temps, c'est l'impression que l'utilisateur a de la rapidité. Si on édite un service simple sur le web et que l'on veuille que l'utilisateur revienne, il va falloir optimiser le chargement initial pour que le chargement soit le plus efficace possible et que cela soit invisible aux yeux de l'utilisateur. En effet, tout dépend de l'utilisateur cible et de son rapport avec le temps, avec les durées :

J'ai beaucoup aimé ce slide sur la perception de la vitesse, pour certaines catégorie de la population attendre 1 seconde sur internet est inacceptable alors pour d'autres cette limite est de seulement 500ms. Plus l'affichage sera rapide moins la personne aura l'impression d'attendre. Ainsi pour que l'affichage de la page soit progressif (progressive render), il existe une technique qui se base sur la méthode flush() qui doit bien exister dans tous les langages et qui permet d'envoyer une "chunk" du HTML final alors que la génération du HTML n'est pas encore terminée.

Attention cependant, cette méthode du flush() ne peut pas être utilisée partout car avec un framework MVC, le traitement est généralement effectué avant de générer la vue,du coup l'utilisation de la méthode flush() apporte un gain quasi nul au chargement de la page. Cette technique est par exemple utilisée par Google pour sa page de résultats :

La page est découpée en 3 morceaux, ainsi les résultats n'ont pas encore été calculés que le "header" est déjà téléchargé par le client avant de télécharger ensuite le reste des données et le HTML généré. Cette explication est basique mais en gros c'est ce qui se passe.

Je ne vais pas rentrer dans les détails sur tous les points que j'ai noté dans la présentation de Stoyan, mais voici quelques autres petites informations "en vrac" qui valent le coup d'être partagées :

• Utiliser des DataUris pour les petites images (3 ou 4 ko)
• Utiliser des animations lors d'un chargement facilité l'attente
• Il ne faut plus utiliser les GIF, mais des PNG 8 bits.
• Utiliser les scripts en inline est une solution viable
• Présentation en coup de vent d'un outil desktop pour YUI Compressor (soon)

Voila en gros ce que j'aurai retenu de sa présentation, je n'ai pas tout relaté car j'ai pensé que ces données étaient déjà connues.

Firefox, améliorer son site sans coder

Anthony Ricaud, tout récent évangeliste¹ (je n'aime vraiment pas ce mot) nous a fait une présentation sur les nouveautés de Firefox 4 pour faciliter le travail du développeur. Malheureusement, je n'ai pas appris grand chose (étant bien au fait de tout cela) mais il y a quand même une chose qui m'a plu.

Les WebSockets, il a fait plusieurs démonstrations intéressantes sur cette nouveauté du HTML5 et je dois dire que j'ai été bluffé par sa remarque à la fin. Il a précisé qu'il avait codé une petite page sur un site distant qui lui permettait, grâce aux WebSockets, de commander à partir de son téléphone les slides qui s'affichaient dans son navigateur, en l'occurrence une bêta de Firefox 4. Malheureusement, à cause de ces gros doigts, il abandonné son téléphone pour utiliser son clavier sur les derniers slides, mais je trouve l'idée intéressante pour le futur et surtout elle peut fonctionner avec tous les téléphones...

Et puis je ne sais plus qui a dit cette phrase lors de la soirée mais comme elle est liée aux navigateur je vais l'attribuer à l'orateur de la présentation de Firefox :

Avec les navigateurs, une chose est vraie aujourd'hui ne le sera peut être pas demain...

Télécharger du JavaScript sans bloquer le navigateur

Quatrième et dernière session présenté par Jean Pierre Vincent sur les différentes manières d'inclure des JavaScripts. Il présente les trois manières d'inclure du JavaScript dans une page et ce qui était vraiment bien, c'est que pour chaque méthode il a fait la liste des avantages et des inconvénients.

• Inclure dans l'entête
• Inclure en bas de page
• Inclure dans le DOM

Personnellement, je préfère la seconde méthode, car je n'aime pas avoir des balises de script inline et mettre dans le head c'est mal, ainsi je n'ai pas de dépendances dans le HTML de ma page. Coup de bol, Jean Pierre recommande ce type d'inclusion pour un blog.

En plus, de présenter les techniques, il a été fait quelques études de cas sur différents sites (sncf-voyage, netvibes et facebook) qui montre leur manière d'inclure le JS. (j'ai bien aimé le gros #fail de la SNCF...)

Bref, mon résumé sur la présentation de Jean Pierre est assez court car mis à part la dernière partie sur l"inclusion dans le DOM avec un loader, je connais bien les problématiques d'insertion des JavaScripts. Si ce n'est pas votre cas, la présentation est une référence dans le domaine.

Voir les slides de la présentation

Conclusion finale

Tout d'abord, si vous avez lu jusqu'ici merci, c'est pas facile de faire synthétique quand on a autant d'informations à partager ! Ensuite merci à Eric d'avoir organisé une telle soirée et merci à Octo encore pour le prêt de leurs magnifique locaux.

Personnellement j'ai passé une bonne soirée, j'ai appris des petites choses que je ne connaissais pas et j'ai pu rencontrer des personnes que je côtoie sur Twitter presque quotidiennement. De plus cette soirée confirme mon avis sur le fait que les performances vont avoir un impact dans les années à venir sur le web tout comme le web mobile est entrain de tout changer aujourd'hui.

Sinon je n'ai peut être pas appris autant de choses que je l'espérais, cela veut dire deux choses. Soit j'ai vraiment rien compris aux présentations, soit j'en connais déjà un bon petit rayon sur les problématiques de performances web...