Concours international de performance web

oui, venez donc, on vous attend pour que les frenchies montrent au monde de quoi ils sont capables :)
et la pratique sur une page réaliste (la fnac), mais sans contrainte de mise en production, c'est la meilleure école pour apprendre les perfs Web dont les bases doivent maintenant faire partie de l'arsenal du développeur Web moyen.
Si vous voulez quelques outils et références pour s'y mettre, regardez à la fin de cet article : http://braincracking.org/2010/10/27/concours-...

Pas sûr du tout d’avoir le temps (/l’énergie) de participer, mais c’est sûr que c’est intéressant, au moins pour apprendre ou se perfectionner.

L'idée est intéressante... mais franchement prendre une page de 4000 lignes n'est vraiment pas une bonne idée.

Le travail nécessaire est énorme, alors qu'une page bien plus simple aurait pu permettre de montrer de nombreuses techniques sans nécessiter ce travail de fourmis.

Au passage votre formulaire d'inscription ne reconnait pas une URL comme étant valide si on ne met pas HTTP...

Oui c'est un peu décourageant quand on voit la page en question. C'est pour revendre à la Fnac quand ce sera terminé ? :p

@jjaffeux : le code HTML seul n'est pas grand chose dans les performances Web, en fait pour cette page comme sur beaucoup de sites Web tu peux déjà diviser le temps d'affichage pas 2 rien qu'en touchant le .htaccess et en faisant quelques opérations simples :)
Il nous fallait une page réelle lambda, et cette page représente bien les pages d'aujourd'hui. Tu peux effectivement aller gratter quelques Ko en retapant toi même le code, mais avant ça il y a une longue liste de techniques à appliquer :)

@cedb3 : on a galéré pour trouver quelqu'un qui voudrait bien nous prêter son nom et une page pour s'amuser avec, c'est nous qui leur devons quelque chose :) Ils auront une liste d'optimisations plus ou moins dingues à appliquer, ça accélérera le Web français monsieur

Personnellement, je trouve le nombre des fichiers proposés dans le zip trop élevé. C'est dommage, je comptais participer mais j'ai été découragé. Peut-être aurait-il fallu un peu moins d'ambition ? D'autant plus qu'il s'agit d'une page générée côté serveur, en conditions réelles il serait trop difficile de maintenir une telle quantité de code (une vraie soupe) de façon statique. Bonne chance aux participants.

J'aurais bien voulu participer, mais avoir un produit Apple c'est comme aller chez Macdo. Dommage !

@alesson : quel rapport avec l'intérêt éventuel du concours ? Tu veux dire que tu refuserais uniquement "à cause" du lot pour le gagnant (que tu n'es pas obligé d'accepter, je présume) ??

Perso, je trouve l'idée de ce concours très sympa, mais les lots trop loin d'être suffisamment intéressants pour justifier ce que va gagner la fnac en terme de référencement, accessibilité, etc... Qu'une PME organise ce genre de concours parce qu'elle n'a pas de gros moyens pour améliorer son site, je comprends. Qu'une grosse boite comme la FNAC le fasse, je trouve ça très moyen.

Après, si j'ai le temps, je participerai peut-être quand même. Mais je pense que ça avait besoin d'être dit.

Bonsoir, je suis l'organisateur du concours. Merci pour cet article, la force du site alsacréations se fait sentir sur le serveur ou j'héberge le site du concours!

Je tiens à préciser que l'initiative du concours n'est pas venue de la FNAC. La FNAC n'a pas non plus besoin de ce concours pour faire optimiser son site web, elle fait déjà appel à des sociétés spécialisées.

Si c'est le site web de la FNAC qui est utilisé c'est parce que c'est un des seules entreprises du web qui a été assez courageuse pour accepter qu'on utilise leurs pages web pour le concours.

En effet, pour que le concours soit pertinent il nous fallait trouver un site web avec : du trafic (optimiser un site web qui n'en a pas, ce n'est pas utile), du code JS et CSS conséquent, des particularités (ex : le code html assez "lourd", principalement du au fait que le site de la FNAC existe et est mis à jour depuis longtemps).

Ainsi si il y a quelqu'un à remercier pour ce concours c'est bien la FNAC qui fut assez "sympa" pour accepter d'être un peu exposée. Jusqu'au dernier jour avant le lancement du concours, il n y avait pas de site vraiment pertinent qui souhaitait participer et il n y aurait pas forcément eu de concours sans le site web de la FNAC.

Pas sûr d'avoir le temps (ni l'envie) d'y participer :)

L'idée d'un tel concours est intéressante, mais tout comme d'autres, je trouve l'archive beaucoup trop grosse à traiter (surtout si le concours se termine à la fin du mois).

Bref, si ca avait été un peu moins gros, je me serais peut-être attaqué au projet...

On passe des heures a se farcir des optimisations de code, d'images, de techniques et autres bidouilles que tout le monde connaît. Pas le moindre lot pour le 4ème ? Même le 50ème devrait en avoir un !

Si on veut s'exercer aux perfs dans un cadre ludique et convivial il y a d'autres moyens à mon avis.

@jjaffeux: Il me semble tout à fait une bonne chose qu'une adresse sans protocole soit considérée comme invalide. En fait, vu le public ciblé, c'est plutôt si elle était considérée comme valide que je considérerai qu'il y a bug.

Pour la page sujet du site j'appuie Vincent. Il faut plutôt les remercier. Je vous assure que la personne qui a du prendre la décision a certainement du prendre un gros risque interne. Je compte sur vous pour que cela ne lui retombe pas dessus.

Pour les lots, disons que nous sommes preneurs d'autres lots @iManu. C'est vrai qu'il aurait été bien d'en avoir plus et qu'il sera frustrant de ne pas pouvoir récompenser autre chose que les premiers. Là nous en avons à peine une dizaine (à notre décharge les deux premiers sont loin d'être ridicules)

Pour le gros zip, là étonnement je suis plutôt heureux d'entendre ces critiques. Une page plus simple n'aurait pas permis d'avoir une centaine de concurrents avec des optimisations et des résultats différents. C'est aussi grâce à ça que j'espère voir venir des choses un peu inhabituelles au lieu de tout appliquer la même chose au même endroit.
Le risque c'est celui que vous exprimez : que le paquet paraisse gros et insurmontable. N'oubliez pas qu'il s'agit d'un processus d'amélioration. L'objectif est d'avoir "mieux", pas d'avoir un "parfait". A vous de regarder le moyen d'action qui vous plait le plus et le temps que vous voulez y passer, puis concentrez vous sur la partie qui vous intéresse.
C'est aussi pour ça que j'ai tenu à avoir plusieurs catégories et pas un seul classement : ça permet à chacun de se focaliser sur un aspect, celui qui l'intéresse, sans forcément embrasser toute la page (par manque de temps, ou simplement d'amusement).

Après bon, notre objectif est aussi beaucoup de faire parler et de montrer la question des perf. Je m'occuperai de lancer d'autres animations et événements en France avec d'autres angles d'attaque.

@iManu : on écoute toute suggestion pour rendre + fun l'édition de code et l'optimisation de performances :)

@alesson : si tu n'aimes pas les produits apple, je te suggère de viser la catégorie "plus petit nombre de requêtes HTTP et poids total" : il y a des livres très techniques à gagner

@LuciferX @dew : le nombre de lignes de code et de fichiers peut impressionner au premier abord, mais en utilisant quelques outils que je ne veux pas trop détailler ici (j'ai déjà donné de grosses indications dans mon post), tu peux rapidement réduire ces nombres.
Le but premier, c'est l'apprentissage de cette spécialisation dans le métier de webdev, et il n'y a pas mieux pour ça que de mettre les mains dans le cambouis. En fin de concours, on listera toutes les techniques utilisées, mais une liste sans fin est beaucoup moins pédagogique que lorsqu'on a expérimenté soi même : imagine toi 10 ans en arrière essayer d'apprendre CSS2 pour remplacer tes TABLE et tes FONT : un listing ne vaut pas grand chose si tu n'as pas un peu bidouillé

@jpvincent : je reproche surtout le fait que la page soit un véritable capharnaum.. à priori je trouve plus fun, et équitable pour les débutants en optimisation, de poser une contrainte avec des images, des couleurs, des textes, un gabarit, des bibliothèques, des fonctionnalités imposées, le tout non-encore mis en page.

Libre ensuite au concurrent de construire sa page en utilisant les éléments fournis.
Je pense qu'en partant de zéro un débutant assimilera mieux les techniques plutôt que de jongler avec les données foisonnantes d'un site existant, ce qui semble plus être l'apanage d'un professionnel qui aurait déjà une solide expérience d'optimisation.
Le principe d'avoir les mains dans le cambouis reste identique, c'est l'avantage.

@iManu : je vois ce que tu veux dire maintenant. Notre choix a été de mimer ce qu'il se passe dans les développements d'aujourd'hui : on optimise par dessus l'existant (ce qui est malgré tout la manière la plus rentable de faire). Et le but n'est pas de construire une page mais de l'accélérer ce qui change un peu du travail d'intégrateur :)

J'aime beaucoup l'idée, il y a pas mal de choses à faire! Je serai bien motivée pour participer (même si je ne pense pas pouvoir prétendre à une bonne place), mais c'est vraiment une histoire de temps :/

Je salue l'initiative, j'espère avoir le temps d'y participer sérieusement (déjà inscrit, plus qu'à bosser !).

Par contre, si y a des animations ou des événements, je suis intéressé !

@jpvincent : de toute façon il faudrait la reconstruire pour être propre, je ferai comme ça si j'avais un peu de temps pour participer (ce que je n'ai pas et je le regrette, vraiment).
Je comprend très bien l'optimisation/simplification sur l'existant : je ne fais que ça en ce moment, pour un gros intranet où des générations de dévs ce sont succédés sur les scripts (c'est gluant !! une horreur !).
Bonne continuation, je vous souhaite plein de participants en tout-cas !

C'est le temps qui me fait défaut, je suis déjà fort pris avec d'autres choses nécessitant tout autant de créativité et d'astuces ou "tours de force".
Sinon, nul doute que j'aurais tenté ma chance (pour le fun) ;-)

J'avoue que le titre et le concept avaient l'air prometteur, mais vu la page c'est couru d'avance pour moi. En effet, en tant que débutante, je pense que je vais surtout galérer plus qu'autre chose pour un résultat pas génial au final. Le but de l'exercice étant d'apprendre, me connaissant, je vais abandonner vite, ce n'est pas amusant d'apprendre en pédalant dans la semoule ^^
La 2em chose qui m'ennuie, il est dit que la FNAC est partenaire mais je n'ai pas cru lire ce qu'ils vont faire de la page ? Ils ont juste fourni gentiment la page, ou ils vont avoir un accès aux résultats / solutions d'optimisation ?

Je m'étais chauffé, j'ai dé-zippé l'archive, puis j'ai pas continué :/ Trop de contenu dans le HTML, trop d'images... Il faut pas mal de temps et de réflexion pour espérer avoir un résultat satisfaisant...

Dommage que l'archive soit si "lourde" :) Bonne chance aux participants !

@Inpixeltrust: les propositions etant publiques par la force des choses a l'issue du concours, il est evident qu'ils pourront repiquer les idees a droite a gauche pour ameliorer leur site.

C'est certainement une motivation pour eux, meme si reprendre un contenu optimisé statique pour le reintegrer en dynamique avec des contraintes propres est loin d'etre simple.

Mouais... j'étais vraiment super chaud à l'idée de faire ce concours et la je lis sur le site braincrak.org :

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

Je suis pas refroidi je suis glacé... l'interêt eut été énorme si on avait pu montrer la puissance des techniques utilisables dans de vrais navigateurs... autant de travail pour se contenter de n'utiliser que des bidouilles je vais y réflechir avant de me lancer...

Et on ne sait même pas quel iPad et iPod ce sont :o(

Heu.. ouais c'est tendu quand même, le page de base à 98/100 au Page Speed Score, bon courage à ceux qui se lance

@Loucas : pas sûr... page speed indique ça quand tu la testes en local. :)

En effet ce n'est que le score en local...
Finalement je m'y suis mis...
A tous ceux qui disent que la fnac n'a pas besoin de gens pour leur optimiser leurs pages, je les invite a jeter un oeil au code source :) un joli <table> en guise de template 3 colonne, ça me rappelle mes débuts :D

Initiative intéressante mais je n'aurais probablement pas le temps d'y participer.

On parle de .htaccess, donc serveur d'applications Apache, me trompe-je ?

Y a-t-il un cahier de description du reste de l'environnement technique ?

J'ai déjà fait un gros tri, et pourtant, je n'ai qu'optimisé des images, groupé des fichiers et fait un tout petit peu de ménage... et déjà ça soulage pas mal (j'ai pas encore mis le nez dans la CSS).

L'idéal, ça serait une réécriture from scratch, mais j'ai pas le temps... et pas l'envie. :)

@skywalk3r : je voudrais bien connaître ta définition de bidouille dans le développement Web :) En tout cas ça fait gagner du temps d'affichage et donc de l'argent aux sites qui pratique les optimisations Web
Au début, on voulait effectivement une catégorie "meilleurs perfs sous firefox" (ou webkit), pour justement démontrer que le futur sera rapide pour tout le monde. Mais nous avons un nombre limité de cadeaux à faire gagner et donc de catégories, il a donc fallu sacrifier celle là et une demie dizaine d'autres pour en revenir aux basiques : développez pour IE7, les autres navigateurs feront de toute façon mieux

@Nicololo : la liste de ce qui est dispo sur l'apache : http://gist.github.com/644842
le reste, c'est du statique

@Nico3333fr : je suis pas sur qu'une réécriture from scratch apporte grand chose, les concurrents dans le top 10 utilisent plein d'outils puis après passent au manuel

@jpvincent : ma reflexion était quelques peu a froid... j'ai comme beaucoup de monde passé pas mal de temps a bidouiller avec IE (je considère que je bidouille quand je change de clavier parce que la touche F5 est morte :D ) à mes débuts et je suis devenu chauve a cause de ce navigateur (c'est pas vrai, hein :) ). Au final je trouve ce concours très intéressant et quoi qu'il advienne j'apprends énormément de choses dont certaines seront très certainement mises en application rapidement sur le site pour lequel je bosse. Belle initiative que l'organisation de ce concours.
Il n'y a que les imbéciles qui ne changent pas d'avis n'est ce pas?

Alors moi j'ai participé et j'ai voulu viser le "Moins de requêtes possible".
Du coup, j'ai fais le site de la FNAC en 1 seule requête HTTP mais ça n'a pas vraiment plus aux organisateurs du concours.
L’expérience était marrante à faire et le résultat assez surprenant.
J'espère que je ne serais pas banni du concours et que je pourrais vous faire profiter de cette belle page ;)

@arnolem : oui, j'ai vu ta page et je suis très content que tu aies testé cette technique extrême, car on a appris des choses :)
on ne bannit pas les gens (il n'y a pas d'insultes ou quoi que ce soit ...), mais en tout mettant dans une seule requête, tu as sacrifié des fonctionalités et ça ne marche pas sous IE7, 2 conditions éliminatoires ( !== banni ). Mais tu passeras à la postérité :)

Je ne suis pas mécontent que ce soit terminé.
D'un autre côté maintenant j'ai encore plus de boulot qu'avant.

Il y a déjà une date de prévue pour la publication des résultats ?

Bonjour tout le monde

Dommage j'ai raté le concours, je ne suis tombé sur qu'aujourd'hui, zut alors

Mais j'aimerais bien y participer la prochaine fois mais QUAND??? Est-ce que c'est un concours périodiques?

En fait comment apprendre tous les trucs? Je sais faire pour OnLoad grâce à Google PageSpeed mais la rapidité de rendu?? Qu'en est-il des requêtes? Quelles requêtes?

@jpvincent Effectivement, le menu ne marche pas sous IE7 mais cela est du au fait que j'ai fait un très gros ménage sur les CSS et JS non utilisé (ca ne remets pas en cause la technique du PNG inline)
Par contre, je ne vois pas de quelles fonctionnalités parles-tu ? La seule chose que j'ai "virée" c'est inclusion du script pour les statistiques car celui-ci n'était pas optimisable en l'état.
Lorsque je disais que ça n'avait pas vraiment plus aux organisateurs, je faisais référence à ce tweet : http://twitter.com/#!/webperf_contest/status/...

Concours très intéressant en tout cas.

@raknal : ce concours est unique et nous n'avons pas prévu de suite pour le moment. J'espère bien qu'on va remettre ça, mais ça fait vraiment beaucoup de travail pour les organisateurs : le premier est toujours fun donc ça fait passer la pillule, mais un suivant est moins évident. On verra d'ici 6 mois - 1 an si on trouve le temps ou si quelqu'un d'autre a envie de reprendre le flambeau.
Pour t'autoformer, j'avais réuni une liste de ressources (en français pour la plupart) à la fin de mon article de lancement du concours : http://braincracking.org/2010/10/27/concours-...
et pour ceux qui ont participé, au moins ouvert la page FNAC, ou même pour ceux qui veulent s'inspirer, j'ai fait un quadruple post ici :
http://braincracking.org/2011/01/10/retour-su...
A siroter doucement, il y a du lourd :)

@arnolem : oui on n'aurait pas du te répondre aussi sèchement, mais bon il paraît qu'on est des êtres humains :) D'autant que le fait de tenter ce que tu as fait nous a appris des choses, je t'ai même mis en exemple dans un de mes articles. Ce qui ne marchait pas dans IE7, c'était toute la page. Je pense que tu as du la tester avec un IETester ou un mode de compatibilité plutôt qu'un IE7 natif ?

Si il y a une prochaine édition je participerai, j'arrive un peu en retard :)