Retour sur le Concours Webperf 2010

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à.

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

5 commentaires vers "Retour sur le Concours Webperf 2010"

  1. samy's Gravatar samy
    01/11/2011 - 14:59 | Lien permanent

    Merci pour l’occasion. Même si ma participation n’a consisté qu’à s’inscrire (la motivation ne rajoute pas d’heures aux journées ni ne transforme un jeune enfant en moine zen patient et silencieux ;) ) je trouve déjà toutes sortes de pépites dans les posts cités. Et je dois avouer que retrouver certaines idées ailleurs rassurent sur la méthodologie que j’aurais adopté si j’avais joué :D

  2. Gaël METAIS's Gravatar Gaël METAIS
    01/14/2011 - 17:15 | Lien permanent

    A propos du préchargement des sprites, j’ai aussi découvert que cela permettait de paralléliser le chargement de la CSS et des sprites. Et que ce soit en JS ou d’une autre façon, le résultat est loin d’être négligeable sur les perfs !

  3. 01/21/2011 - 14:36 | Lien permanent

    De la très bonne lecture pour ce soir … merci pour le partage des techniques que je vais lire avec attention !!

  4. 01/27/2011 - 14:23 | Lien permanent

    Bonjour,

    Passionnant, l’ensemble de vos articles sur la performance web sont magnifiquement expliqués et illustrés !!!
    J’ai réalisé su mon blog une série d’articles sur le même thème :

    Vitesse d’affichage de site web améliorée épisode 2 qui présente un outil javascript nommé head.js
    Vitesse d’affichage de site web améliorée, sur le traitement des images, les traitements asynchrones.

    Cordialement,
    Vincent RABAH

  5. 03/03/2011 - 10:38 | Lien permanent

    J’ai bien aimé ce concours, même si j’ai peu participé dans les modifications de la page, cela reste un bon entrainement et l’opportunité d’apprendre des autres.

    Merci

Laisser un commentaire

2 Trackbacks vers "Retour sur le Concours Webperf 2010"

  1. sur 01/11/2011 at 09:58
  2. sur 01/11/2011 at 18:18