ma participation au webperf contest 2010

Cédric Morin / yterium // WebPerf 16 janvier 2012

Ma participation au WebPerf Contest 2010

1

Cédric Morin / yterium // WebPerf 16 janvier 2012 2

Cédric Morin

Développeur freelance

http://www.yterium.net/https://github.com/Cerdic/@GusLeLapin


Le concours

http://webperf-contest.com/index-fr.html

3




Règles

• résultat graphique doit être «strictement» identique à l’original

• optimisations conservent les fonctionnalités de la page web originale.• Le champs recherche et son autocomplétion • Le défilement doux lorsqu'on clique sur la

flèche à droite de "mon panier"• Slider central avec changement automatique

et manuel des images• Les menus du haut et sous menus au survol• Les indications "x produits trouvés" qui sont

récupérées en ajax• Le système de tracking doit fonctionner

(s_code)• Toutes autres fonctionnalités ...


Règles

•L'expérience utilisateur doit être préservée (et vous pouvez l'améliorer), par exemple :

• Une fois la page chargée, la page doit être aussi fonctionnelle qu'à l'origine

• L'accessibilité ne doit pas être sacrifiée (vous pouvez même l'améliorer)

• Les optimisations pour référencement doivent être préservées (vous pouvez également les améliorer)

•La règle principale est :

•agissez comme si c'était votre site ou votre client. Tout sacrifier pour la performance web ne sert à rien.

5


La page à optimiser

• http://www.webpagetest.org/result/101207_6ed820576ae1663a7bf929e648e2dd34/

6

http://www.webpagetest.org/result/101207_6ed820576ae1663a7bf929e648e2dd34/





Avant

• Des indicateurs macroscopiques PageSpeed plutôt corrects

• 115 requêtes http pour charger toute la page pour 592ko

• 2.44s / 11.03s / 17.2s


Avant

•Répartis sur 5 canaux :•2 sur le domaine de la page du concours•1 sur metrics.fnac.com pour le marqueur de stats•2 sur www4.fnac.com, qui concernent des requêtes

ajax

9


Techniques et outils utilisés

10


Versionner

•Tout versionner dès le début

•Tout est disponible sous https://github.com/Cerdic/webperf-contest-2010

11

https://github.com/Cerdic/webperf-contest-2010



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) pour optimiser les «Repeated view»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é postérieurement au concours)

12

https://github.com/Cerdic/webperf-contest-2010/blob/master/.htaccess

https://github.com/Cerdic/webperf-contest-2010/blob/master/.htaccess


Optimisation des images

13

• Optimisation systématique via ImageOptim

• interface OSX vers les outils les plus usuels (OptiPNG, PngCrush, JpegOptim)http://imageoptim.pornel.net/

• Pour les images JPG

• compromis poids/qualité toujours discutable

• mauvaise qualité peut faire perdre des clients, mais poids aussi (par ralentissement des pages)

• je me suis fixé le critère d’apparence ‘acceptable en tant que client’, serait sûrement critiqué par un oeil expert (mais non représentatif non plus)

• Preloading

• en début de <body>, pour démarrer au plus vite le chargement des images et maitriser l’ordre

http://imageoptim.pornel.net/

http://imageoptim.pornel.net/

http://imageoptim.pornel.net



Sprites

•regrouper des images qui ne portent pas d’information en une seule

• injectée en CSS image-background

•alourdit potentiellement la maintenance

• regroupement par unité logique avec en tête l’automatisation possible de la génération du sprite

•http://spriteme.org/ outil utilisable sur n’importe quelle page existante

•Toujours apprécier selon le contexte : ici surtout ne pas spriter les images des produits qui sont informatives

14

http://spriteme.org

http://spriteme.org


Chargement asynchrone des morceaux de page

• Objectif

• Envoyer le HTML le plus vite possible

• paralléliser la construction de la page (côté client en JS) avec le chargement des ressources

• technique inspirée des BigPipe de Facebook http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

• En pratique

• chargement asynchrone par une requête XHR lancée aussitôt que possible, en js natif sans jQuery pour ne pas attendre le chargement de ce script

• HTML injecté dans la page lorsqu’il arrive (HTML ne contient pas de script inline)

• si IE7 cible a prendre en compte : limiter à 2 blocs parallélisables sur le domaine de l’URL principale

15

http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919







Chargement asynchrone des morceaux de page

• Application

• sur colonne de droite (avec un fond grisé affiché en attente du chargement)

• sur pied de page (pas visible au départ)

• Accessibilité

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

• redirige le visiteur vers une version de la page assemblée côté serveur : index.st.html, qui est une version complète même sans javascript

• En production, on poserait un cookie au visiteur la première fois, et on ne lui servirait plus que des pages complètes.

• robots connus sont repérés côté serveur par leur user-agent et sont directement servis par la version complète.

16


Lazy-loading

•Principe :

• ne charger certains éléments de la page que lorsqu’ils deviennent visibles par l’internaute

• Attention aux <img>

• si attribut src js ne peut pas empêcher le chargement par certains navigateurs.

• Il faut envoyer <img> sans son attribut src

• repose sur JS, prévoir un repli sans lazyloading si pas de JS

• Ici, alternative sans JS déjà mise en place

• pas de problème pour reposer sur JS pour la version optimisée

17


Lazy-loading

•Utilisé sur 3 familles d’éléments :

•images des produits : attribut original sur les <img> 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.

•sur des background-image de décoration

•sur l’iframe du pied de page

18

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

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


Optimisation des CSS

• Réorganisation

• feuille unique initiale découpée en unités logiques fonctionnelles

• une feuille CSS pour chaque unité fonctionnelle

• une seule feuille CSS dans le document HTML, générée par «Server Side Inclusion» qui inclue uniquement les feuilles nécessaires à la page

• processus réaliste d’un contexte de production

• Minification

• feuille CSS unique minifiée par CSSTidy https://github.com/Cerdic/CSSTidy

• choisi d’après le comparatif de Stoyan Stefanov http://www.phpied.com/css-minifiers-comparison/

19

https://github.com/Cerdic/CSSTidy




http://www.phpied.com/css-minifiers-comparison/





Optimisation des CSS

•Non retenu

•Outils qui permettent de détecter toutes les règles inutiles sur une page : pas utilisé car pas réaliste en contexte de production

•séparation des CSS en deux lots

• core en CSS inline

• +complements en CSS externe

• améliorait le start-render mesuré mais pas réel => abandonné

20


Optimisation des JS

• Réorganisation

• Tous les JS inline de la page initiale déportés dans des JS externes (un script js par fonctionnalité)

• Comme pour les CSS, seuls les JS utile à cette page sont retenus

• jQuery conservé par facilité (on ne s’en passerait pas en production), et certaines fonctions ré-écrites pour l’utiliser

• Concaténation des JS en un seul (Server Side Inclusion) + Minification par le Google Closure Compiler http://closure-compiler.appspot.com/home

• Optimisation du chargement

• en général la règle «appel des JS en pied de page» s’applique

• Mais ici tout le reste du chargement optimisé, c’est le chargement du script JS qui retardait le «onload» de la page

21

http://closure-compiler.appspot.com/home



Optimisation chargement des JS

• Découpage en 2 scripts :

• un fichier qui contient jQuery et le plugin lazyload

• et un fichier qui contient l’ensemble des autres scripts

• chargés en parallèle et asynchrone par un mini-loader jQl développé pour le concours https://github.com/Cerdic/jQl

• Optimisation de la place des CSS et JS dans la page

• tout dans le head pour lancer le chargement «au plus vite»

• 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

22

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/jquery-1.4.4.min.js

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/jquery-1.4.4.min.js

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/script.ll.minified.js

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/script.ll.minified.js

https://github.com/Cerdic/jQl



Factoriser les requêtes JSON

•initialement 16 requêtes JSON

•pour charger les informations de disponibilité et prix des produits.

•Factorisation en 1 seule requête

• toutes les références des produits de la page en argument

• réponse sous forme de tableau et dispatching à la reception

•simulé ici par un fichier statique car le serveur de la Fnac ne savait pas servir de cette façon, mais implémentation côté serveur très simple en pratique

23


HTML

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

•minification beaucoup plus agressive possible

•vrai intérêt en production discutable si on Gzip

24


Cookies

• Le marqueur de statistiques posait des cookies sur le domaine .webperf-contest.com et contaminait donc tous les sous domaine s1/s2/s3

• patch du marqueur de statistique pour qu’il pose ses cookies sur entries.webperf-contest.com

• Parallélisation et Cookie-free domains

• sous-domaines s1/s2/s3 utilisés au maximum pour charger les ressources statiques (images et CSS).

• javascripts servis sur le domaine principal entries.webperf-contest.com

• meilleure parallélisationles connexions sur les autres domaines sont toutes chargées a bloc dans IE7

• chargement async par une requête XHR ne peut provenir se faire que sur le domaine de la page

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

25

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/sources/s_code.js-h.14.20090227.js#L400

https://github.com/Cerdic/webperf-contest-2010/blob/master/js/sources/s_code.js-h.14.20090227.js#L400


Mise en œuvre et points particulières


Rendu

• Remplacer les images par du CSS :

• pour les coins ronds et bordures de cadre

• pour les titre de boite (aplat de couleur en CSS au lieu de image background)

• Indiquer des attributs width et height sur toutes les images

27


Layout

• Supprimer toute la mise en page en tableau

• Utiliser LayoutGala

• http://blog.html.it/layoutgala/

• Layout Robuste qui permet d’avoir toujours le contenu en premier dans le HTML

28

http://blog.html.it/layoutgala/



Header

•AutoComplétion sur le champ recherche

•ne charger le script qu’au focus sur le champ

•Menu à onglets

•seules les images permettaient de garder l’apparence

• optimisation pour factoriser l’image en mode ON et survol

• reprise du HTML pour que le menu soit lisible même sans image

29


• MegaMenu

• 8ko zippé pour tout le HTML du megamenu

• evacué du document principal (ce qui permet de remonter le contenu principal dans le document HTML)

• chargement en fin de hit par une requête AJAX. Injection dans le DOM à la demande (survol d’un onglet)

• Toutes les images du menu déroulant sont réunies dans un sprite unique, chargé au premier déroulé (le js écrit la directive CSS inline car si référencé dans la CSS, l’image est chargée au départ dans certains navigateurs)

• Sans JS on a accès aux onglets principaux qui emmènent vers les sections du site : pas de perte d’accès aux info ni en référencement

30


Carrousel

• Initialement

• 3 images (sans alternative) en rotation

• chargées avec la page

•Optimisation

• texte plein + image background superposée

• js qui insère le style background quand besoin de visualiser l’image

• première image remplacée par une version JPG basse qualité

•=> 1 image légère chargée avec la page puis rendu&chargement progressif

31


Les logos

•Redondant avec information texte, deux liens pour chaque héro/marque

•Optimisé

•avec un sprite unique pour les 10 logos (automatisable)

•logo en background CSS sur un élément <b> inséré dans le lien commun avec le texte

•survol du texte ou logo highlight l’ensemble

32


Image des produits

•Informatives et essentielles

•Mais en général sous le fold au chargement de la page

•Lazy-loading : ne sont chargées que si grande fenêtre ou utilisateur scrolle

33


Animation

• En colonne de droite un gif animé

• Poids conséquent 46ko

• chargé dès le départ, ce qui bloque un slot

• l’animation ne démarre qu’après une pause sur la première image

• Optimisation

• Remplacé dans le document HTML par un png statique de la première frame (13ko)

• le gif animé est injecté en JS a posteriori, pour faire démarrer l’animation

• 1 hit de plus, mais libère du temps/slot de download au chargement initial du document

34


Univers

•4 blocs avec images décoratives

•Regroupement des 4 images en 1 sprite

•lazyload :

•insertion en css inline image-background en JS

•lorsque le premier bloc devient visible par scrolling

•évite le chargement initial du sprite

35


Pied de page&iFrame

• Menu en iframe qu’il était obligatoire de conserver (règlement)

• Chargement async + Lazyload de l’iframe :

• src vide dans le HTML et injecté par js

• seulement quand pied de page devient visible

36


Résultat

http://www.webpagetest.org/result/101202_3e27be0d330d97f80f92efaf866c6d53/

37






Merci

41

Présentation téléchargeable surhttp://www.yterium.net/Ma-participation-au-Webperf

http://www.yterium.net/Ma-participation-au-Webperf



Références

http://www.yterium.net/Ma-participation-au-Webperfhttp://webperf-contest.com/http://wpo.yterium.net/avant/http://wpo.yterium.net/contest/http://www.webpagetest.org/result/101207_6ed820576ae1663a7bf929e648e2dd34/http://www.webpagetest.org/result/101202_3e27be0d330d97f80f92efaf866c6d53/https://github.com/Cerdic/webperf-contest-2010

http://imageoptim.pornel.net/http://spriteme.org/http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919http://www.appelsiini.net/projects/lazyloadhttps://github.com/Cerdic/CSSTidyhttp://www.phpied.com/css-minifiers-comparison/http://closure-compiler.appspot.com/homehttps://github.com/Cerdic/jQlhttp://blog.html.it/layoutgala/

42



http://webperf-contest.com

http://webperf-contest.com

http://wpo.yterium.net/avant/

http://wpo.yterium.net/avant/

http://wpo.yterium.net/contest/

http://wpo.yterium.net/contest/









http://spriteme.org

http://spriteme.org





http://www.appelsiini.net/projects/lazyload

http://www.appelsiini.net/projects/lazyload












Crédits photo

http://www.flickr.com/photos/nojhan/754257252/http://www.flickr.com/photos/meanestindian/3248185596/http://www.flickr.com/photos/joshyoung07/3569809500/http://www.flickr.com/photos/will-wade/6504142953/http://www.flickr.com/photos/mad_african78/2741067789/http://www.flickr.com/photos/99655906@N00/489997527/http://www.flickr.com/photos/alicepopkorn/6042091926/

43

http://www.flickr.com/photos/nojhan/754257252/sizes/o/in/photostream/




http://www.flickr.com/photos/joshyoung07/3569809500/sizes/z/in/photostream/




http://www.flickr.com/photos/mad_african78/2741067789/sizes/o/in/photostream/

http://www.flickr.com/photos/mad_african78/2741067789/sizes/o/in/photostream/

http://www.flickr.com/photos/99655906@N00/489997527/

http://www.flickr.com/photos/99655906@N00/489997527/

http://www.flickr.com/photos/alicepopkorn/6042091926/

http://www.flickr.com/photos/alicepopkorn/6042091926/

ma participation au webperf contest 2010

Business