High Performance Web
Sites
Éric Daspet Nicole Sullivan
Développeur web à Yahoo! nicolesl@yahoo-inc.com
http://eric.daspet.name/ www.stubbornella.org
http://developer.yahoo.com/performance

Qui sommes-nous ?
• Éric Daspet
Développeur web à Yahoo!
• Nicole Sullivan
Équipe Exceptional Performance à Yahoo!

Quantifier et améliorer la
performance de tout produit
Yahoo! mondial

you?

Pourquoi la
performance?

1: Rapide est mieux

7

10

11

12

13

2: Les sites sont plus lourd

Les sites web modernes
& les application web ont
changer

De 2003 à 2008:
97K à 312K.
25.7 à 49.9 objects.

Les derniers 12 mois, le top1000 sites:
De 250K à 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page

TF1 5s
AlloCiné 4s
FaceBook 4,6s
Skyrock 3,7s
France Telecom 10,1s!
Free (portail) 4,4s
Le Monde 7,9s
Amazon France 3,7s
Google (résultats) 0,24s
Yahoo! France 1,8s
Daily Motion 2,4s

3: L’utilisateur veut un site
rapide

Quel est le problème ?
• 6 sur 11 ont un chargement > 4s
• Abandons, agacement,
• Impacte votre business

+100 ms

Amazon: ventes -1%
+100 ms

+400 ms

Yahoo!: abandons
+5 à 9%
+400 ms

+500 ms

Google: recherches
-20%
+500 ms

-30% poids

Google: +30% trafic
-30% poids

Qu’est-ce que la
performance?

Deux Types:
Temps de réponse
&
Efficacité du systeme

Notre focus
est sur la
temps de
réponse des
produits web

Cueillir les fruits
de la performance
(certains bas, certains hauts)

Nos buts principaux
• Moins de requêtes HTTP
• Des composants moins lourds
• Paralléliser les requêtes

Bonnes pratiques
http://developer.yahoo.com/performance
Mise à jour des 14 recommandations initiales
20 recommandations ajoutées

14 bonnes pratiques (mises à jour)
Faire moins de requêtes HTTP
Utiliser un réseau de diffusion de contenu (CDN)
Ajouter des entêtes “Expires” (ou Cache-control)
Compresser les composants avec gzip
Mettre les CSS en haut
Déplacer les CSS en bas (en ligne aussi)
Éviter les “expression” en CSS
Externaliser CSS et Javascript
Réduire les requêtes DNS
Minimifier les Javascript et CSS (en ligne aussi)
Éviter les redirections
Retirer les scripts dupliqués
Configurer les ETags
Rendre Ajax cachable http://developer.yahoo.com/performance/rules.html

Après YSlow “A”?
1. Vider le tampon rapidement (buffer) 11. Minimiser les accès DOM
2. Utiliser GET pour Ajax 12. Développer des gestionnaires d’événements
sympa
3. Post-charger les composants
13. Choisir <link> plutôt que @import
4. Pré-charger les composants
14. Éviter “filter”
5. Réduire le nombre d’éléments DOM
15. Optimiser les images
6. Séparer les composants sur plusieurs
domaines 16. Optimiser les sprites CSS
7. Réduire le nombre d’iframe 17. Ne redimensionnez pas les images en HTML
8. Pas de 404 18. Rendez favicon.ico léger et cachable
9. Réduire la taille des cookies 19. Nouveauté iPhone 3G
10. Utiliser les domaines sans cookie pour les 20. Groupes les composants dans un document
composants mulitpart (mobiles)

#1
Perception

temps de réponse perçu
slow crawl boring snail
performance speed enjoyable stagnant
unexceptional
urgent instant accelerate yawn
perception unresponsive impatient delay
snap achievement
moderate blah subdue drag
better improve action pleasant pace apathetic
quickprolong swift load sluggish sleepy
promote
slack
cool
late unexciting reduced lag
maximum drive prompt advance
complex heavy unmemorable
fast hurry rush satisfying feel
obscure
exceptional brisk rapid exciting
why wait

temps de réponse perçu
performance speed enjoyable slow crawl boring snail stagnant
urgent instant accelerate unexceptional yawn
perception snap achievement unresponsive impatient delay
better improve action pleasant pace moderate blah subdue drag apathetic
prolong slack load sluggish sleepy
quick promote swift cool
maximum drive prompt advance
late unexciting reduced lag
complex heavy unmemorable
fast hurry rush satisfying feel obscure
exceptional brisk rapid exciting
why wait
Quelle est l’expérience utilisateur ?

Dans l’oeil du cyclone
• La perception et l’utilisabilité sont des mesures
importantes
• Plus pertinentes que le simple onunload - onload
• La définitionest vague et change d’une page à
l’utilisateur
de ce qu’est le onload pour
l’autre.

#2
“80% of consequences come from
20% of causes”
—Vilfredo Pareto

L’Importance du Front-End

L’Importance du Front-End
Back-end =
5%

L’Importance du Front-End
Front-end =
95%

L’Importance du Front-End
Même ici, front-end = 88%

Exemple
et ça continue encore, et encore...
en réalité c’est 7 à 8 fois plus long

Pourquoi côté client ?
TF1 1,8%
AlloCiné 1,5%
• La page HTML FaceBook 7,2%
représente moins de Skyrock 1%
10% France Telecom 34,7%
Free (portail) 1%
Le Monde 0,7%
• 90% offrent un meilleur Amazon France 25,1%
ROI Google (résultats) 68,8%
Yahoo! France 30,7%
Daily Motion 8,5%

Il y a encore un
travail énorme dans
le domaine de la
performance.

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

#3
Cache

Cache vide / rempli
1 2 3
l’utilisateur l’utilisateur l’utilisateur
demande demande d’autres demande de
www.yahoo.com pages web nouveau
www.yahoo.com

Cache vide / rempli
1 2
dns lookup
html
image
image
dns lookup
script
3
image
image
image
image
l’utilisateur user requests
image
image
user re-requests
demande other web pages
image
image
www.yahoo.com
www.yahoo.com script
image
image
image
image
image
image
image
image
script
dns lookup
image
image
image
image
image
dns lookup
script
script
stylesheet
image
avec un cache vide 0 0.5 1 1.5 2 2.5 3

Cache vide / rempli
1 2
dns lookup
html
image
image
dns lookup
script
3
image
image
image
image
l’utilisateur user requests
image
image
user re-requests
demande other web pages
image
image
www.yahoo.com
www.yahoo.com script
image
image
image
image
image
image
image
image
script
dns lookup
image
image
image
image
image
dns lookup
script
script
stylesheet
image
avec un cache vide 0 0.5 1 1.5 2 2.5 3

Cache vide / rempli
1 2 3
l’utilisateur l’utilisateur l’utilisateur
demande demande d’autres demande de
www.yahoo.com pages web nouveau
www.yahoo.com

Cache vide / rempli
1 2 3
l’utilisateur l’utilisateur l’utilisateur
demande demande d’autres demande de
www.yahoo.com pages web nouveau
www.yahoo.com

Cache vide / rempli
1 2 3
l’utilisateur l’utilisateur l’utilisateur
demande demande d’autres demande de
www.yahoo.com pages web nouveau
www.yahoo.com

Pourquoi du cache ?
Premier accès Second accès
Le gain est évident, non ?

Cache vide / rempli

Cache vide / rempli
vide = 2.4 secondes
rempli = 0.9 seconde
rempli = 83% moins de poids (octets)
rempli = 90% moins de requetes HTTP.

Cache - technique
• Expires: Wed, 24 Oct 2018 21:32:59 GMT
Cache-Control: public;max-age=315360000
• mod_expires sous Apache
ExpiresDefault \"access plus 1 month 15 days 2 hours\"
ExpiresByType image/gif \"modification plus 5 hours 3 minutes\"
• Tous les composants statiques

Cache - mise à jour
• Une URL = Une version (en cache)
• Changer l’URL pour une nouvelle version
• monscript-1.4.js
• monscript.js?20081113T123559
monscript.js?<?= filemtime($a); ?>

Cache - CDN
• CDN - Content Delivery Network
• Serveur proche du client
• Latence faible
• Cache automatique

#3b
(malheureusement, le
cache ne fonctionne pas
aussi bien qu’il pourrait)

À quel point le cache
bénéficie t-il à l’utilisateur ?

À quel point le cache
bénéficie t-il à l’utilisateur ?
Q1: Quel % d’utilisateurs
uniques voient la page avec un
cache vide ?
Q2: Quel % des pages sont vues
avec un cache vide ?

Tester le cache du navigateur
Ajouter une nouvelle image sur vos pages :
<img src=\"image/blank.gif\" height=\"1\" width=\"1\"/>
}1 px
avec ces entêtes HTTP dans la réponse :
Expires: Thu, 15 Apr 2004 20:00:00 GMT
Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

Tester le cache du navigateur
Ajouter une nouvelle image sur vos pages :
<img src=\"image/blank.gif\" height=\"1\" width=\"1\"/>
}1 px
avec ces entêtes HTTP dans la réponse :
Expires: Thu, 15 Apr 2004 20:00:00 GMT
Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

Tester le cache du navigateur
Deux codes de réponse possibles
!
200 – Le navigateur n’a pas l’image en cache
304 – Le navigateur a l’image dans son cache mais
doit vérifier la dernière date de mise à jour

Tester le cache du navigateur
Q1: Quel % # utilisateurs uniques avec au
moins une réponse 200
d’utilisateurs
uniques voient la # total d’utilisateurs uniques
page avec un cache
vide ?
Q2: Quel % des # total de réponses 200
# de 200 + # de 304
pages sont vues
avec un cache vide ?
}1 px

Résultats surprenants
1.00
0.75
0.50
0.25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
uu avec cache vide pv avec cache vide

Résultats surprenants
1.00
0.75
0.50
0.25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
uu avec cache vide pv avec cache vide

40-60% utilisateurs
20% pages vues

À emporter chez vous
1.Les utilisateurs avec un
cache vide sont plus
fréquents que vous ne le
pensez.
2.En conséquence,
optimisez et pour un
cache rempli et pour un
cache vide

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

#4
Téléchargements
parallèles

Téléchargements parallèles
Deux composants en parallèle par domaine
GIF
GIF
GIF GIF
GIF
GIF
d’après HTTP/1.1

Téléchargements parallèles

Téléchargements parallèles
html
component
component
Deux en parallèle
component
component
component
component
component
component
component
component
0 0.425 0.850 1.275 1.700
Quatre en parallèle
Huit en parallèle

Téléchargements parallèles
html
component
component
Deux en parallèle
component
component
component
component
component
component
component
component
0 0.425 0.850 1.275 1.700
html
component
component
Quatre en parallèle
component
component
component
component
component
component
component
component
0 0.375 0.750 1.125 1.500
Huit en parallèle

Téléchargements parallèles
html
component
component
Deux en parallèle
component
component
component
component
component
component
component
component
0 0.425 0.850 1.275 1.700
html
component
component
Quatre en parallèle
component
component
component
component
component
component
component
component
0 0.375 0.750 1.125 1.500
html
component
component
component
component
component
Huit en parallèle
component
component
component
component
component
0 0.375 0.750 1.125 1.500

Optimiser
les téléchargements parallèles
temps de
réponse
(secondes)
alias

Optimiser
les téléchargements parallèles
1.4 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
1.2
1.0
0.8
temps de
réponse
(secondes) 0.6
0.4
0.2
0
1 2 4 5 10
alias

Optimiser
les téléchargements parallèles
1.4
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
1.2
1.0
0.8
temps de
réponse
(secondes) 0.6
0.4
0.2
0
1 2 4 5 10
alias

Optimiser
les téléchargements parallèles
1.4
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
1.2
1.0
0.8
temps de
réponse
(secondes) 0.6
0.4
0.2
0
1 2 4 5 10
règle d’or : utiliser au moins 2 domaines, pas plus de 4

À emporter chez vous
• attention au gâchis de temps CPU
• la durée d’une requête DNS varie suivant votre
FAI et votre localisation géographique
• le nom de domaine peut ne pas être en cache

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

Résumé
What the 80/20 Rule Tells Us about
Reducing HTTP Requests
! http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Browser Cache Usage – Exposed!
! http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
When the Cookie Crumbles
! http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
Maximizing Parallel Downloads in the
Carpool Lane
! http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

#5
Optimiser les images et
les sprites

CSS Sprites
CSS:
…
HTML:
http://alistapart.com/articles/sprites

CSS Sprites
CSS:
…
HTML:
L’image combinée est plus légère
http://alistapart.com/articles/sprites

Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.

Un exemple pratique ?

Un exemple pratique ?

CSS Sprites
background-image: url(sprites.png) ;
background-position: -100px -200px;
background-repeat: no-repeat ;
width: 15px ;
height: 15px ;
On évite des dizaines
de requêtes HTTP

Optimiser les sprites
1. Combien de pages a
votre site ?
2. Votre site est-il
modulaire ?
(il devrait !)
3. Combien de temps
votre équipe peut
passer sur la
maintenance ?

Éviter les filtres
Pourquoi utiliser AlphaImageLoader ?
IE6 ne supporte pas la transparence partielle
nativement. Le filtre force ce support.

Problèmes avec les filtres
• Bloque le rendu, gèle le navigateur
• Plus grosse consomation mémoire
• Par élément, pas par image !

Solution: éviter
AlphaImageLoader
1. MIEUX: à éviter complètement, utiliser PNG8 qui dégrade
correctement dans IE < 7
2. Sinon: Utiliser un hack CSS avec l’underscore pour que le filtre ne
s’applique que à IE < 7
#elem {
background: url(some.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='some.png', sizingMethod='crop');
}

Amélioration
progressive de
PNG8
Créer l’image avec transparence binaire.
Dans Fireworks, ajouter quelques pixels
en semi-transparence.

IE6
Firefox
Opera
IE7+
Safari
Les bons navigateurs ont +
Et les dinausores ont un cas par défaut acceptable

Données de tests
Retirer Alpha Image Loader
100ms
Yahoo! search

Réduire les images

Deux problèmes distincts
Design
Qualité versus Optimisation
Ingénierie

Réduire les images
Étape 1: Qualité, Le graphiste choisit la qualité
(par exemple via “save for the web”)
Étape 2: Compression sans perte pour retirer les
dernier octets de l’image.

LE PROBLÈME
Optimizing images sucks.

LOURD = LENT

Images,
qui s’en
préoccupe ?
Top 10 sites web
45.6%
du poids des pages
vient des images.

.94

7 ERREURS
Optimisation d’images

erreur #1
Utiliser GIF quand PNG est plus léger
20.42%

erreur #2
Ne pas passer les images par PNGcrush
16.05%

erreur #3
Ne pas retirer les méta données JPEG
11.85%

erreur #4
Utiliser des PNG pleines couleurs au lieu de PNG8

erreur #5
Utiliser Alpha Image Loader
100ms
yahoo search

erreur #6
Envoyer les images générées dynamiquement “telles quelles”
38-55%
google charts api

erreur #7
Ne pas combiner les images

SOLUTION?

JPEG Tran
Outils excellents,
tellement de possibilités
PngOptimizer
OptiPNG

UN OUTIL. BEAUCOUP
D’ALGORITHMES.
Smush it optimise automatiquement les images en
utilisant le meilleur outil open source

démo
http://smush.it

Outils.

IBM Page
Detailer
Packet sniffer.
Windows seulement (IE, FF, ...).
Démo gratuite, licence à $300
http://alphaworks.ibm.com/tech/
pagedetailer

Firebug
Développement web évolué.
Gratuit.

YSlow
Apperçus et analyses de
performance. Gratuit.

Gomez
Mesures tierces.
Comparaison de concurrence.

HTTPfox
??

Webpagetest.org
Waterfall of your page load
performance as well as a
comparison against an
optimization checklist.

smush.it
L’optimisation des images sans
perte de qualité

Gestion du projet
d’amélioration des
performances.

Équilibrer le budget
performance.

Trois étapes
• Mesurer la performance et
les tendances
• Estimer l'impact en
performance de toutes les
nouvelles fonctionnalités
• Estimer l’impact de toutes les
améliorations de
performance

Estimer ? comment ?
Traquer :
• Poids de la page *
• Temps de réponse
• Requêtes HTTP
* Pour les sites plus complexes, traquer le poids de la page par
type de composants : css, js, images, flash

Fonctionnalités = Optimisation

Vérifier les attentes.
• L’impact de chaque fonctionnalité était-il ce que
vous aviez estimé ?
• Est-ce que les optimisations ont amélioré la
situation autant que vous le pensiez ?

Allouer du temps,
équilibrer le budget
améliorations de performance
vs
nouvelles fonctionnalités
124

Pour plus d’informations :

High Performance
Web Sites
Connaissances fondamentales
pour les ingénieur web
front-end
par Steve Souders,
avec des recherches de Yahoo!

Exceptional
Performance
sur YDN
http://developer.yahoo.com/
performance

Articles sur le
YUIBlog
http://yuiblog.com/blog/
category/performance

Liens
book: http://www.oreilly.com/catalog/9780596514211/
examples: http://stevesouders.com/examples/
image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6
CSS sprites: http://alistapart.com/articles/sprites
inline images: http://tools.ietf.org/html/rfc2397
jsmin: http://crockford.com/javascript/jsmin
dojo compressor: http://dojotoolkit.org/docs/shrinksafe
HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer
Fasterfox: http://fasterfox.mozdev.org/
LiveHTTPHeaders: http://livehttpheaders.mozdev.org/
Firebug: http://getfirebug.com/
YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html
http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

Images CC utilisées
“Zipper Pocket” by jogales: http://www.flickr.com/photos/jogales/11519576/
“Need for Speed” by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/
“I wonder what flavour it is?” by blather: http://www.flickr.com/photos/deadlyphoto/411770353/
“takeout boxes from Grand Shanghai” by massdistraction: http://www.flickr.com/photos/sharynmorrow/11263821/
“takeout” by dotpolka : http://www.flickr.com/photos/dotpolka/249129144/
“ice cream cone melting/rome” by Megandavid : http://www.flickr.com/photos/megandavid/189332042/
“nikon em bokeh” by dsevilla: http://www.flickr.com/photos/dsevilla/249202834/
“maybe” by Tal Bright: http://www.flickr.com/photos/bright/118197469/
“how do they do that” by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/
“Gorgeous iceberg 7 [Le Toit du Monde]” by Adventure Addict http://www.flickr.com/photos/adventureaddict/
35290307/
“molasses-spice cookies” ilmungo: http://www.flickr.com/photos/ilmungo/65345233/
“Driving is fun” by Ben McLeod: http://www.flickr.com/photos/benmcleod/59948935/
“Dozen eggs” by aeA: http://www.flickr.com/photos/raeallen/96238870/
“Max speed 15kmh” by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/
“Stairway to heaven” ognita: http://www.flickr.com/photos/ognita/503915547/
“flaps up” by http://www.flickr.com/photos/jurvetson/74274113/
“Fast Cat” by http://www.flickr.com/photos/raylopez/708023176/
“blues” by http://www.flickr.com/photos/pankaj/1877184829/

Images CC utilisées
“Vintage Kodak Studio Scales Set and Bottle” by http://www.flickr.com/photos/captkodak/
272746539/
“Assumtion, Minissota” by http://www.flickr.com/photos/afiler/226337382/
Merci encore à Nate Koechley (Yahoo!) et à l’équipe YUI

Notre atelier demain
• Côté pratique
• Démo des outils
• Apprendre faire une évaluation de performance
• Comment convaincre le business a participer
• Où se trouve plus d’info

Questions ?

Éric Daspet Nicole Sulivan
http://eric.daspet.name/ nicole@stubbornella.org
www.stubbornella.org
http://performance.survol.fr/ “stubbornella” sur le web
(livre en préparation) http://smushit.com/