Durant tout novembre 2010 a eu lieu le premier concours international de performance Web. Je vous renvoie vers ce post d’introduction si vous n’en aviez pas entendu parler. Le principe était relativement simple : afficher une page le plus rapidement possible. Pour cela la FNAC nous a gentiment prêté son nom, et une page cible.

Nous avons reproduit cette page via des fichiers statiques et les concurrents ont pu modifier les sources sur un serveur commun. Résultats ? la page de base mettait 4-5 secondes avant de commencer à afficher quelque chose d’utile et plus de 15s pour récupérer complètement la page. Et on parle bien de la version statique : pas de script côté serveur, pas de requête SQL, bref aucun ralentissement de côté là.

<video controls width="610" autobuffer preload=”auto”> </video>
Comparaison du rendu progressif entre la page statique originale et les pages des 3 gagnants

Mais comment font ils ?

Afin de contribuer à répandre la bonne parole sur les performances Web, et pour nous aider à les juger, chaque candidat avait la responsabilité de noter les modifications qu’il avait entrepris. Il y en a de toute beauté, mais il faut fouiller pour les trouver : il y en a 250 que vous retrouverez ici dans la colonne Gist. Vous pouvez classer les concurrents par temps de rendu, nombre de requête, poids total et score YOTTAA pour voir ceux des finalistes

Il y a aussi un petit nombre de posts de blogs des participants que je vous conseille de lire :

  • l'énorme post du suractif Cédric Morin, à relire plusieurs fois tant certaines techniques sont géniales. On y apprend aussi que le projet SPIP va bénéficier de cette expérience, qu'il en a profité pour lancer JQI, un lazy-loader de jQuery et qu'il contribue à CSSTidy
  • un retour tout aussi détaillé de Timothée Carry-Caignon sur son travail, avec notamment un bug de <noscript> et pas mal de travail sur JS
  • un court article d'un développeur espagnol spécialisé dans la performance Web, qui dit tout le bien qu'il y a à précharger ses sprites en JS dans le head avant d'y faire référence dans le CSS . Pas sur que l'idée soit géniale.

Ex-concurrent ? : contribuez vous aussi : si vous avez le sentiment d’avoir essayé une technique qui vaut qu’on parle d’elle car elle est peu connue mais efficace ou au contraire connue mais décevante, bloguez dessus ou écrivez moi ! Ca fera peut être l’objet d’un post complémentaire

Je n'ai pas la journée ...

Moi non plus, donc j’ai pris plusieurs soirées : faisant partie du jury, j’ai du passer du temps à analyser le travail de la quinzaine de finalistes (ceux qui avaient le meilleur score calculé automatiquement). En passant j’avais préparé ces articles, que je n’ai mis en forme que récemment, et divisé en une série de 3 posts qui résument globalement les techniques utilisées :

Ce n’est qu’une vue partielle et ça ne sera jamais que mon opinion mais devant la somme de travail et le nombre d’avis divergents potentiels, je ne peux que vous demander de réagir en commentaire, par mail ou par blog, afin que la communauté en bénéficie

Bilan sur le concours lui même

0 retour presse, preuve que la performance Web est loin de l’oeil de la presse informatique généraliste. Mais nous avons tout de même eu 250 inscrits dont 55 ont réellement participé. Aux deux tiers français de par l’influence d’Eric Daspet et Alsacreations, ce chiffre est tout de même largement supérieur à nos attentes (honnêtement j’aurai déjà été heureux avec une vingtaine de français…). J’interprète ce bon résultat comme le signe que les développeurs Web commencent à envisager avec autant de sérieux les techniques de performance Web que l’accessibilité ou le bon usage des CSS.

  • la charge de travail était énorme : ceux qui ont été finalistes ont consacré plus de 30h sur cette page ! Certains ont abandonné après avoir vu le nombre de fichiers et la taille du HTML, et d'autres en en cours de route. Pour être honnête nous ne nous attendions pas à ce volume de travail. Rassurez vous, nous avons passé autant de temps à l'organiser puis à le juger.
  • malgré cela, je maintiens que cette page était parfaite car complètement représentative des pages du Web d'aujourd'hui : un long historique, des fonctionnalités qui s'accumulent, des compétences variées qui travaillent le même code avec différents niveaux de qualité ... Les poids, le nombre de requêtes et les temps de chargement sont dans les moyennes mondiales
  • beaucoup de concurrents, c'est beaucoup d'essais différents, et donc beaucoup de validation / invalidation de techniques. Je pense sérieusement que c'est bon pour les connaissances globales sur les performances Web
  • même les concurrents qui ont abandonné très tôt ont dit avoir appris des choses, ce qui était le but premier. Ne serait ce que de mettre les mains dans le cambouis et se poser des questions qu'on n'a pas le temps ou l'envie de se poser au travail, c'est ça qui fait de vous autre chose qu'une dactylo-codeuse
  • du code open-source a été amélioré ou créé, grâce à l'infatiguable Cédric Morin : Spip, CSSTidy, jQueryLoader
  • nous avons testé les limites de YOTTAA (un bug trouvé et corrigé) et de WebpageTest.org

Vous retrouverez un bilan plus technique dans le dernier post.

Bravo à l’organisateur principal Zeroload qui a eu l’idée et qui a consacré le plus de temps à ce projet. Bravo également à tous les concurrents que je n’ai pas cité dans les différents posts, ça n’était pas facile mais vous comme les autres en retireront une meilleure connaissance. Merci à mes collègues juges Eric Daspet et Stoyan Stefanov et enfin Merci à nos sponsors YOTTA, Catchpoint System et Always Data d’avoir fourni hébergement et lots