Accueil > Blog-notes > Ma participation au Webperf-Contest 2010

Ma participation au Webperf-Contest 2010

J’ai participé au Webperf-Contest 2010 organisé par zeroload. Je reviens dans le détail sur cette expérience qui fut enrichissante et énergivore.

Le concours

Ainsi qu’exposé sur son site le but de ce concours de Web performance était d’optimiser une page web existante et essayer d’obtenir le meilleur résultat possible dans 3 catégories (score selon http://www.yottaa.com, "onload" et "start render" calculés à l’aide de http://www.webpagetest.org, et plus petit nombre de requêtes et poids du site)

Chaque participant disposait d’un espace FTP alloué à son inscription, et devait y uploader le résultat de son optimisation pour qu’elle soit ensuite évalué par un jury.

Le concours s’est déroulé du 25 octobre au 30 novembre 2010.

Ma participation

Je me suis inscrit au concours en partie par jeu (j’aime assez les défis et autres casse-têtes), en partie car c’était une bonne occasion de me mettre à niveau, d’approfondir des sujets techniques autour du WPO que je n’avais pas encore pris le temps de creuser, et enfin de m’évaluer par rapport aux autres sur ce sujet.

La page à optimiser était tirée du site de la Fnac, et plus particulièrement de la page enfant, figée au moment du concours.


La page à optimiser

Après un premier examen rapide du contenu de la page, il est vite apparu que l’optimisation allait faire appel à un large spectre de compétences.

Dans sa forme, la page est en effet assez typique de ces gros sites qui ont une histoire, que l’on retrouve comme autant de couches sédimentées. Chaque intervenant qui passe dessus rajoute ses évolutions, corrections, modifications, se superposant aux précédentes que l’on se garde bien de toucher de peur que cela ne casse une autre partie du site.

Avoir une vision globale d’un gros site comme celui de la Fnac est en effet souvent bien difficile, et il est du coup presque impossible de nettoyer l’existant avant toute modification. Tout cela entraine une lente dérive vers toujours plus de composants JS, plus de directives CSS, une construction HTML de la page qui s’alourdit... et un site qui manque de réactivité et de vélocité.

Il n’y avait qu’à regarder la cascade de chargement initiale pour achever de s’en convaincre.


Waterfall de la page initiale

De la méthode, du travail... et du temps !

De fait, le temps nécessaire à passer sur le concours pour parvenir à une copie d’un très bon niveau s’est avéré complètement disproportionné par rapport à l’espoir de gain matériel (dans le meilleur des cas un iPad).

Certains ont préféré arrêter les frais après une journée de travail, sur la foi d’une logique purement financière.

En ce qui me concerne, j’ai un rapport à mon activité qui n’est pas guidé par ce genre de logique, et je suis capable de passer beaucoup de temps sur un sujet sans espoir de rémunération, simplement parce que cela me plaît. C’est le genre de choses pour lesquelles j’apprécie mon statut d’indépendant : avant tout pouvoir faire ce qui me plaît [1]

Je me suis donc attelé au travail d’arrache-pied, en prenant les problèmes techniques un par un, sans chercher à arriver tout de suite à un résultat.

Une des premières choses que j’ai faites est de versionner mon projet. C’est une déformation que j’ai héritée de ma contribution à un projet libre [2] : je ne sais plus travailler sans un outil de gestion de version. Même seul, c’est tout simplement indispensable, pour le confort que cela apporte [3].

J’ai ici choisi d’utiliser GIT pour sa simplicité de déploiement (pas besoin de dépôt distant), et avec l’idée d’envoyer tout le projet sur GitHub une fois le concours terminé.

Mon optimisation

Je ne vais pas reprendre ici mon travail dans un ordre chronologique, cela serait bien trop long, et les curieux pourront toujours s’en référer à mon historique. Je préfère plutôt faire une synthèse de toutes mes optimisations.

Pour ceux qui veulent voir tout de suite le résultat, mon optimisation est encore visible en ligne à ce jour.

Rendu

Le rendu est identique à l’origine dans les navigateurs modernes hormis :

les coins ronds ne sont pas rendus dans les navigateurs ne supportant pas border-radius, et se dégradent en coins carrés
les header des boites de la colonne de droite qui sont homogénéisées avec les boites en colonne centrale

Pour tous les header de boite, j’ai remplacé le système d’images de background par un jeu d’aplat en pur CSS, ce qui ne nécessite aucune ressource externe.

J’ai nettoyé le layout de la page initialement en table, puis remplacé par le layout tiré de http://blog.html.it/layoutgala/ qui permet d’envoyer le contenu principal avant les colonnes latérales (les id de blocs de la page ont été conservés).

Header de la page

L’auto-complétion sur le champ de recherche n’est activée qu’au focus sur le champ, ce qui permet d’économiser le chargement de ce script la plupart du temps.

Le menu déroulant à onglets n’étant navigable qu’en présence de javascript, j’ai pris le parti de n’insérer dans le HTML du document statique que la partie visibles des onglets.

L’ensemble des parties déroulantes, qui représente 8Ko gzippé, est chargé de manière asynchrone par une requête AJAX, et n’est injecté dans le DOM par morceau que lorsque cela est nécessaire.

Pour l’affichage des onglets, j’ai gardé des images car c’est à mon avis la seule solution industrielle pour respecter la police de la maquette graphique et être robuste vis a vis de l’agrandissement du texte dans le navigateur.

En revanche j’ai mutualisé l’affichage onglet au survol/onglet actif qui utilisent tous deux du texte noir (le rendu n’est ici pas parfait car il aurait fallu régénérer les textes sans background, ce que je n’ai pu faire faute de disposer de la bonne police, et je me suis contenté de découper les textes dans les images disponibles), et j’ai fait en sorte que le menu soit utilisable même si on navigue sans image.

Les images d’illustration dans le "megamenu" dépliant sont rassemblées en un sprite unique qui n’est chargé qu’au premier affichage, par positionnement de la directive CSS en javascript.

Contenu central

Le diaporama central était constitué d’images sans alternatives. J’ai remplacé cette image par un texte+une image de background en superposition. Seule la première image est référencée au chargement de la page, les autres images ne le sont que lors de leur affichage (via javascript), ce qui permet un chargement différé.

Pour accélérer le rendu initial dela page, j’ai aussi remplacé la première image du diaporama par une première image JPG de basse qualité remplacé ensuite par l’image de qualité initiale (PNG dans le cas présent) lorsque le reste de la page est chargé. L’image de basse qualité n’est visible que l’espace de quelques instants, et le temps que l’œil du visiteur se fixe réellement dessus elle est remplacée par sa version de bonne qualité. Cela permet d’avoir un rendu initial plus rapide, qui est ensuite amélioré.

Les images de la page ne véhiculant pas d’information et utilisées comme illustration sont toutes référencées en image de background et regroupées en sprites par ensemble logique cohérent (automatisable en production) :

illustrations dans le menu déroulant, enrichies d’une alternative texte lorsqu’aucune image n’est chargée
illustrations des héros préférés, rassemblées dans le même lien que le texte associé, afin que le survol de l’un ou l’autre suffise [4]
illustrations des univers en colonne de droite

En revanche, les images des produits constituent une information essentielle de la page et nécessaire à la vente (au même titre que le nom du produit ou son prix).
Il m’a donc semblé essentiel que ces images soient présentes aussi bien en l’absence de styles que de javascript. J’ai donc choisi de les conserver en image inline, mais j’ai utilisé du lazy-loading dessus (voir le paragraphe à ce sujet pour ce qui concerne l’accessibilité des images sans javascript).

Colonne de droite

La colonne de droite est chargée par une requête asynchrone. Au chargement de la page, elle est visuellement remplacée par un cadre bloc légèrement grisé visible en cas de rendu lent (IE7 ou connexion lente)

Le GIF animé utilisé en bannière publicitaire interne est lourd à charger. Pour ne pas retarder le rendu complet de la page, il est initialement remplacé par un PNG statique qui ne reprend que la première image. Le GIF animé est ensuite chargé dynamiquement en lieu et place de ce PNG statique pour lancer l’animation lorsque la page est achevée de charger.

Les images d’illustrations de chaque cadre sont dans un sprite unique qui peut être généré dynamiquement. Comme ces boites sont en général sous la ligne de flottaison et non visible au chargement de la page, la directive background-image est insérée en javascript asynchrone pour ne pas retarder le onload, uniquement lorsque le premier bloc est au dessus de la ligne de flottaison (utilisation du script

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/sources/jquery.lazyload.js

webperf-contest-2010/js/sources/jquery.lazyload.js at master · Cerdic/webperf-contest-2010 · GitHub

/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.5.0
*
*/
(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold : 0,
            failurelimit : 0,
            event : "scroll",
            effect : "show",
            container : window
        };
        if(options) {
            $.extend(settings, options);
        }
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        this.each(function() {
            var self = this;
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));
            }
            if ("scroll" != settings.event ||
                    undefined == $(self).attr("src") ||
                    settings.placeholder == $(self).attr("src") ||
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) ||
                     $.belowthefold(self, settings) ||
                     $.rightoffold(self, settings) )) {
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
self.loaded = true;
if (undefined == $(self).attr("src") || !$(self).attr("src")) {
$(self).attr("src", $(self).attr("original"));
}
            }
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear. */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        return this;
    };
    /* Convenience methods in jQuery namespace. */
    /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold + $(element).height();
    };
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience. */
    /* Use as $("img:below-the-fold").something() */
    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
})(jQuery);

)

Pied de page

Le pied de page non initialement visible en général est chargé par une requête AJAX asynchrone.

L’iframe est conservée, conformément au règlement, mais son attribut src est initialement vide. Elle est chargée de manière aysnchrone par injection du src en javascript lorsque le pied de page devient visible (lazy loading)

Techniques&outils utilisées

Optimisation des images

Pour l’optimisation des images j’ai utilisé le logiciel ImageOptim, qui est en fait une simple interface OSX vers les outils les plus couramment utilisés (OptiPNG, PngCrush, JpegOptim).

Pour les images JPG, j’ai essayé d’augmenter le taux de compression jusqu’à une limite visuellement acceptable. Cette optimisation est ici la plus discutable de ce que j’ai pu faire, car mon niveau d’acceptabilité est peut-être sensiblement différent de ce qu’il serait possible de faire avec un DA dans le dos.

Le vrai problème est de trouver le compromis entre le poids des images (qui peut faire gagner des clients par la rapidité du site) et le rendu (qui peut faire perdre des clients si il n’est pas assez qualitatif). Difficile de trouver ou placer la barre, et j’ai donc considéré que je pouvais diminuer le poids des images tant que je n’étais pas choqué par le rendu en tant que simple client (un DA n’étant de ce point de vue pas représentatif non plus !).

Chargement asynchrone de blocs de page

J’utilise une technique inspirée des BigPipe de Facebook et déjà automatisée dans le cadre de SPIP.

Elle consiste à faire assembler certains blocs de la page en javascript par le client au lieu de le faire côté serveur.

Le chargement asynchrone se fait par une requête XHR lancée aussitôt que possible. Le HTML est injecté dans la page lorsqu’il arrive. Ici le HTML ne contient pas de script inline, et on fait tout cela en javascript natif sans jQuery (pour ne pas devoir attendre le chargement de ce script).

Ici, IE7 étant une cible a prendre en compte, j’ai limité au nombre de 2 les blocs chargés en asynchrone car ceux ci doivent être chargés sur le même domaine que la page principale, et IE7 ne peut ouvrir que deux connexions simultanées par domaine.

L’accessibilité au contenu lorsque le visiteur ne dispose pas de javascript se fait par une directive <noscript> avec une directive

<meta http-equiv="refresh" content="1;url=index.st.html">

qui redirige le visiteur vers une version de la page assemblée côté serveur. Dans un contexte de production, on poserait un cookie au visiteur la première fois que cela arrive, et on ne lui servirait plus que des pages complètes.

De même, les robots connus sont repérés côté serveur par leur user-agent et sont directement servis par la version complète. Les robots non connus suivent en principe la directive meta refresh. Au pire, il leur manque ici les deux blocs (colonne de droite et pied de page) qui ne sont pas cruciaux pour le référencement (en particulier si l’on sert un sitemap).

Dans cette approche, seul l’ossature de la page change de forme entre les deux versions (techniquement c’est le mécanisme d’inclusion qui est traduit de deux façons différentes possibles)

Ici, la redirection se fait sur index.st.html, qui est une version complète même sans javascript [5].

Lazy Loading

Le lazy-loading consiste à ne charger certains éléments de la page que lorsqu’ils deviennent visibles par l’internaute.

A partir du moment ou les visiteurs sans javascript étaient redirigés vers une page complète, j’ai considéré acceptable de faire reposer l’affichage de certains contenus sur javascript dans la version optimisée.

J’utilise donc du lazy-loading sur 3 familles d’éléments :

sur les images de produit du contenu principal de la page. les balises <img> de la page sont dépourvues d’attribut src mais disposent à la place d’un attribut original.
Le script jquery.lazyload.js est utilisé pour charger dynamiquement les images qui apparaissent dans la fenêtre du visiteur lorsque celui-ci scrolle. Ceci se fait par recopie de l’attribut original sur l’attribut src.
Dans la version alternative, les images sont référencées normalement dans la page et sont toutes chargées normalement.
sur les background-image de décoration des boites en colonne de droite. Ces décorations ont été passées en sprite et du coup le lazy load est ici géré manuellement, en utilisant toute fois les fonctions de detection du script lazyload [6]
sur l’iframe : celle-ci étant en pied de page, je n’injecte son attribut src que lorsqu’elle est susceptible de devenir visible.

CSS

La feuille de style principale unique initiale a été découpée en unités logiques, chacune dans une feuille, toutes rangées dans le dossier css/sources/. Ensuite, je créé une feuille combinée par SSI qui n’inclue que les feuilles nécessaires à la page.

J’ai donc procédé par sélection de module fonctionnel CSS comme on pourrait le faire en contexte de production, mais j’ai exclu de nettoyer chaque fichier CSS de tous les sélecteurs inutiles à la page du concours. Par exemple, j’inclue la feuille entière qui style toutes les boites du site même si on n’en utilise ici que quelques variantes, car c’est ce qu’on pourrait faire en production.

J’ai testé la séparation des CSS en deux lots core+complements dont le premier serait inséré inline mais cela n’améliorait pas dans mon cas le début de rendu dans IE7 (cela améliorait le "start render" apparent mesuré, mais pas en pratique le début réel du rendu tel qu’on peut le voir avec capture vidéo).

J’en suis donc resté à une CSS unique, minifiée par CSSTidy [7]

La feuille minifiée est https://github.com/Cerdic/webperf-contest-2010/blob/master/css/style.minified.css

webperf-contest-2010/css/style.minified.css at master · Cerdic/webperf-contest-2010 · GitHub

.grasfont-weight:700!important.inlineList lidisplay:inline;margin:0 .3em.inlineList1em lidisplay:inline;margin:0 1em.erreurFormulairefont-weight:700;color:#D00.clearingdisplay:block;height:0;clear:both;font-size:1%.clearfix:aftercontent:".";display:block;height:0;clear:both;visibility:hidden*+html .clearfix,* html .clearfixzoom:1ul.arrowmargin:0;padding:0ul.arrow lilist-style-position:outside;margin:0 0 0 10px;padding:0.sanspucelist-style-type:none!importanthtml,bodyfont-family:Arial, Helvetica, Verdana, sans-serif;margin:0;padding:0bodyfont-size:12px;_font-size:.75em;zoom:1;color:#666;background:#FFF url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) repeat-x left -1085pxatext-decoration:none;color:#000a:hovertext-decoration:underlinea imgborder:0.lienInverse atext-decoration:underline!important.lienInverse a:hovertext-decoration:none!importanttablefont-size:1emh2,h3,h4,h5,h6margin:0h1font-size:2emh2font-size:1.5emh3font-size:1.17emh4font-size:1.1emh5font-size:.83emh6font-size:.67em.h1-1em2font-size:1.2em;margin-top:30px.h2-1emfont-size:1em.text09emfont-size:.9empmargin:10px 0.subtitlemargin:0input.text,select,#deliverTable inputborder:1px solid #A7A6AA;font-size:.9em;color:#666;padding:.2em 0textareafont-family:Arial, Verdana, Helvetica, sans-serif#deliverTable textareaheight:10em;border:1px solid #A7A6AA;font-size:1em;color:#666;padding:.2em 0selectoverflow:hidden;height:1.8em;_height:1.5em;padding:0select optionpadding:.2em 5px .2em 3pxform,fieldsetborder:0;margin:0;padding:0.block formzoom:1.fullwidthselect_height:1%.fullwidthselect selectwidth:100%.halfwidthselect selectwidth:50%.line_selectoverflow:hidden;_overflow:visible;zoom:1;margin:0.line_select labelfont-weight:700;float:left.line_select selectfloat:right;width:250px.hasJS .hidesubmit .submitdisplay:none.contextoverflow:hidden;_overflow:visible;zoom:1h4 citecolor:#666;font-style:normal;font-weight:400.pdg_nopadding:0!important.pdg_smpadding:5px!important.pdg_t_smpadding-top:5px!important.pdg_r_smpadding-right:5px!important.pdg_b_smpadding-bottom:5px!important.pdg_l_smpadding-left:5px!important.pdg_h_smpadding-left:5px!important;padding-right:5px!important.pdg_v_smpadding-top:5px!important;padding-bottom:5px!important.pdgpadding:10px!important.pdg_tpadding-top:10px!important.pdg_rpadding-right:10px!important.pdg_bpadding-bottom:10px!important.pdg_lpadding-left:10px!important.pdg_hpadding-left:10px!important;padding-right:10px!important.pdg_vpadding-top:10px!important;padding-bottom:10px!important.pdg_lgpadding:20px!important.pdg_t_lgpadding-top:20px!important.pdg_r_lgpadding-right:20px!important.pdg_b_lgpadding-bottom:20px!important.pdg_l_lgpadding-left:20px!important.pdg_h_lgpadding-left:20px!important;padding-right:20px!important.pdg_v_lgpadding-top:20px!important;padding-bottom:20px!important.pdg_xlgpadding:50px!important.pdg_t_xlgpadding-top:50px!important.pdg_r_xlgpadding-right:50px!important.pdg_b_xlgpadding-bottom:50px!important.pdg_l_xlgpadding-left:50px!important.pdg_h_xlgpadding-left:50px!important;padding-right:50px!important.pdg_v_xlgpadding-top:50px!important;padding-bottom:50px!important.mrg_nomargin:0!importanthtml body .mrg_b_nomargin-bottom:0!important.mrg_smmargin:5px!important.mrg_t_smmargin-top:5px!important.mrg_r_smmargin-right:5px!important.mrg_b_smmargin-bottom:5px!important.mrg_l_smmargin-left:5px!important.mrg_h_smmargin-left:5px!important;margin-right:5px!important.mrg_v_smmargin-top:5px!important;margin-bottom:5px!important.mrgmargin:10px!important.mrg_tmargin-top:10px!important.mrg_rmargin-right:10px!important.mrg_bmargin-bottom:10px!important.mrg_lmargin-left:10px!important.mrg_hmargin-left:10px!important;margin-right:10px!important.mrg_vmargin-top:10px!important;margin-bottom:10px!important.mrg_lgmargin:20px!important.mrg_t_lgmargin-top:20px!important.mrg_r_lgmargin-right:20px!important.mrg_b_lgmargin-bottom:20px!important.mrg_l_lgmargin-left:20px!important.mrg_h_lgmargin-left:20px!important;margin-right:20px!important.mrg_v_lgmargin-top:20px!important;margin-bottom:20px!important.mrg_xlgmargin:50px!important.mrg_t_xlgmargin-top:50px!important.mrg_r_xlgmargin-right:50px!important.mrg_b_xlgmargin-bottom:50px!important.mrg_b_50margin-bottom:50px!important.mrg_l_xlgmargin-left:50px!important.mrg_h_xlgmargin-left:50px!important;margin-right:50px!important.mrg_v_xlgmargin-top:50px!important;margin-bottom:50px!important.mrg_b_shadw_bigmargin-bottom:11px!important.mrg_b_shadw_smmargin-bottom:15px!important.mrg_b_shadw_nomargin-bottom:25px!important.txt_ltext-align:left!important.txt_ctext-align:center!important.txt_rtext-align:right!important.txt_tvertical-align:top!important.txt_mvertical-align:middle!important.txt_bvertical-align:bottom!important.floatlfloat:left.floatrfloat:right.centermargin-left:auto!important;margin-right:auto!important.img_m img,.img_m .inputImgvertical-align:middle!important.no_bgbackground:none!important.no_bg_colorbackground-color:transparent!important.no_bg_imgbackground-image:none!important.bg_blancbackground-color:#FFF!important.bg_gristresclairbackground-color:#F3F3F3!important.bg_gris_f7background-color:#F7F7F7!important.bg_grisbackground-color:#828282!important.bg_gris_ebbackground-color:#EBEBEB!important.bg_grisfoncebackground-color:#666!important.bg_noirbackground-color:#000!important.bg_moutardebackground-color:#DE9C00!important.bg_rougebackground-color:#D00!important.bg_no_rptbackground-repeat:no-repeat!important.bg_rpt_ybackground-repeat:repeat-y!important.bg_rpt_xbackground-repeat:repeat-x!important.bg_rptbackground-repeat:repeat!important.bg_lbackground-position:left center!important.bg_tlbackground-position:left top!important.bg_tbackground-position:center top!important.bg_trbackground-position:right top!important.bg_rbackground-position:right center!important.bg_rbbackground-position:right bottom!important.bg_bbackground-position:center bottom!important.bg_blbackground-position:left bottom!important.bg_cbackground-position:center center!important.fondTriangleGrisbackground-image:url(img/triangleGris.png)!important.no_brdborder:none!important.no_brd_tborder-top:none!important.no_brd_rborder-right:none!important.no_brd_bborder-bottom:none!important.no_brd_lborder-left:none!important.brd_grisborder:1px solid #CCC!important.brd_t_grisborder-top:1px solid #CCC!important.brd_r_grisborder-right:1px solid #CCC!important.brd_b_grisborder-bottom:1px solid #CCC!important.brd_l_grisborder-left:1px solid #CCC!importantdl.generique ddmargin:0;padding:0dl.generique dtmargin:0;padding:0.noverflowoverflow:visible!important.width30width:30%.width40width:40%.width50width:50%.width60width:60%.width65width:65%.width70width:70%.width75width:75%.width80width:80%.dispeblockdisplay:block!important.tabledisplay:table!important.inlinedisplay:inline!important.posrelposition:relative!important.zIndex0z-index:0.zIndex10z-index:10.zIndex20z-index:20.zIndex30z-index:30.zIndex40z-index:40.bleu_MPcolor:#1a3fa7!important.soulignetext-decoration:underline!important.mrg_15margin:15px!important.mrg_t_15margin-top:15px!important.mrg_r_15margin-right:15px!important.mrg_b_15margin-bottom:15px!important.mrg_l_15margin-left:15px!important.mrg_h_15margin-left:15px!important;margin-right:15px!important.mrg_v_15margin-top:15px!important;margin-bottom:15px!important.mrg_30margin:30px!important.mrg_t_30margin-top:30px!important.mrg_r_30margin-right:30px!important.mrg_b_30margin-bottom:30px!important.mrg_l_30margin-left:30px!important.mrg_h_30margin-left:30px!important;margin-right:30px!important.mrg_v_30margin-top:30px!important;margin-bottom:30px!important.pdg_15padding:15px!important.pdg_t_15padding-top:15px!important.pdg_r_15padding-right:15px!important.pdg_b_15padding-bottom:15px!important.pdg_l_15padding-left:15px!important.pdg_h_15padding-left:15px!important;padding-right:15px!important.pdg_v_15padding-top:15px!important;padding-bottom:15px!important.pdg_30padding:30px!important.pdg_t_30padding-top:30px!important.pdg_r_30padding-right:30px!important.pdg_b_30padding-bottom:30px!important.pdg_l_30padding-left:30px!important.pdg_h_30padding-left:30px!important;padding-right:30px!important.pdg_v_30padding-top:30px!important;padding-bottom:30px!important.mrg_40margin:40px!important.mrg_t_40margin-top:40px!important.mrg_r_40margin-right:40px!important.mrg_b_40margin-bottom:40px!important.mrg_l_40margin-left:40px!important.mrg_h_40margin-left:40px!important;margin-right:40px!important.mrg_v_40margin-top:40px!important;margin-bottom:40px!important#page,#page_2cols,#page_1col,#enfantsfilter:alpha(opacity=100)!important;opacity:1.0!important;min-width:996px;width:83em;margin:0 auto;padding:0 0 20px#contentclear:both;float:left;width:100%#col_centrepadding-top:1em;margin:0 18.7em#col_gauchefloat:left;width:15.5em;margin-left:-82.1em;padding-top:1em#col_droitefloat:left;width:15.5em;margin-left:-16.4em;padding-top:1em#col_gauche_header,#col_center_headerposition:relative;margin-bottom:8px;min-height:8px;height:auto!important;padding:7px 0 5px#col_droite_headerposition:relative;margin-bottom:8px;min-height:60px;_height:60px;padding:7px 0 5px#col_center_headermargin:0 auto#page_1col #col_center_headerwidth:544px#page_2cols #col_center_headermargin:0#col_gauche,#col_droitecolor:#333#cheminfer,#cheminfer *list-style:none;margin:0;padding:0#cheminfer,#cheminfer ulbackground:#E6E6E6 url(img/cheminfer_background.png) no-repeat left top#cheminfermin-width:539px;width:auto;margin:0 0 30px;padding:0 0 0 7px#page_1col #cheminfermargin-left:auto;margin-right:auto;width:539px#cheminfer ulmin-height:14px;_height:14px;font-size:.9em;background-position:right top#cheminfer lidisplay:inline;color:#000;margin:0 5px 0 0#cheminfer avertical-align:top;text-decoration:none;color:#000#cheminfer a:hovertext-decoration:underline#cheminfer .currentfont-weight:700#iFrameFooterheight:315px;min-width:965px;text-align:center;clear:both;border:0;overflow:hidden;margin:20px auto 10px#subfootermin-width:965px;text-align:center;clear:both;margin:20px auto 10px#subfooter ul,#subfooter lilist-style:none;margin:0;padding:0#subfooter lidisplay:inline;font-size:.8em;white-space:nowrap;border-left:1px solid #666;margin:0 0 0 10px;padding:0 0 0 10px#subfooter li.firstborder:0!important;margin:0;padding:0#subfooter atext-decoration:none;color:#666;text-transform:uppercase;font-weight:700body.adherents #subfooter acolor:#666#subfooter a:hover,body.adherents #subfooter a:hovercolor:#000#subfooter a.mintext-transform:none;font-weight:700#statdisplay:none#topRecherchemargin-top:20px#topRecherche ul,#topRecherche lilist-style:none;margin:0;padding:0#topRecherche lidisplay:inline;font-size:12px;margin:0 10px 0 0#topRecherche li.mediumfont-size:16px#topRecherche li.bigfont-size:20px#topRecherche li acolor:#666#HEADERmin-width:996px;width:83em;position:relative;z-index:55;font-family:Arial,Helvetica,Verdana,sans-serif;margin:0 auto#HEADER *margin:0;padding:0#HEADER ullist-style:none#HEADER a,#HEADER a *cursor:pointer#TOPheight:91px#topLEFTfloat:left;width:147px;margin:0#topRIGHTmargin-left:148px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) repeat-x left -355px#CHAINESoverflow:hidden;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat -15px -60px;padding:5px 0 5px 20px* html #CHAINESbackground-color:#EFEFEF;background-image:none;zoom:1#CHAINES lifloat:left;display:inline;padding-left:1px;background:url(http://s1-wpo.yterium.net/contest/css/img/spt-ong2-chaines-o-png8.png) no-repeat -1000px -50px#CHAINES li.firstbackground:none#CHAINES li adisplay:block;height:20px;text-indent:-5000px;background-image:url(http://s1-wpo.yterium.net/contest/css/img/spt-ong2-chaines-o-png8.png);background-repeat:no-repeat#CHAINES li a:hoverfilter:alpha(opacity=60);opacity:.60#CHAINES li a:activeoutline:none#ch-Myfnac awidth:82px;background-position:0 -10px#ch-Actu awidth:97px;background-position:-83px -10px#ch-Telech awidth:137px;background-position:-181px -10px#ch-Passion awidth:137px;background-position:-319px -10px#ch-Labo awidth:100px;background-position:-457px -10px#ch-Magasins awidth:126px;background-position:-558px -10px#ch-Adherents awidth:128px;background-position:-685px -10px#SEARCHfloat:left;width:64.5%;padding-top:18px#MONCOINfloat:left;width:35%;padding-top:18px#monComptefloat:left;width:33%;padding-top:4px#monCompte imgvertical-align:-15%;padding-right:5px#monCompte acolor:#000;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat 0 -117px;padding-left:17px;text-decoration:underline#monCompte a:hovertext-decoration:none#monPanierfloat:left;position:relative;z-index:9997;width:15.7em* html HeaderBasketwidth:15.7em#monPanier #cartoucheposition:relative;z-index:9999;height:23px;padding-left:6px;background:transparent url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) repeat-x left -455px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px#monPanier #cartouche ppadding-right:7px;line-height:23px;margin:0* html #monPanier #cartouche pwidth:176px#monPanier .recapPanier adisplay:block;float:left;width:5.5em;height:23px;padding-left:26px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat 0 -152px;color:#FFF;font-weight:700;text-decoration:none#monPanier .recapPanier a:hovertext-decoration:underline#monPanier .totArticlesdisplay:block;float:left;width:6em;height:23px;color:#FFF#monPanier .totArticles acolor:#FFF;text-decoration:none#monPanier .totArticles a:hovertext-decoration:underline#monPanier .switchdisplay:block;float:left;width:11px;height:23px;text-indent:-5000px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat 0 -51px;cursor:pointer#monPanier #rideauposition:absolute;left:0;top:19px;z-index:9998#monPanier #detailPanierwidth:15.7em;background-color:#222;padding-top:6px;color:#FFF;display:none#monPanier #detailPanier dlbackground-color:#222;border:solid 1px #777;border-top-width:0;margin:0;padding:3px#monPanier #detailPanier acolor:#FFF#monPanier #detailPanier dtwidth:8.5em;float:left;font-weight:400;margin:0#monPanier #detailPanier ddwidth:5.5em;float:left;margin:0#monPanier .poigneetext-align:center;margin:0#monPanier .poignee imgdisplay:block;margin:0 auto#monPanier .basketInfocolor:#000;margin:0;padding:0 0 0 10px#MENUclear:both;position:relative;height:42px* html #MENUzoom:1#MENU,#MENU *margin:0;padding:0#MENU #ongletspadding-left:5px#MENU #onglets lifloat:left;position:relative;margin-right:2px;padding-bottom:12px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) repeat-x left -391px#MENU #onglets li.current,* html #MENU #onglets libackground-image:none#onglets >li>adisplay:block;height:24px;overflow:hidden;z-index:100;padding:3px#onglets >li > a bposition:absolute;top:0;display:block;height:36px;background-image:url(http://s1-wpo.yterium.net/contest/css/img/spt-ong2-chaines-o-png8.png);background-repeat:no-repeat#onglets >li > a > bz-index:103;left:0#onglets >li > a > b >bz-index:101;left:0#onglets >li > a > b >b>bz-index:102;width:3px;right:0;background-position:top right#onglets >li.current > a >bbackground-position:-920px 0#onglets >li.current > a>b>b>bbackground-position:-1007px 0#onglets >li > a.hover>bbackground-position:-830px 0#onglets >li > a.hover>b>b>bbackground-position:-917px 0#onglets >li>a:activeoutline:none#onglets .megaMenudisplay:none#onglets .megaMenu.menu_actifdisplay:block.ong-Livreswidth:47px.ong-Livres >a bwidth:47px;background-position:0 -40px.ong-Livres.current >a b,.ong-Livres >a.hover bbackground-position:0 -75px.ong-Musiquewidth:86px.ong-Musique >a bwidth:86px;background-position:-49px -40px.ong-Musique.current >a b,.ong-Musique >a.hover bbackground-position:-49px -75px.ong-DVDwidth:50px.ong-DVD >a bwidth:50px;background-position:-137px -40px.ong-DVD.current >a b,.ong-DVD >a.hover bbackground-position:-137px -75px.ong-JeuxVideowidth:71px.ong-JeuxVideo >a bwidth:71px;background-position:-189px -40px.ong-JeuxVideo.current >a b,.ong-JeuxVideo >a.hover bbackground-position:-189px -75px.ong-Jouetswidth:48px.ong-Jouets >a bwidth:48px;background-position:-262px -40px.ong-Jouets.current >a b,.ong-Jouets >a.hover bbackground-position:-262px -75px.ong-Informatiquewidth:81px.ong-Informatique >a bwidth:81px;background-position:-312px -40px.ong-Informatique.current >a b,.ong-Informatique >a.hover bbackground-position:-312px -75px.ong-Photowidth:67px.ong-Photo >a bwidth:67px;background-position:-395px -40px.ong-Photo.current >a b,.ong-Photo >a.hover bbackground-position:-395px -75px.ong-TVwidth:73px.ong-TV >a bwidth:73px;background-position:-464px -40px.ong-TV.current >a b,.ong-TV >a.hover bbackground-position:-464px -75px.ong-Sonwidth:71px.ong-Son >a bwidth:71px;background-position:-539px -40px.ong-Son.current >a b,.ong-Son >a.hover bbackground-position:-539px -75px.ong-GPSwidth:63px.ong-GPS >a bwidth:63px;background-position:-612px -40px.ong-GPS.current >a b,.ong-GPS >a.hover bbackground-position:-612px -75px.ong-Gadgetswidth:57px.ong-Gadgets >a bwidth:57px;background-position:-677px -40px.ong-Gadgets.current >a b,.ong-Gadgets >a.hover bbackground-position:-677px -75px.ong-TiragesPhotowidth:52px.ong-TiragesPhoto >a bwidth:52px;background-position:-736px -40px.ong-TiragesPhoto.current >a b,.ong-TiragesPhoto >a.hover bbackground-position:-736px -75px.ong-Evenementwidth:65px.ong-Evenement >a bwidth:65px;background-position:-790px -40px.ong-Evenement.current >a b,.ong-Evenement >a.hover bbackground-position:-790px -75px.ong-Spectacleswidth:69px.ong-Spectacles >a bwidth:69px;background-position:-857px -40px.ong-Spectacles.current >a b,.ong-Spectacles >a.hover bbackground-position:-857px -75px.ong-Vendrewidth:50px.ong-Vendre >a bwidth:50px;background-position:-928px -40px.ong-Vendre.current >a b,.ong-Vendre >a.hover bbackground-position:-928px -75px#onglets li .megaMenuwidth:514px;border:1px solid #727171;border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;background:#FFF url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) repeat-x left -505px;position:absolute;top:35px;z-index:100;display:none;padding:10px.posLleft:0.posMleft:-200px.posRright:0#onglets .megaMenu .mainCol,#onglets .megaMenu .rightColbackground-color:#FFF;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-right-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px#onglets .megaMenu .mainColmin-height:250px;height:auto!important;width:60%;float:left;padding:10px#onglets .megaMenu .rightColposition:relative;min-height:21em;height:auto!important;width:30%;float:right;padding:10px 10px 0#onglets .megaMenu .mainColLeftwidth:48%;float:left#onglets .megaMenu .mainColRightwidth:48%;float:right;position:relative;min-height:21em;height:auto!important#onglets .megaMenu .allProdposition:absolute;bottom:0;font-weight:700;padding:0#onglets .megaMenu .allLinkfont-weight:700;color:#000#onglets .megaMenu dlpadding-bottom:7px;margin:0#onglets .megaMenu dt,#onglets .megaMenu dt acolor:#DE9C00;font-weight:700;margin-bottom:3px#onglets .megaMenu dt atext-decoration:underline#onglets .megaMenu dt a:hovertext-decoration:none#onglets .megaMenu ddmargin-bottom:3px;padding-left:9px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat 0 -334px#onglets .megaMenu dd acolor:#000;text-decoration:none#onglets .megaMenu dd a:hovertext-decoration:underline#onglets .megaMenu .vignetdisplay:block;width:150px;height:80px;position:absolute;bottom:0#onglets .megaMenu .vignet bdisplay:block;width:150px;height:80px;position:absolute;bottom:0;background-repeat:none#onglets .megaMenu a.coupdecoeurpadding-right:15px;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat right -309px#titresmargin:0;padding:0#titres imgdisplay:block#navigation,.navigation,body.enfants #navigationfont-size:.9em#navigation dl,#navigation dt,#navigation ddmargin:0;padding:0#navigationmargin-top:7px;padding-bottom:12px;background:#fff url(http://s1-wpo.yterium.net/contest/css/img/spt-ong2-chaines-o-png8.png) no-repeat bottom right#col_gauche_header + #navigation *margin:0!important;padding:0!important#navigation * + .navigation *margin:0!important;padding:0!important#titres + #navigationpadding-top:0!important;margin-top:0!important#navigation .box-borderborder:1px solid #999;-moz-border-radius:10px;-wekbit-border-radius:10px;border-radius:10px;padding:5px 0#navigation dl,#navigation ul,.navigation dl,.navigation ulbackground:#FFF;color:#000;padding:0 12px#navigation .arboListepadding:5px 0#navigation ul,.navigation ullist-style-type:none#navigation dl a,#navigation ul a,.navigation dl a,.navigation ul acolor:#666;text-decoration:nonebody.enfants #navigation dd a,body.enfants #navigation ul atext-decoration:none#navigation dl a:hover,#navigation li a:hover,.navigation dl a:hover,.navigation li a:hover,body.enfants #navigation dd a:hover,body.enfants #navigation li a:hovertext-decoration:underline#navigation dl dt,.navigation dl dtfont-weight:700;font-size:1.1em;padding:5px 0 6px#navigation dl dd,#navigation ul li,.navigation dl dd,.navigation ul lipadding:2px 0#navigation dl .subcat,#navigation ul .subcat,.navigation dl .subcat,#navigation ul .subcatcolor:#666;font-size:1em;padding:5px 0 3px 5px#navigation .blkGris .inside_block,#navigation .blkOcre .inside_block-moz-border-radius:7px;-wekbit-border-radius:7px;border-radius:7px;margin:0 5px;padding:5px 0#navigation .blkGris .inside_block dl,#navigation .blkOcre .inside_block dlborder:0;background-color:Transparent;padding:0 5px 0 6px#navigation .blkGris .inside_blockbackground-color:#EAEAEA#navigation .blkOcre .inside_blockbackground-color:#FAF1DF#lkActus ddcolor:#000!important#lkBonPlans ddcolor:#DE0000!important#lkPrefs ddcolor:#DE9C00!important#lkActus a,#lkBonPlans a,#lkPrefs acolor:#666!important#lkActus .rouge,#lkBonPlans .rouge,#lkPrefs .rouge,#lkActus .rouge a,#lkBonPlans .rouge a,#lkPrefs .rouge acolor:#DE0000!important.produit .number,.produit .img,.contact .number,.contact .imgfloat:left.produit,.produit .desc,.contact,.contact .desc,.avis,.avis .descoverflow:hidden;_overflow:visible;zoom:1.produit .number,.produit .number span,.contact .number,.contact .number spandisplay:block.produit .number span,.contact .number spanwidth:1.1em;text-align:center;font-size:1.8em;padding:1em 0.produit .number,.contact .numbermargin:0 1px 0 0;padding:5px 0 0.produit .img,.contact .imgmargin-right:10px.contact .imgpadding-right:10px;border-right:1px solid #000.produit .img img,.contact .img imgdisplay:block.produit .desc .imgfloat:none;text-align:center;margin:8px 0.produit .desc .img imgmargin:0 auto.produit dt,.contact dtfont-weight:700;font-size:1.1em.produit dt,.produit dt acolor:#666.contact dt,.contact dt acolor:#DE9C00.produit *,.contact *margin:0;padding:0.produit .details,.produit .resume,.produit .details acolor:#666.contact .detailscolor:#000.contact .details strongcolor:#DE9C00.produit .resumemargin:8px 0.produit .pictoProduitSmallmargin:3px 0.produit .pictoProduitNormalmargin:3px 0.produit .pictoProduitBigmargin:3px 0#col_droite .produit .prixmargin:0#col_droite .produit dd.pictoProduitSmallpadding-left:20px;background-position:0#col_droite .produit dd.pictoProduitNormalpadding-left:20px;background-position:0#col_droite .produit dd.pictoProduitBigpadding-left:20px;background-position:0#page .produit dd.pictoProduitSmallpadding-left:28px#page .produit dd.pictoProduitBigpadding-left:28px.produit dd.pictoProduitSmallbackground-position:10px 0;background-repeat:no-repeat;padding-left:18px.produit dd.pictoProduitNormalbackground-position:10px 0;background-repeat:no-repeat;padding-left:38px.produit dd.pictoProduitBigbackground-position:10px 0;background-repeat:no-repeat;padding-left:38px.listeproduits .produit dd,.listeproduits .produit dtpadding-left:0;padding-right:0.line_3cols .produit dd.pictoProduitSmall,.line_3cols_mea .produit dd.pictoProduitSmallpadding-left:28px.line_3cols .produit dd.pictoProduitNormal,.line_3cols_mea .produit dd.pictoProduitNormalpadding-left:38px.line_2cols .produit dd.pictoProduitSmall,.line_2cols_mea .produit dd.pictoProduitSmallpadding-left:18px.line_2cols .produit dd.pictoProduitNormal,.line_2cols_mea .produit dd.pictoProduitNormalpadding-left:28px.listeproduits .produit dd.pictoProduitSmallbackground-position:0 0.listeproduits .produit dd.pictoProduitNormalbackground-position:0 0.listeproduits .produit dd.pictoProduitBigbackground-position:0 3px.produit dd.pictoPrixAdhSmallbackground-image:url(img/offre-adherents-small.png).produit dd.pictoPrixAdhNormalbackground-image:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png);background-position:10px -193px.produit dd.pictoPrixAdhBigbackground-image:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png);background-position:10px -193px.produit dd.pictoPrixVertSmallbackground-image:url(img/prix-vert-small.gif).produit dd.pictoPrixVertNormalbackground-image:url(img/minipictovert.gif).produit dd.pictoCoupDeCoeurbackground-image:url(img/coup-de-coeur.gif).produit dd.pictoAffaireFnacbackground-image:url(img/minipictoaffaire.gif).produit dd.pictoPrixVertBigbackground-image:url(img/prix-vert.gif).produit dd.pictoPrixRougeSmallbackground-image:url(img/bonne-affaire-small.gif).produit dd.pictoPrixRougeNormalbackground-image:url(img/minipictoaffaire.gif).produit dd.pictoPremierPrixbackground-image:url(img/mini1erprix.gif).produit dd.pictoPrixRougeBigbackground-image:url(img/bonne-affaire.gif).produit dd.pictoSoldesNormalbackground-image:url(img/soldes24.png).produit dd.pictoAdutalentbackground:url(img/star.gif) 10px 0 no-repeat.produit dd span.pictomp3background:url(img/mp3.gif) right no-repeat;padding:0 34px 0 0.produit dd.pictoMp3background:url(img/mp3.gif) 60px 3px no-repeat.produit dd.pictoMp3blockbackground:url(img/mp3.gif) 10px 0 no-repeat;margin:10px 0 -5px*+html .produit dd.pictoMp3blockmargin:10px 0 8px*html .produit dd.pictoMp3blockmargin:10px 0 12px.produit dd.pictoCameraTexteBleubackground:url(img/camera.gif) 10px 0 no-repeat;color:#069;font-weight:700;font-size:12px;height:16px.produit dd.pictoCameraTexteBleu strongmargin:0 0 0 25px.produit dd.pictoDiamondbackground:url(img/diamond.gif) 0 0 no-repeat.produit dd.pictostarbackground-image:url(img/star.gif).produit dd.pictoGamingbackground-image:url(img/picto_occaz-gaming_sur_gris_22x22.png).produit dd.pictocoeurbackground-image:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png);background-position:10px -235px.produit dd.pictoadhbackground-image:url(img/minipictoadh.gif).produit dd.pictotalentbackground-image:url(img/minipictotalent.gif).produit dd.pictoLivreSmallbackground-image:url(img/livre-small.gif).produit dd.pictoLivrebackground-image:url(img/livre.gif).produit dd.picto10Ansbackground-image:url(img/10ans.gif).produit dd.pictoSourisSmallbackground-image:url(img/souris-small.gif).produit dd.pictoSourisbackground-image:url(img/souris.gif).produit dd.pictopanierbackground-image:url(img/ACC_pictopanier.gif).produit dd.pictotelechargerbackground-image:url(img/LIVtelecharger_jaune.gif).produit dd.pictoCadeauSmallbackground-image:url(img/cadeau-small.png).produit dd.pictoCadeaubackground-image:url(img/noel_picto.png)dd.pictoCadeauFnacmusicbackground:url(img/gift.gif) 0 0 no-repeat;margin:0;padding:4pxdd.pictoCadeauFnacmusic divfont-size:11px;margin:0 0 0 25px.produit dd.pictoexcluadhbackground-image:url(img/minipictoexcluadh.png).produit dd .delStylePricefont-weight:400;font-size:.65em;font-style:normal;color:#000.contact_presentation .imgfloat:none;border:none!important;margin:5px 0.contact_presentation .desc dtfont-size:1.6em;margin:10px 0.listeproduits,.listeproduits lilist-style:none;margin:0;padding:0.listeproduits li,.block .listeproduits liborder-bottom:1px solid #ccc;padding:8px 0.flatproduit li,.block .flatproduit liborder-bottom:none.slim_block .listeproduits li,.slim_block .block .listeproduits li_zoom:1;padding:2px 0#col_gauche .listeproduits li,#col_droite .listeproduits lipadding:4px 0.listeproduits li.last,.block .listeproduits li.lastborder:none.lst_nobrd liborder:none!important.listeprod_2colsoverflow:hidden;_overflow:visible;zoom:1.listeprod_2cols ulfloat:left;width:48%.listeprod_2cols ul.lastfloat:rightul.liste_2colsoverflow:hidden;_overflow:visible;zoom:1ul.liste_2cols liclear:left;float:left;width:47%;margin:5px 0ul.liste_2cols li.evenclear:right;float:rightul.liste_2cols_Vseparator liborder:0!importantul.liste_2cols_Vseparator li.evenborder-left:1px solid #CCC!important;padding-left:10px.produits_conseilles,.produits_conseilles lilist-style:none;margin:0;padding:0.produits_conseillesoverflow:hidden;_overflow:visible;zoom:1.produits_conseilles lifloat:left;border-right:1px solid #FFF;width:30%;padding:0 10px.produits_conseilles li.lastborder:0.produits_conseilles li lifloat:none;border:0;width:auto;padding:0ul.liste_inlineoverflow:hidden;_overflow:visible;zoom:1ul.liste_inline lifloat:left;width:23.3%;margin-right:10pxul.liste_inline li.lastmargin-right:0ul.liste_inline .contact,ul.liste_inline .descoverflow:visible;display:tableul.liste_evaluations lioverflow:hidden;_overflow:visible;zoom:1ul.liste_evaluations .produitfloat:left;width:50%ul.liste_evaluations .evaluationcolor:#000;border-left:1px solid #B2B2B2;padding-top:5px;float:right;width:17.27emul.liste_evaluations .evaluation .pred,ul.liste_evaluations .evaluation .eval_overflow:hidden;overflow:visible;zoom:1;margin:0;padding:5pxul.liste_evaluations .evaluation .evalbackground:#EDEDEDul.liste_evaluations .evaluation strongfloat:left;width:9.55emul.liste_evaluations .evaluation .eval strongcolor:#DE9C00ul.liste_evaluations .evaluation .linkpadding-right:10px;text-align:right;margin:2px 0 0ul.liste_evaluations .evaluation atext-decoration:none;color:#000.listecontacts,.listecontacts lilist-style:none;margin:0;padding:0ul.liste_3cols liwidth:30%;padding-right:20px;margin-right:10pxul.liste_3cols li.lastmargin:0;padding:0.avismargin-top:5px.avis .notefloat:left;margin-right:10px;width:47px.avis .desc ddmargin:0.avis .desc dtfont-weight:700.sepborder-bottom:1px solid #000;margin:0.blk_content .sepmargin:10px 0.prixfont-weight:700;font-size:1.6em;color:#000.prixSeulpadding-bottom:7px.prixBarrecolor:#666;font-weight:400;font-size:.65em;text-decoration:line-through.prix strongfont-size:1.16em.prix imgvertical-align:middle.infospricefont-weight:400;color:#000;font-style:normal;display:block.pagination,.pagination lilist-style:none;margin:0;padding:0.paginationtext-align:center.pagination lidisplay:inline;margin:0 2px.pagination li,.pagination li acolor:#666.pagination li atext-decoration:underline.pagination li.currentcolor:#E19A04.pagination li.before a,.pagination li.after atext-decoration:none.links_mea,.links_mea lilist-style:none;margin:0;padding:0.links_meaborder-bottom:1px solid #000;font-size:.9em.links_mea liborder-top:1px solid #000;overflow:hidden;_overflow:visible;zoom:1;padding:2px 3px.links_mea li imgfloat:left;margin-right:5px.links_mea uloverflow:hidden;_overflow:visible;zoom:1;margin:0;padding:0.links_mea ul,.links_mea ul liborder:0.links,.links lilist-style:none;margin:0;padding:0.blk_footer .links liborder-top:solid 1px #FFF;zoom:1;padding:2px 10px.block_noir .blk_footer .links liborder-top-color:#FFF.blk_footer .links li.firstborder-top:none;_zoom:1.blk_footer .links li.last_blanccolor:#fff.linkscolor:#DE9C00.links a,.adherents .links acolor:#DE9C00;text-decoration:none.links span.type2,.links span.type2 acolor:#666!important.links a:hovertext-decoration:underline.blk_footer .links,.blk_footer .links acolor:#666.links_lines,.links_lines lilist-style:none;margin:0;padding:0.links_lines lidisplay:block;background:#ccc;_height:0;color:#000;text-decoration:none;margin-top:1px;padding:2px 0 2px 15px.links_lines acolor:#000;text-decoration:none.links_lines a:hovertext-decoration:underline#col_gauche .links_lines lipadding-left:10px.links_lines li.firstmargin-top:0.listeimages,.listeimages litext-align:center;list-style:none;margin:0;padding:0.listeimages li_height:1%;text-align:center;margin:2px 0.listeimages li adisplay:table;_width:1%;text-decoration:none;margin:0 auto.listeimages li a imgdisplay:block.tagsfont-size:.8em;font-family:Arial, Verdana.tags acolor:#666;font-weight:700;text-decoration:none.tags a:hovertext-decoration:underlineul.topbuttons,ul.topbuttons lilist-style:none;margin:0;padding:0ul.topbuttons limargin-bottom:15px.gradient_bottompadding-bottom:8px!important;background:url(img/gradient_bottom.gif) repeat-x left bottom.pictoPrixVertSmall,.pictoPrixVertNormal,.pictoPrixVertBig,.vertcolor:#00AA30!important.blanccolor:#FFF!important.rouge,.pictoPrixRougeBig,.pictoPrixRougeNormal,.pictoPrixRougeSmall,.pictoPrixAdhBig,.pictoPrixAdhNormal,.pictoPrixAdhSmall,.pictoSourisSmall,.pictoSouriscolor:#D00!important.jaunecolor:#F9D500!important.bleucolor:#09C!important.bleuMPcolor:#1a3fa7!important.orangecolor:#FE7403!important.noircolor:#000!important.griscolor:#828282!important.grisfoncecolor:#666!important.grisclaircolor:#CCC!important.orangeadhcolor:#F89C21!important.moutarde,.moutarde-lk,.moutarde-lk acolor:#DE9C00!important.vertcolor:#008C7C!important.vertclaircolor:#A0C51D!important.vert2color:#44b716!important.jauneAdhcolor:#F9D500!important.marroncolor:#DA9914!important.font0-8font-size:.8em!important.fontnormalfont-weight:400!important.fontsmallerfont-size:.9em!important.fontsizenormalfont-size:1em!important.fontbiggerfont-size:1.1em!important.fontbiggerplusfont-size:1.5em!important.button,.button spanbackground:url(img/bouton_noir_background.png) no-repeat left top;display:inline-block.buttonNoirMiddle,.buttonNoirMiddle spanbackground-image:url(img/bouton_noirmiddle_background.png).buttonpadding-left:15px;cursor:pointer;text-decoration:none;border:none.button:hovertext-decoration:none.button spanheight:24px;display:block;font-weight:700;background-position:right top;color:#FFF;width:1%;white-space:nowrap;padding:4px 15px 0 0.button span.imgpadding-top:1px.fullwidth,.fullwidth spandisplay:block;width:auto.line_3cols,.line_3cols_mea,.line_2cols,.line_2cols_mea,.line_2cols_FMoverflow:hidden;_overflow:visible;_height:1%.line_2cols_FM .block,.line_2cols .block,.line_2cols_mea .blockfloat:left;width:49.5%.line_2tiers .block,.line_2tiers_mea .blockfloat:left;width:64.5%.line_2cols.slim_block .block,.line_2cols_mea.slim_block .blockwidth:49.9%.line_2cols .block_last,.line_2cols_mea .block_lastfloat:right.line_3cols .block,.line_3cols_mea .blockfloat:left;width:32.5%;margin-right:7px.line_3cols .block_last,.line_3cols_mea .block_lastfloat:none;_float:right;width:auto;_width:32.5%;margin-right:0.size_1on3width:32.5%!important.size_2on3width:66%!important.line_2cols_mea .block .blk_header,.line_3cols_mea .block_first .blk_header,.line_3cols_mea .block_middle .blk_header,.line_2cols_mea .block .blk_header b,.line_3cols_mea .block_first .blk_header b,.line_3cols_mea .block_middle .blk_header b-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-top-right-radius:0.line_2cols_mea .block .blk_inside,.line_3cols_mea .block_first .blk_inside,.line_3cols_mea .block_middle .blk_inside-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0.line_2cols_mea .block_last .blk_header,.line_3cols_mea .block_middle .blk_header,.line_3cols_mea .block_last .blk_header,.line_2cols_mea .block_last .blk_header b,.line_3cols_mea .block_middle .blk_header b,.line_3cols_mea .block_last .blk_header b-moz-border-radius-topleft:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;border-top-right-radius:8px.line_2cols_mea .block_last .blk_inside,.line_3cols_mea .block_middle .blk_inside,.line_3cols_mea .block_last .blk_inside-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;border-bottom-right-radius:8px.inside_blockposition:relative;zoom:1;background-color:#EAEAEA.blockfont-size:.9em;overflow:hidden;_overflow:visible;_height:1%.blockAutowidth:auto!important.block1emfont-size:1em.block .blockfont-size:1em.block .blk_header,.block .blk_header >span,.block .blk_header >a,.block .blk_header >bdisplay:block;text-align:center;position:relative;-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0;margin:0;padding:0.block .blk_headerfont-size:1.3em.block .blk_header span,.block .blk_header amin-height:20px;_height:20px;overflow:hidden;_overflow:visible;zoom:1;padding:5px 4px 2px.block .blk_header a.illustre-bottompadding-bottom:0.block .blk_header a.illustre-bottom bdisplay:block;height:110px;background-color:#fff;background-repeat:no-repeat;background-position:0 0;margin:2px -4px 0.block .blk_header >bposition:absolute;top:0;left:0;height:15px;width:100%.block .blk_header a:hovertext-decoration:none.block .blk_header span.fine,.block .blk_header a.finepadding:3px 6px 0 1px.block .blk_header .pictofloat:left;margin:-3px -30px -2px 5px.block .blk_header .pictorightfloat:right;margin:-3px 5px -2px -5px.block .blk_header img.txt_mmargin-top:0;margin-bottom:0.block .blk_insideposition:relative;zoom:1;-moz-border-radius:8px 8px 5px 5px;-webkit-border-radius:8px 8px 5px 5px;border-radius:8px 8px 5px 5px.blk_contentzoom:1;overflow:hidden;_overflow:visible.flatborder:none!important.flated *border:none!important.flat .blk_headermargin:0!important.block .filled_blackbackground-color:#000;color:#FFF.block .filled_black .blk_footer .links,.block .filled_black .blk_footer .links acolor:#FFF.block .filled_black a,.block .filled_black .linkscolor:#ccc.block .filled_blancbackground-color:#FFF;color:#000.block .filled_blanc a,.block .filled_blanc .linkscolor:#666.nobkgbackground:none!important;color:inherit!important.pdg_ftpadding:5px 10px.btmshadowpadding-bottom:13px;background:url(http://s1-wpo.yterium.net/contest/css/img/spt-ong2-chaines-o-png8.png) no-repeat right bottom.mise_en_avant .blk_header,.mise_en_avant .blk_header span,.mise_en_avant .blk_header a,.mise_en_avant .blk_header b-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0;color:#FFF;margin:0.mise_en_avant .blk_header span img.universefloat:left;margin-left:10px.mise_en_avant .blk_header span abackground:transparent!important;margin:0.mise_en_avant .blk_header span,.mise_en_avant .blk_header apadding-top:3px;padding-bottom:3px;min-height:13px;_height:13px.mise_en_avant .blk_headerfont-size:1.1em;background:#000.mise_en_avant .blk_header bheight:10px;background:#333.mise_en_avant .blk_insidebackground:#F3F3F3.mise_en_avant .produitpadding:5px 0.mise_en_avant .produit,.mise_en_avant .descoverflow:visible.mise_en_avant .produit,.mise_en_avant .produit dt,.mise_en_avant .produit dt acolor:#000.produit dt,.produit ddpadding-left:10px;padding-right:10px.mise_en_avant .produit dd.pictoProduitSmallpadding-left:27px.mise_en_avant .produit dd.imgbackground:#FFF;border:1px solid #F3F3F3;padding:0.mise_en_avant .sepborder-bottom-color:#FFF.brd_noir .blk_insideborder-color:#000!important.cadre_produitfloat:left;position:relative;margin-right:8px;border:solid 1px.cadre_produit,.cadre_produit .number,.cadre_produit .img-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px.cadre_produit spanfloat:left;width:18px;padding-top:0;margin-right:0.cadre_produit .imgoverflow:hidden;width:63px;margin:-5px 0 0.cadre_produit span+.img-moz-border-radius:0 8px 8px 0;-webkit-border-radius:0 8px 8px 0;border-radius:0 8px 8px 0.cadre_produit .img imgwidth:47px;margin:0 auto;padding:8px 0.cadre_produit .numbermargin-right:0.sep,.sep_grisborder-bottom:1px solid #000;margin:0.blk_content .sep,.blk_content .sep_grismargin:10px 0.sep_grisborder-bottom-color:#ccc.block_rouge .blk_headerbackground-color:#D00.block_rouge .blk_header span,.block_rouge .blk_header acolor:#FFF.block_rouge .blk_header bbackground-color:#e94d4d.block_rouge .blk_insideborder-left:1px solid #D00;border-bottom:1px solid #D00;border-right:1px solid #D00.block_rouge .filledbackground:#FCE5E5.block_rouge .produit .number,.block_rouge .produit .number spancolor:#FFF.block_rouge h4,.block_rouge .filled .produit dt,.block_rouge .filled .produit dt acolor:#D00;font-weight:700.block_rouge .produit dt,.block_rouge .produit dt acolor:#000;font-weight:700.block_rouge .produit .details,.block_rouge .produit .details acolor:#666;font-weight:400.block_rouge_mea .produit dt,.block_rouge_mea .produit dt afont-weight:700;color:#D00.block_rouge_mea .produit .details,.block_rouge_mea .produit .details acolor:#666;font-weight:400.block_rouge .filled .produit .detailscolor:#666;font-weight:400.block_rouge .blk_footer .links,.block_rouge .blk_footer .links acolor:#D00.block_rouge_mea .blk_footer .links,.block_rouge_mea .blk_footer .links acolor:#666.block_rouge .blk_footer .links_lines licolor:#FFF;background:#D00.block_rouge .blk_footer .links_lines acolor:#FFF.block_rouge .bkg_ftbackground:#D00.block_rouge .bkg_ft a,.block_rouge .bkg_ft .links acolor:#FFF.block_rouge .sep,.block_rouge .listeproduits liborder-bottom-color:#ccc.block_rouge .filled .sepborder-bottom-color:#E94D4D.block_rouge .listeproduits liborder-bottom-color:#D00.block_rouge_mea .sepborder-bottom-color:#FFF.block_rouge .cadre_produit .numberborder:1px solid #DE0000.block_rouge .cadre_produit .number,.block_rouge .cadre_produit .number spanbackground:#DE0000 none repeat scroll 0 50%;color:#FFF.block_rouge .cadre_produit .imgbackground:#fff none repeat scroll 0 50%.block_jaune .blk_headerbackground-color:#F9D500.block_jaune .blk_header span,.block_jaune .blk_header acolor:#000.block_jaune .blk_header bbackground-color:#fce053.block_jaune .blk_insideborder:1px solid #F9D500.block_jaune .downBorder .block_contentborder:solid #F9D500;border-width:0 1px.block_jaune .downBorder .block_footerborder:solid #F9D500;border-width:0 1px 1px.block_jaune .filledbackground:#FEFBE5.block_jaune .blk_footer .links_lines licolor:#000;background:#fbd93b.block_jaune .blk_footer .links_lines acolor:#000.block_jaune .produit dtfont-weight:700.block_jaune .produit dd.imgborder-color:#FEFBE5.block_jaune .produit dt,.block_jaune .produit dt acolor:#000.block_jaune .produit .details,.block_jaune .produit .details acolor:#666;font-weight:400.block_jaune_mea .produit dtfont-weight:700.block_jaune_mea .produit dt,.block_jaune_mea .produit dt acolor:#000.block_jaune_mea .produit .details,.block_jaune_mea .produit .details acolor:#666;font-weight:400.block_jaune .sepborder-bottom-color:#FBE24D.block_jaune .listeproduits liborder-bottom-color:#FBE24D.block_jaune_mea .sepborder-bottom-color:#FFF.block_jaune .cadre_produit .number,.block_noir .cadre_produit .number spanbackground:#fff none repeat scroll 0 50%;color:#FFF.block_jaune .cadre_produit .numberborder-color:#FBE24D.block_jaune .cadre_produit .imgbackground:#fff none repeat scroll 0 50%.block_bleu .blk_headerbackground-color:#09C.block_bleu .blk_header span,.block_bleu .blk_header acolor:#FFF.block_bleu .blk_header bbackground-color:#45b7da.block_bleu .blk_insideborder:1px solid #09C.block_bleu .filledbackground:#D9F7FF.block_bleu .produit dt,.block_bleu .produit dt acolor:#09C.block_bleu .cadre_produitbackground:#43B4D9;border-color:#47B5DA.block_bleu .cadre_produit .imgbackground:#FFF.block_bleu .produit .number,.block_bleu .produit .number spancolor:#FFF.block_bleu .cadre_produit .number,.block_bleu .cadre_produit .number spanbackground-image:none;color:#FFF.block_bleu .blk_footer .links,.block_bleu .blk_footer .links acolor:#09C.block_bleu .blk_footer .links_lines licolor:#FFF;background:#09C.block_bleu .blk_footer .links_lines acolor:#FFF.block_bleu h4,.block_bleu .produit dt,.block_bleu .produit dt acolor:#09C.block_bleu .sep,.block_bleu .listeproduits liborder-bottom-color:#09C.block_bleu .filled .sep,.block_bleu .filled .listeproduits liborder-bottom-color:#47B5DA.block_bleu_mea .filled .sepborder-bottom-color:#FFF.block_orange .blk_headerbackground-color:#FE7403.block_orange .blk_header span,.block_orange .blk_header acolor:#FFF.block_orange .blk_header bbackground-color:#fe9b49.block_orange .blk_footer .links,.block_orange .blk_footer .links acolor:#F60.block_orange_mea .blk_footer .links,.block_orange_mea .blk_footer .links acolor:#666.block_orange .blk_footer .links_lines licolor:#FFF;background:#FE7403.block_orange .blk_footer .links_lines acolor:#FFF.block_orange .bkg_ftbackground:#FE7403.block_orange .bkg_ft a,.block_orange .bkg_ft .links acolor:#FFF.block_orange h4,.block_orange .produit dt,.block_orange .produit dt acolor:#F60.block_orange .blk_insideborder:1px solid #FE7403.block_orange .filledbackground:#FFE8D9.block_orange .sep,.block_orange .listeproduits liborder-bottom-color:#FE9B49.block_orange .filled .sep,.block_orange .filled .listeproduits liborder-bottom-color:#FE9B49.block_orange_mea .sepborder-bottom-color:#FFF.block_orange .cadre_produit .number,.block_noir .cadre_produit .number spanbackground:#fff none repeat scroll 0 50%;color:#FFF.block_orange .cadre_produit .numberborder-color:#FE9B49.block_orange .cadre_produit .imgbackground:#fff none repeat scroll 0 50%.block_noir .blk_headerbackground-color:#000.block_noir .blk_header span,.block_noir .blk_header acolor:#FFF.block_noir .blk_header bbackground-color:#333#col_gauche .block_noir .blk_header,#col_gauche .block_noir .blk_header span,#col_gauche .block_noir .blk_header a,#col_droite .block_noir .blk_header,#col_droite .block_noir .blk_header span,#col_droite .block_noir .blk_header acolor:#DE9C00#col_gauche .block_top .blk_header,#col_gauche .block_top .blk_header span,#col_gauche .block_top .blk_header a,#col_droite .block_top .blk_header,#col_droite .block_top .blk_header span,#col_droite .block_top .blk_header acolor:#DE9C00#col_gauche .block_noir .flat .blk_header,#col_gauche .block_noir .flat .blk_header span,#col_gauche .block_noir .flat .blk_header a,#col_droite .block_noir .flat .blk_header,#col_droite .block_noir .flat .blk_header span,#col_droite .block_noir .flat .blk_header acolor:#DE9C00.block_noir .blk_insideborder:1px solid #CCC.block_noir .filledbackground:#F0F0F0;border:1px solid #000.block_noir .cadre_produit .number,.block_noir .cadre_produit .number spanbackground:#fff none repeat scroll 0 50%;color:#FFF.block_noir .cadre_produit .numberborder-color:#3e3e3e.block_noir .cadre_produit .imgbackground:#fff none repeat scroll 0 50%#col_droite .block_noir .linkscolor:#666.block_noir .blk_footer .links_lines licolor:#FFF;background:#000.block_noir .blk_footer .links_lines acolor:#FFF.block_noir .bkg_ftbackground:#000;color:#FFF.block_noir .sep,.block_noir .listeproduits liborder-bottom-color:#333.block_noir .filled .sep,.block_noir_mea .sep,.block_noir .filled .listeproduits liborder-bottom-color:#333.block_noir .bkg_ft a,.block_noir .bkg_ft .links,.block_noir .bkg_ft .links acolor:#FFF.block_noir .sepborder-color:#F5F5F5.block_noir h4,.block_noir h4 acolor:#000;text-decoration:none.block_noir h4 citecolor:#666;font-style:normal;font-weight:400.block_noir .filled_blanc h4 citecolor:#000.block_noir .links,.block_noir .links acolor:#666.block_noir .filled_black .links,.block_noir .filled_black .links acolor:#CCC.block_noir .listeproduits .links,.block_noir .listeproduits .links acolor:#DE9C00.block_gris .blk_headerbackground-color:gray.block_gris .blk_header span,.block_gris .blk_header acolor:#FFF.block_gris .blk_header bbackground-color:#aaa.block_gris_foncebackground:#bfbfbf;claer:left;padding:5px.block_gris_fonce tableborder-spacing:0;border-collapse:collapse.block_gris .blk_insideborder:1px solid #CCC.block_gris .filledbackground:#EAEAEA.block_gris .sep,.block_gris .listeproduits liborder-color:#CCC.block_gris .filled .sep,.block_gris .filled .listeproduits liborder-color:#FFF.block_gris,.block_gris p acolor:gray.block_gris .inside_blockbackground:#FFF.block_moutarde .blk_headerbackground-color:#DE9C00.block_moutarde .blk_header span,.block_moutarde .blk_header acolor:#FFF.block_moutarde .blk_header bbackground-color:#aaa.block_moutarde .bkg_ftcolor:#FFF;background:#DE9C00.block_moutarde .bkg_ft .links,.block_moutarde .bkg_ft .links acolor:#FFF.block_moutarde .blk_insideborder:1px solid #CCC.block_moutarde .filledbackground:#F0F0F0.block_moutarde acolor:#666.block_blanc .blk_headerbackground-color:#FFF.block_blanc .blk_header span,.block_blanc .blk_header acolor:#666.block_blanc .blk_header bbackground-color:#eee.block_blanc .bkg_ftcolor:#666;background:#FFF.block_blanc .bkg_ft .links,.block_blanc .bkg_ft .links acolor:#666.block_blanc .blk_insideborder:1px solid #CCC.block_blanc .filledbackground:#FFF.block_vert .blk_headerbackground-color:#008B7C.block_vert .blk_header span,.block_vert .blk_header acolor:#FFF.block_vert .blk_header bbackground-color:#eee.block_vert .bkg_ftcolor:#666;background:#FFF.block_vert .bkg_ft .links,.block_vert .bkg_ft .links acolor:#666.block_vert .blk_insideborder:1px solid #CCC.block_vert .filledbackground:#FFF.block_espace-fg .blk_header,.block_espace-fg .blk_header spanbackground-color:#543E7F;color:#FFF;font-size:12px;text-align:left.block_espace-fg .blk_header spanpadding:0.block_espace-fg .tl,.block_espace-fg .tr,.block_espace-fg .bl,.block_espace-fg .brbackground-image:url(img/block_gris_corners.png).block_espace-fg .blk_insideborder:1px solid #CCC.block_espace-fg .blk_postHeaderbackground-color:#543E7F;color:#B2A5C9.block_espace-fg .blk_postHeader acolor:#B2A5C9.block_espace-fg .blk_postHeader pmargin:0.block_espace-fg .filledbackground-color:#EFE6FF;color:#755d99.block_espace-fg .filled acolor:#755d99.block_espace-fg .blk_content .chevrondisplay:block;width:16px;height:8px;background:url(img/chevron-violet-fg.png) no-repeat 0 0;margin:0 auto.block_espace-fg .linksbackground-color:#FFF.block_espace-fg .links acolor:#000.block_espace-fg .blk_content pmargin:5px 0 0.block_intervenant .links,.block_intervenant .links acolor:#9dbe3b.block_intervenant .blk_footer .links,.block_intervenant .blk_footer .links acolor:#666.block_nicefoot .block_headerfont-size:1.3em.block_nicefoot .blk_contentbackground:gray.block_nicefoot .blk_insidebackground:none.block_nicefoot .blk_footerbackground:grey;position:relative;margin:0 20px.block_searchoverflow:hidden;_overflow:visible;zoom:1;margin:0.block_search label,.block_search input,.block_search select,.block_search .submit,#HEADER .block_search input,#HEADER .block_search selectfloat:left;margin-right:10px.block_search labeloverflow:hidden;width:79px;height:13px;text-indent:-5000px;background:url(img/rechercher.png) no-repeat left top;margin:3px 10px 0 0.block_search_new labelbackground:url(img/label_rechercher.png) no-repeat left top!important;height:23px.block_search .text,#HEADER .block_search .textwidth:16.5em;font-size:1.1em;color:#000;border-color:#000;padding:1px.block_search select,#HEADER .block_search selectwidth:14em;font-size:1.1em;height:1.6em;font-weight:700;color:#000;border-color:#000.searchPT .block_search .textwidth:11em.searchPT .block_search selectwidth:13.8em.block_search .submitfloat:left;position:relative;border:none;background:url(http://s2-wpo.yterium.net/contest/css/img/spt-pictos-bg.png) no-repeat 0 -10px;margin:0.block_search .submit inputposition:absolute;overflow:hidden;text-indent:5000px;border:none;-moz-opacity:0;-khtml-opacity:0;filter:alpha(opacity=0);opacity:0.block_search .submit,.block_search .submit input,#HEADER .block_search .submit,#HEADER .block_search .submit inputoverflow:hidden;cursor:pointer;width:75px;height:21px;padding:0.block_search .submitnewfloat:left;position:relative;border:none;background:url(img/Qsearch_OK.png) no-repeat left top;height:20px;width:30px;margin:2px 0 0.block_search .submitnew inputposition:absolute;overflow:hidden;text-indent:5000px;border:none;-moz-opacity:0;-khtml-opacity:0;filter:alpha(opacity=0);opacity:0;height:20px;width:30px;cursor:pointer.puce_no,.puce_no lilist-style:none;margin:0;padding:0.sep-grisborder-bottom:1px solid #B8B8B8!important#smartAff,.smartAff_lien,.smartAff_lien acolor:#000;font-weight:700span.chevrondisplay:none.MarketPlaceOfferspadding-top:0;margin-top:0!important;text-align:left.MarketPlaceOffers ullist-style-type:none;margin:0 10px.MarketPlaceOffers ul lilist-style-type:none.labelMP .MarketPlaceOffers ul lipadding-left:0!important;margin-top:5px.labelMP .MarketPlaceOffers .sep_gris,.shomeMV .MarketPlaceOffers .sep_grismargin-top:5px!important.shome .MarketPlaceOffers ul lipadding:5px 0!important.shome .MarketPlaceOffers .fontS_14font-size:12px!important.shome .MarketPlaceOffers .fontS_12,.shomeMV .MarketPlaceOffers .fontS_12font-size:11px!important.shomeMV .MarketPlaceOffers ul liborder-bottom:none!important;padding-left:0!important;padding-top:5px!important.shome .MarketPlaceOffers ul li span.chevrondisplay:inline;margin-right:2px.MarketPlaceOffers .pdg_t_smpadding-top:0!important;margin:0!important.MarketPlaceOffers .pdg_b_nopadding-bottom:0!important;margin-bottom:0!important.MarketPlaceOffers li.sellyoursdisplay:none.listeproduits dd.shomeMV div.MarketPlaceOffers ul li div.sepborder:none!important;margin:0!important;padding:0!important.introHomecolor:#666;margin:0 0 10px.introHome acolor:#666.introHome dt,.introHome dddisplay:inline;margin:0;padding:0#pubHgFooter div.pubtitrecolor:#a5a5a5!important;font-size:10px!important;left:-2px;height:14px;text-align:center#pubHgFooter div.pubtitre spanpadding-left:5px.blocBannerwidth:545px;height:147px;z-index:5.blocBanner .banner adisplay:block;position:relative;width:545px;height:147px.blocBanner .banner a bdisplay:block;position:absolute;top:0;left:0;width:545px;height:147px;z-index:7;background-repeat:none;background-position:top left.navIndexposition:relative;text-align:center;font-size:12px;color:#000.navIndex spancursor:pointer;padding:0 2px.navIndex .activefont-weight:700;color:#DE9C00.ac_resultsborder:1px solid #000;background-color:#FFF;overflow:hidden;z-index:99999;color:#000;letter-spacing:1px;padding:0.ac_results ulwidth:100%;list-style-position:outside;list-style:none;margin:0;padding:0.ac_results licursor:default;display:block;font:Arial,Helvetica,Verdana,sans-serif;font-size:12px;line-height:16px;overflow:hidden;margin:0;padding:2px 5px.ac_results li strongcolor:#DE9C00.ac_oddbackground-color:#fff.ac_overbackground-color:#828282;color:#FFF.ac_results li.ac_over strongcolor:#FFF#col_droite_header_enfantposition:relative;margin-bottom:8px;padding:7px 0 2px#univ_heros ul,#univ_heros lilist-style-type:none;margin:0;padding:0#univ_heros ulmargin-left:4px;margin-right:4px#univ_heros lifloat:left;margin-right:8px;margin-top:8px#univ_heros li *text-align:center#univ_heros li.lastfloat:right;margin-right:0#univ_heros a.heros_desc:hover b-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5a.heros_descdisplay:block;color:#777;cursor:pointer;font-size:.8em;width:101px;text-align:centera.heros_desc bdisplay:block;height:55px;background-repeat:no-repeat;background-position:top left;margin-bottom:.5emdiv#univ_heros_aussimargin-bottom:25px;text-align:justify;font-size:.9em;width:98%#univ_heros_aussi h3,#univ_heros_aussi ul,#univ_heros_aussi lidisplay:inline;margin:0;padding:0#univ_heros_aussi ul,#univ_heros_aussi liline-height:1.6em#univ_heros_aussi libackground:#FFF url(img/tiret.gif) no-repeat center right;padding-right:9px;padding-left:4px*+html #univ_heros_aussi li,* html #univ_heros_aussi lipadding-right:6px;padding-left:7px#univ_heros_aussi li.lastbackground:none;padding-right:0#univ_heros_aussi li acolor:#777#mea_enfwidth:545px;min-height:353px#mea_enf .prixheight:22pxul.enf_vignettelist-style:none;text-align:left;margin-left:7px;margin-right:7px;padding:0ul.enf_vignette li.titrecolor:#000;font-size:1.1emul.enf_vignette li.desccolor:#666;font-size:1.1emul.enf_vignette li.priceseulfloat:right;font-size:1.3em;color:#000;margin-top:1emul.enf_vignette li.pricefloat:right;font-size:1.3em;color:#000ul.enf_vignette li.price .sspricefont-size:.8em;color:#666ul.enf_vignette li.link_1,ul.enf_vignette li.link_2margin-top:3pxul.enf_vignette li.link_1,ul.enf_vignette li.link_1 acolor:#de9c00ul.enf_vignette li.link_1 afont-weight:700ul.enf_vignette li.link_2,ul.enf_vignette li.link_2 acolor:#CC0104#mea_enf .blk_footer .links .grey,#mea_enf .blk_footer .links .grey acolor:#666

et correspond à

https://github.com/Cerdic/webperf-contest-2010/blob/master/css/sources/style.combined.css

webperf-contest-2010/css/sources/style.combined.css at master · Cerdic/webperf-contest-2010 · GitHub

<!--#include file="base.css" -->
<!--#include file="layout.css" -->
<!--#include file="header.css" -->
<!--#include file="navigation.css" -->
<!--#include file="contenus.css" -->
<!--#include file="box.css" -->
<!--#include file="box-particuliers.css" -->
<!--#include file="main.css" -->
<!--#include file="jquery.autocomplete.css" -->
<!--#include file="enfants.css" -->

Something went wrong with that request. Please try again. Dismiss

Javascript

Les javascript inline figurant initialement dans la page ont été déportés dans des fichiers externes, par fonctionnalité principale. Dans la même approche que pour les CSS, seuls les scripts utiles à la page ont été inclus dans la page. En revanche, dans les fonctions d’alignement de bloc, seules celles utiles sur la page ont été ici conservées.

Les javascript ont été concaténés par SSI, et minifiés à l’aide du Google Closure Compiler.

J’ai travaillé initialement avec un unique script qui chargeait tout en une fois. Mais la taille de ce fichier en a fait le chemin critique pour réduire le "onload" de la page, et je suis donc passé à deux fichiers :

un fichier qui contient jQuery et le plugin lazyload

et un fichier qui contient l’ensemble des autres scripts qui correspond à https://github.com/Cerdic/webperf-contest-2010/blob/master/js/sources/script.ll.combined.js

webperf-contest-2010/js/sources/script.ll.combined.js at master · Cerdic/webperf-contest-2010 · GitHub

webperf-contest-2010/js/sources/script.ll.combined.js at master · Cerdic/webperf-contest-2010 · GitHub
1
2
3
4
5





Something went wrong with that request. Please try again. Dismiss

Pour cela, il a fallu gérer le chargement parallèle et asynchrone de ces deux fichiers, et que cela fonctionne dans tous les navigateurs. J’ai donc développé un chargeur jQuery asynchrone pour cela [8]

Le placement des CSS et JS dans la page est optimisé afin qu’ils soient chargés le plus tôt possible sans bloquer aucun des chargements qui les suivent, soit :

d’abord le chargement de jQuery par une directive <script> avec un attribut defer
puis le script inline jQl et l’appel du chargement asynchrone du second script
puis la feuille de style minifiée par une directive <link> traditionnelle

JSON

La page contenait initialement 16 requêtes JSON pour charger les informations de disponibilité et prix des articles. Une des premières choses que j’ai faite est de mutualiser ces requêtes en une seule, à laquelle on passe en argument les prid recherchés, sous forme de tableau.

Le serveur d’origine de la fnac n’étant pas en mesure de servir cela, on mime ici à l’aide d’un fichier javascript statique qui renvoit en JSON toutes les infos demandées. Dans la réalité, il faudrait simplement modifier le script serveur de la Fnac pour lui permettre de répondre à une requête multiple, ce qui ne pose pas de difficulté particulière [9]

HTML

Le HTML a été minifié par suppression des espaces redondants et commentaires. J’ai utilisé pour cela de simples expressions régulières.

Cookies

Par défaut, le marqueur de statistiques pose des cookies sur le domaine .webperf-contest.com et contamine tous les sous domaine s1/s2/s3.

J’ai donc patché le marqueur de statistique pour qu’il pose ses cookies sur entries.webperf-contest.com

Parallélisation et Cookie-free domains

J’ai utilisé les sous sdomaines s1/s2/s3 au maximum pour charger les ressources statiques (images et CSS).

En revanche les javascript sont servis sur le domaine principal entries.webperf-contest.com car cela permet une meilleure parallélisation (les connexions sur les autres domaines sont toutes chargées a bloc dans IE7) et un des scripts chargé par une requête XHR ne peut provenir d’un autre domaine que celui de la page principale.

Les morceaux de page asynchrones sont aussi chargés par une requête XHR, et donc sur le domaine principal. Comme il s’agit de HTML qui pourrait éventuellement utiliser des cookies, c’est aussi logique de faire comme cela.

Le JSON du marketplace est également chargé sur le domaine principal.

.htaccess

Le fichier .htaccess est utilisé pour

forcer la compression GZIP (mode deflate) sur tous les contenus pertinents (HTML, JS, CSS) mais pas sur les images.
forcer des expire lointains sur les fichier statiques (image, CSS, JS).
En situation de production cela s’accompagnerait d’un timestamp sur les urls pour les versionner et forcer la mise à jour en cas de modification
bloquer les cookies sur les fichiers images (précaution en général inutile, mais je me suis battu sur ce point avec YOTTAA avant de comprendre que c’était un bug de sa part, corrigé depuis)

Résultat & Bilan

Le temps de chargement total de la page a été fortement réduit


Waterfall de la page après optimisation

Le "onload" a été divisé par 10 (il est passé de 11.893s à 1.2s environ), le "start render" divisé par 2, le nombre de requêtes divisé par 5.

Mais le plus important est que tout cela a été obtenu uniquement avec des techniques déployables en production. Il y aurait évidemment encore du travail pour intégrer ces optimisations au site complet de la Fnac (en prenant en compte l’aspect dynamique de certains contenus) mais aucune des solutions retenues n’est irréaliste ni très compliquée à mettre en œuvre.

L’organisation du concours a été impeccable. Mes questions particulières concernant des points de règlement ont toujours reçu une réponse rapide.

Le niveau du concours a été assez relevé [10], et l’affichage en live du classement a été un facteur d’émulation certain qui a conduit à pousser chacun vers toujours plus d’effort d’optimisation.

D’un point de vue personnel, ce concours est déjà une réussite :

j’ai largement perfectionné mes connaissances concernant la synchronicité des chargements des composants d’une page, passant de nombreuses heures à relire Steve Souders dans le texte ;
j’ai repris et mis a jour le projet libre CSSTidy ;
j’ai lancé un nouveau projet de chargeur asynchrone pour jQuery ;
j’ai commencé à intégrer ces outils et connaissances pour améliorer l’automatisation de l’optimisation des pages dans SPIP (regardez donc le source de ce site) ;
je pense avoir démontré un certain niveau de savoir et savoir faire, qui ne peut avoir que des retombées professionnelles positives, même si ce n’est que très indirectement.

La seule petite critique que je pourrais faire sur le concours, avec le recul, concerne sa durée. Il est louable de le faire courir sur 5 semaines pour permettre à tout un chacun de participer compte tenu de ses disponibilités.

Mais en pratique, il subsistera toujours une distorsion entre ceux qui, comme moi, ont pu y consacrer plus que leurs soirées et/ou week-end, et ceux qui ont un temps limité. A moins d’une semaine de la fin du concours, il était clair que ceux qui n’avaient pas encore vraiment commencé ne pourraient jamais rejoindre le peloton de tête compte tenu de l’effort réalisé par ceux-ci. Aussi j’aurais tendance à penser qu’une durée plus réduite permettrait un effort plus ponctuel, et plus supportable aussi.

Mais hormis ce petit détail, je ne retiens que du bon : dans la mesure où je me suis amusé, cela valait le temps que j’y ai passé !

Il ne reste plus maintenant qu’à attendre la publication des résultats, et j’avoue que je suis curieux de voir les techniques utilisées par les autres concurrents !

Documents joints

Présentation du 16 janvier 2012 au groupe WebPerf FR (PDF – 5.2 Mo)

Notes

[1] même si il ne faut pas oublier non plus d’avoir une activité rémunérée suffisante en moyenne !...

[2] SPIP pour ne pas le nommer. Ah mince, c’est fait...

[3] possibilité de revenir en arrière, de brancher, de retracer ses modifications, en sus de la sauvegarde en ligne lorsqu’on utilise un dépôt distant

[4] permet également une amélioration de l’accessibilité par suppression des liens successifs redondants qui compliquent inutilement la navigation avec revue d’écran

[5] c’est en fait une version moins avancée de mon l’optimisation, et elle est également fonctionnelle avec javascript

[6] L’utilisation d’une sprite n’a du coup ici que peu d’intérêt en performance dans ce cas, sauf à permettre de charger toutes les 4 images d’un coup. Mais je n’ai pas voulu prendre le temps de revenir à des images inline...

[7] Ce dernier n’est plus maintenu mais la dernière version distribuée contenait quelques bugs. J’ai donc repris le code sur

https://github.com/Cerdic/CSSTidy

Cerdic/CSSTidy · GitHub

README

CSSTidy
---

CSSTidy is a CSS minifier 
Since the original project (http://csstidy.sourceforge.net/index.php) has been suspended
here is the import of https://csstidy.svn.sourceforge.net/svnroot/csstidy on 2010-11-14

master branch corresponds to the trunk of svn repository and shoul be stabilized
v1.3 branch corresponds to the last stable relase published by the author.
It integrates some bugfixes and a 1.3.1 version has been taged
Only PHP version is here maintained

---

CSSTidy

Original Tracker : 
http://sourceforge.net/tracker/?group_id=148404&atid=771415

css_optimiser.php is the web-interface, css_parser.php contains the PHP class (CSSTidy).

This class represents a CSS parser which reads CSS code and saves it in an array.
In opposite to most other CSS parsers, it does not use regular expressions and
thus has full CSS2 support and a higher reliability. The downside of not using regular expressions
is a lower speed though.
Additional to that it applies some optimisations and fixes to the CSS code.
An online version should be available here: http://cdburnerxp.se/cssparse/css_optimiser.php


	Copyright 2005, 2006, 2007 Florian Schmitz

  CSSTidy is free software; you can redistribute it and/or modify
  it under the terms of the GNU Lesser General Public License as published by
  the Free Software Foundation; either version 2.1 of the License, or
  (at your option) any later version.
  
  CSSTidy is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Lesser General Public License for more details.

  You should have received a copy of the GNU Lesser General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.

, corrigé les tickets ouverts sur sourceforge, complété les tests etc...

[8] Malheureusement, en remettant au propre mon projet pour la livraison finale, j’ai livré par mégarde une version dans laquelle jQuery ne démarrait pas dans Safari, ce que j’ai corrigé par

https://github.com/Cerdic/jQl/commit/fa904f2b946002cf0137887be8cf0f403650f3a8

don't erase jQuery if it is already loaded ! · fa904f2 · Cerdic/jQl · GitHub

don't erase jQuery if it is already loaded ! · fa904f2 · Cerdic/jQl · GitHub

Browse code
don't erase jQuery if it is already loaded !

Showing 2 changed files with 4 additions and 3 deletions.

Something went wrong with that request. Please try again. Dismiss

[9] Même si côté serveur le source s’avérait trop compliqué pour être corrigé simplement, il serait possible d’y faire de multiples appels du script existant et d’agréger en une réponse unique. C’est moins optimisé, mais cela serait toujours plus rapide que de réaliser N requêtes par le client distant.

[10] il me semble, autant que je puisse en juger

Vos commentaires

# Le 7 décembre 2010 à 12:10, par Pixelastic En réponse à : Ma participation au Webperf-Contest 2010

Très interessant comme debrief, il faudrait que je fasse de même.

Mettre des versions de basses qualités des images avant de les remplacer par les versions complètes est une très bonne idée, ça me rappelle le principe des "Level of Details" utilisé en 3D/Jeux vidéos.

Idem pour servir une version non-Javascript (ou plutot : servir une version Javascript only sur laquelle tu peux t’éclater à coup de lazyload sans avoir peur de gacher l’experience de tes visiteurs sans JS).

Par contre la façon de charger la page par blocs (à la Facebook comme tu l’indiquais) je n’ai jamais fait, je m’interroge sur la complexité coté serveur pour automatiser une telle technique ?

Charger le JSON depuis le domaine principal (car les cookies y sont sans doute nécessaire), j’avais oublié ça, tu a raison de le préciser.

Sinon, il y a le fait de charger le contenu du menu principal en AJAX qui me semble "dangereux". Bien qu’il ne soit accessible qu’avec JS comme tu l’indiques, en faisant ainsi tu le rends aussi complétement invisible aux moteurs de recherche. C’est un choix que je n’ai pas osé faire dans ma participation.

En tout cas, c’était très instructif. Merci aussi d’avoir repris CSSTidy, je participerai à son amélioration.
# Le 7 décembre 2010 à 12:29, par Touffies En réponse à : Ma participation au Webperf-Contest 2010

Merci beaucoup pour ce post... Je suis impressionné et émerveillé par le nombre de techniques possible pour optimiser une page. J’ai également hate de voir les résultats.

Ce concours m’a vraiment permis de re-découvrir le web :)

Bonne chance a toi.
# Le 7 décembre 2010 à 13:44, par ? En réponse à : Ma participation au Webperf-Contest 2010

Merci pour ce post, il y a des techniques intéressantes que vous avez utilisé, mais malheureusement les aspects SEO sont pas pris en compte.
# Le 7 décembre 2010 à 13:51, par Cedric En réponse à : Ma participation au Webperf-Contest 2010

A quels aspects SEO pensez-vous ? vis à vis de quelles techniques ? Je ne suis pas entré ici dans le détail de chaque technique, mais on peut le faire (et j’ai essayé de renvoyer vers des articles plus complet quand c’était possible).
# Le 7 décembre 2010 à 16:25, par ? En réponse à : Ma participation au Webperf-Contest 2010

je parle du menu et du iframe que vous avez sauté en les chargeant en ajax, c’est pas un jugement, ce n’est que mon avis :)
# Le 7 décembre 2010 à 17:47, par Cedric En réponse à : Ma participation au Webperf-Contest 2010

Les gros menu déroulants ne font que proposer des liens directs redondants avec la colonne de navigation présente sur chaque page accessible depuis l’onglet visible. Ainsi la navigation des robots d’indexation n’est pas entravée de ce point de vue.

A contrario, en enlevant toute cette partie de HTML (8ko gzippé), j’ai fait fortement remonter le vrai contenu de la page dans le source, et cela le rend beaucoup plus accessible aux robots d’indexation, et lui donne plus de poids. C’est donc un plus pour le référencement, à mon sens.

En ce qui concerne l’iframe, il faut savoir que lorsque celle-ci n’est pas chargée, elle est remplacée par un lien alternatif vers le contenu qu’elle propose, ce qui permet là aussi aux robots d’indexation de retrouver leur contenu. Proposer du contenu dans une iframe est de toute façon un non sens, et elle n’a été conservée ici que pour respecter le règle du concours. Dans la vie réelle, on ferait tout pour s’en débarasser au profit d’une inclusion côté serveur.
# Le 7 décembre 2010 à 18:04, par Vieuxsteak En réponse à : Ma participation au Webperf-Contest 2010

Un grand merci pour ce post, vraiment très intéressant (je pense que c’est une des premières fois que je lis un post en bonne partie et avec grand intérêt).

Je vais pouvoir mettre en pratique quelques techniques fort intéressantes !

Encore merci.
# Le 8 décembre 2010 à 00:53, par ? En réponse à : Ma participation au Webperf-Contest 2010

merci Cédric pour les explications, et bonne chance pour la suite
# Le 8 décembre 2010 à 23:42, par tetue En réponse à : Ma participation au Webperf-Contest 2010

Aaaah, le lazy loading et son détestable effet d’affichage des images à retardement ! Cet effet ne me semble pas gênant ici, alors que je le trouve insupportable sur d’autres sites et blogs (comme owni.fr). Sans doute son usage est-il plus adapté à des visuels de catalogue qu’à des contenus éditoriaux illustratifs. Intéressant.

Petite considération annexe : je ne suis pas d’accord avec ce que tu dis du statut d’indépendant, qui laisse entendre qu’on y ferait ce qui plaît sans se soucier de rentabiliser... C’est faux : indé et salarié ont pareillement besoin de bouffer ! On peut simplement considérer que tu as utilisé l’intégralité de ton temps de loisir à ce concours.

Merci d’avoir documenté ta participation.
# Le 8 décembre 2010 à 23:55, par Cedric En réponse à : Ma participation au Webperf-Contest 2010
En ce qui concerne le lazy-loading, il y a plusieurs choses à savoir :

le script généralement utilisé (sur owni que tu cites, mais d’autres media l’utilisent aussi), ne fonctionne plus correctement sur les navigateurs récents. Le résultat est donc que les images sont chargées dès le départ, puis enlevées, puis rechargées. On a donc au final tous les inconvénients cumulés.
il y a des variantes de réglages qui permettent de le rendre plus discret (notamment un seuil par rapport à la ligne de flottaison, pour anticiper le scrolling)
il est probablement plus adapté à de petites images qu’à de grandes dont l’absence se remarque plus nettement.

En ce qui concerne le statut d’indépendant, il donne la liberté de placer le curseur rentabilité/intérêt comme on le veut à un instant donné, et surtout d’organiser son temps de manière beaucoup plus souple. Cela m’a donc permis de consacrer des journées complètes sur le concours.

Tu as toutefois raison de rappeler que cela ne peut être permanent, évidemment, et qu’en moyenne on ne peut négliger totalement la rentabilité du temps.
# Le 14 décembre 2010 à 11:35, par Marcimat En réponse à : Ma participation au Webperf-Contest 2010

Bravo en tout cas... car ces recherches semblent avoir bien porté leurs fruits ! « Fastest Onload & start render times » avec tout ça... Chapeau :)
# Le 21 décembre 2010 à 08:57, par Loiseau2nuit En réponse à : Ma participation au Webperf-Contest 2010

Bravo Cédric, je crois que la communauté SPIP te reconnait bien là :-D (Ah mince, moi aussi je l’ai nommé :-X )

Pour le reste, c’était quelque peu osé en effet, de shunter le menu d’un point de vue SEO mais l’aternative proposée me parait à priori cohérente. Maintenant à voir dans la pratique sur un vrai site en prod.

Puis à voir la page à optimiser, c’était certainement plus justifié dans ce cadre que pour d’autres site minimisant au max le nombre de liens (pour mieux controller la répartition du "jus") et pour lequel charger conditionellement un menu est pour le coup un non-sens.

Enfin bref, en tout cas merci pour les petits outils mentionnés par ce post, me voila pleins de nouveaux joujoux à tester :-)
# Le 30 janvier 2011 à 00:17, par rivsc En réponse à : Ma participation au Webperf-Contest 2010

Super article.

Par contre ou m’avait persuadé que grouper les css et les js économisait des requêtes et donc c’était plus performant. En fait l’inverse est mieux à cause de la parallélisation des téléchargements par le navigateur. J’ai bien compris ?
# Le 30 janvier 2011 à 13:41, par Cedric En réponse à : Ma participation au Webperf-Contest 2010

Non, la règle générale de regrouper tous les js en un seul fichier est bonne et c’est bien ça qu’il faut avoir pour objectif.

Mais dans le cas précis du concours, comme tout le reste de la page était optimisé et se chargeait rapidement, le chargement du fichier js unique est devenu limitant, et j’ai donc du le découper en deux. Cela dit c’est un cas extrême et le but était ici de gagner les dernières dizaines de millisecondes.

Je pense que dans un contexte de production j’aurai choisi de garder un seul fichier, car c’est tout de même plus robuste et maintenable, et c’était déjà très performant.
# Le 5 février 2011 à 00:58, par rivsc En réponse à : Ma participation au Webperf-Contest 2010

Merci pour la précision !
# Le 20 février 2011 à 12:58, par klelugi En réponse à : Ma participation au Webperf-Contest 2010

Tout d’abord bravo pour toutes ces optimisations, c’est un article très instructif et rempli de bonnes pratiques (voir que des bonnes pratiques).

L’appel aux portions du menu via AJAX n’est en rien un facteur bloquant pour le SEO.

L’utilisation de ce genre de techniques est d’ailleurs conseillée pour des sites dont le nombre de pages est aussi important que celui de la FNAC, cela permet de développer la technique de "siloing", où les informations sont disponibles par grandes catégories sur un site et ainsi de favoriser une meilleure contextualité au sein des pages car les seuls liens présents dans la page sont ceux qui concernent directement la thématique ciblé par la page en cours de lecture.

La mise en avant du contenu en premier via le gabarit proposé par Layout Gala,
L’appel du footer qui contient des liens pas essentiels au SEO via AJAX,
Et tout le travail d’optimisation des temps de chargement de la page

sont autant de facteurs positifs pour améliorer la capacité de positionnement d’une page, il n’y a donc ici aucuns facteurs bloquants au SEO à mon sens,

Bravo !