80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.
Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l'expérience de l'équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.
Accessibilité : des volontaires ? - Deschamps / Levy - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
1. 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
2. Qui sommes-nous ?
• Éric Daspet
Développeur web à Yahoo!
• Nicole Sullivan
Équipe Exceptional Performance à Yahoo!
15. Les sites web modernes
& les application web ont
changés
16. De 2003 à 2008:
97K à 312K.
25.7 à 49.9 objects.
17. Les derniers 12 mois, le top1000 sites:
De 250K à 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page
18. 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
33. Nos buts principaux
• Moins de requêtes HTTP
• Des composants moins lourds
• Paralléliser les requêtes
34. Bonnes pratiques
http://developer.yahoo.com/performance
Mise à jour des 14 recommandations initiales
20 recommandations ajoutées
35. 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
36. 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)
39. 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
40. 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 ?
41. Dans l’oeil du cyclone
• La perception et l’utilisabilité sont des mesures
importantes
• Plus pertinentes que le simple onbeforeunload -
onload
• La définitionest vague et change d’une page à
l’utilisateur
de ce qu’est le onload pour
49. 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%
50. Il y a encore un
travail énorme dans
le domaine de la
performance.
62. Cache vide / rempli
vide = 2.4 secondes
rempli = 0.9 seconde
rempli = 83% moins de poids (octets)
rempli = 90% moins de requêtes HTTP.
63. Cache - technique
• Expires: Wed, 24 Oct 2018 21:32:59 GMT
Cache-Control: public;max-age=315360000
• mod_expires sous Apache
ExpiresDefault quot;access plus 1 month 15 days 2 hoursquot;
ExpiresByType image/gif quot;modification plus 5 hours 3 minutesquot;
• Tous les composants statiques
64. 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); ?>
67. À quel point le cache
bénéficie t-il à l’utilisateur ?
68. À 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 ?
69. Tester le cache du navigateur
Ajouter une nouvelle image sur vos pages :
<img src=quot;image/blank.gifquot; height=quot;1quot; width=quot;1quot;/>
}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
70. Tester le cache du navigateur
Ajouter une nouvelle image sur vos pages :
<img src=quot;image/blank.gifquot; height=quot;1quot; width=quot;1quot;/>
}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
71. 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
72. 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
76. À 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
82. 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
83. 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
84. 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
87. 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
88. 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
89. À 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
92. 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/
102. 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
103. 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 ?
104. Éviter les filtres
Pourquoi utiliser AlphaImageLoader ?
IE6 ne supporte pas la transparence partielle
nativement. Le filtre force ce support.
105. Problèmes avec les filtres
• Bloque le rendu, gèle le navigateur
• Plus grosse consomation mémoire
• Par élément, pas par image !
106. 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');
}
107. Amélioration
progressive de
PNG8
Créer l’image avec transparence binaire.
Dans Fireworks, ajouter quelques pixels
en semi-transparence.
108. IE6
Firefox
Opera
IE7+
Safari
Les bons navigateurs ont +
Et les dinausores ont un cas par défaut acceptable
112. 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.
138. 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
139. 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
141. 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 ?
142. Allouer du temps,
équilibrer le budget
améliorations de performance
vs
nouvelles fonctionnalités
122
143. High Performance
Web Sites
Connaissances fondamentales
pour les ingénieur web
front-end
par Steve Souders,
avec des recherches de Yahoo!
145. Articles sur le
YUIBlog
http://yuiblog.com/blog/
category/performance
146. 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
148. É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/