Hier s’est ouvert le premier (ok, le second dans l’idée) concours international de Performances Web, il durera jusqu’au 30 novembre. EDIT : le concours 2010 est maintenant fini, vous pouvez voir les gagnants ici et l’analyse des techniques employés là

Comment ça marche ?

Le principe est simple : tous les développeurs doivent optimiser la même page, page prêtée par La Fnac, et mise à disposition sous forme de fichiers statiques que vous pourrez modifier à volonté. On parle donc bien d’un concours de performances frontales, puisque le code backend ne peut pas influer sur le temps d’affichage de la page. Ce qui tombe bien car c’est là où passe 90% du temps d’affichage : sur cette page très représentative des sites Web d’aujourd’hui, 1 seconde suffit à générer le HTML, les fichiers statiques sont servis en 50ms chacun, ce qui correspond à des performances honorables côté backend. Mais le site n’est pas utilisable avant plusieurs secondes (voir ce graphique). Inscrivez vous donc et visez une des 3 catégories (ou toutes, ce qui est théoriquement possible) :

  • meilleur score YOTTA (sponsor principal fournissant des outils de monitoring de performances). Le score YOTTA est, je cite : "an overall performance assessment that takes into account page load time, global reachability, yslow and complexity". Récompense : un iPad
  • meilleur temps d'affichage, calculé par l'indispensable webpagetest.org depuis un IE7 à Paris. Le start render actuel est à 2.5s et n'est pas très utile (voir ce screenshot), d'autant qu'il est suivi par un freeze du navigateur perceptible à la souris nue, et visible facilement sur ce graphique où l'on voit le CPU plafonner à 100% pendant plusieurs secondes. Le temps onload total est de plus de 7 secondes, je pense que le diviser en 2 avec des fichiers statiques et un peu de malice est largement jouable. Récompense : un iPod touch
  • plus petit nombre de requêtes HTTP et poids total, calculés en additionnant première et seconde impression de la page. La difficulté dans cette catégorie est que les techniques permettant l'un et l'autre sont parfois antinomiques. Récompense : des livres dédicacés par Stoyan Stefanov

Une fois inscrit, vous recevez un espace FTP et un ZIP contenant les fichiers statiques.

J'ai une chance ?

L’idée du concours est bien sur d’apprendre en s’amusant, avec la concurrence comme aiguillon. En passant du temps sur cette page de la FNAC, vous allez pouvoir mettre les mains dans le cambouis, et on sait bien qu’en terme de développement en général, et d’optimisation en particulier, c’est la meilleure école. A mon sens la connaissance basique des performances Web fait maintenant partie intégrante de l’arsenal d’un développeur Web moderne, au même titre que le respect des balises HTML ou du passage des layouts en tableau au tout-CSS il y a plusieurs années. Accessoirement, c’est l’un des premiers concours avec ce thème et la discipline commence à peine à être maîtrisée. Pour preuve, il doit y avoir moins de 10 professionnels vivant uniquement du consulting sur les performances Web dans le monde, et un seul en France (Zerolad, par Vincent Voyer, organisateur principal). Nous sommes donc tous plus ou moins amateurs, peu nombreux et vous avez dès lors de vraies chances de gagner.

Quelques conseils

Etant donné que je suis juge, je vais tenter de rester impartial pour ne pas favoriser les français ou mes lecteurs. Cependant je vais vous faciliter la tâche en rappelant ces quelques ressources qui vous donneront une idée de par où commencer. Ces ressources sont publiques et vous serviront même en dehors de ce concours.

  • la liste de référence toujours valable faite par Yahoo! : Dans le cadre de ce concours, il est clair qu'il vous faut au moins assurer sur la majorité de ces conseils. C'est de toute façon une connaissance et des techniques qui vous serviront sur tous les sites.
  • l'autre liste de référence, faite par Google. Les points se recoupent aussi en général je me contente de citer la liste de Yahoo!. Mais pour ce concours, vous voudrez certainement optimiser plus avant et certains points innovateurs de Google devraient vous aider à gratter des dixièmes de secondes ou quelques kilos
  • les archives d'Eric Daspet (co-organisateur et juge), qui bloguait en français à l'époque où toutes les règles de performances commençaient à sortir
  • mes propres archives des RPW taguées "Perfs" qui couvrent elles l'année écoulée et qui contiennent des conseils généraux et aussi quelques techniques extrêmes difficile à sortir en production mais qu'il serait intelligent de déployer dans un concours de performances Web :)

Côté outils, pour vous éviter beaucoup de choses fastidieuses, surtout les premières heures :

  • les classiques ySlow et pageSpeed, pour repérer facilement les problèmes basiques, sur Firefox. Le score ySlow fait d'ailleurs partie du score YOTTA
  • le complexe mais très utile dynatrace AJAX, pour Internet Explorer. Il permet notamment de comprendre comment IE affiche une page, et peut vous aider à repérer d'autres problèmes invisibles de firebug
  • le méconnu AOL page Test pour IE, qui est en fait le logiciel utilisé par WebPageTest.org . 3 avantages :
    • Vous verrez votre page comme la verront les juges :)
    • Vous ne dépendez pas de Webpagetest.org qui sera forcément saturé de demandes des autres concurrents
    • Vous ne révélerez pas votre URL secrète par erreur aux autres concurrents en passant par WebPageTest.org . Il suffit d'oublier de cocher la case "private" une fois ...
  • IE7 ! c'est notre étalon, il ne faut donc pas se baser sur des navigateurs plus récents comme IE8 et Firefox. Vous devriez y installer AOL page Test pour voir la page telle que Webpagetest.org la testera. Faîtes attention aux packs d'IE : ils dépannent dans la majorité des cas, mais j'ai déjà noté des différences de comportement (filtres CSS, interaction avec plugins et addons ...) et je ne sais pas si cela influe sur la manière d'afficher une page (nombre de requêtes parallèles par exemple). Utilisez une machine virtuelle pour chaque IE reste un bon conseil.

Et enfin des discussions :

  • le groupe de discussion performances Web français lancé cet été à la suite de la première soirée Webperfs où vous devriez trouver tous ceux qui ressemblent à un expert des performances Web
  • un forum ouvert récemment pour l'occasion sur developpez.com, et qui restera sûrement après le concours. Nous surveillons ce forum pour répondre à vos questions si vous sentez que vous tentez des optimisations un peu trop extrêmes et que vous n'êtes pas surs que nous les accepterons au final
  • et bien sur le twitter officiel du concours : @webperf_contest qui vous permet de dialoguer directement avec nous

Un dernier conseil pour ce concours : remplissez bien votre Gist de toutes les modifications que vous faîtes. Nous nous doutons que les finalistes arriveront dans la même plage de 50-100ms et il serait injuste que les aléas du réseau choisissent un gagnant. Pour les départager, nous allons tout simplement lire les techniques que vous aurez appliquées et voter au plus méritant (originalité, facilité de mise en oeuvre …) Voilà, inscrivez vous, téléchargez et jouez avec la page. C’est le moment d’apprendre et peut être même de gagner des bouquins ou un peu d’électronique :)