performance web côté client - daspet / sullivan - paris web 2008
DESCRIPTION
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.TRANSCRIPT
![Page 1: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/1.jpg)
High Performance Web Sites
Nicole [email protected]
www.stubbornella.orghttp://developer.yahoo.com/performance
Éric DaspetDéveloppeur web à Yahoo!http://eric.daspet.name/
![Page 2: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/2.jpg)
• Éric DaspetDéveloppeur web à Yahoo!
• Nicole SullivanÉquipe Exceptional Performance à Yahoo!
Qui sommes-nous ?
![Page 3: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/3.jpg)
Quantifier et améliorer la performance de tout produit
Yahoo! mondial
![Page 4: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/4.jpg)
you?
![Page 5: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/5.jpg)
Pourquoi la performance?
![Page 6: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/6.jpg)
1: Rapide est mieux
![Page 7: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/7.jpg)
7
![Page 8: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/8.jpg)
![Page 9: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/9.jpg)
![Page 10: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/10.jpg)
10
![Page 11: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/11.jpg)
11
![Page 12: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/12.jpg)
12
![Page 13: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/13.jpg)
13
![Page 14: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/14.jpg)
2: Les sites sont plus lourd
![Page 15: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/15.jpg)
Les sites web modernes & les application web ont
changés
![Page 16: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/16.jpg)
De 2003 à 2008:97K à 312K.
25.7 à 49.9 objects.
![Page 17: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/17.jpg)
Les derniers 12 mois, le top1000 sites:De 250K à 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page
![Page 18: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/18.jpg)
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
![Page 19: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/19.jpg)
3: L’utilisateur veut un site rapide
![Page 20: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/20.jpg)
Quel est le problème ?
• 6 sur 11 ont un chargement > 4s
• Abandons, agacement,
• Impacte votre business
![Page 21: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/21.jpg)
+100 ms
![Page 22: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/22.jpg)
Amazon: ventes -1%
+100 ms
![Page 23: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/23.jpg)
+400 ms
![Page 24: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/24.jpg)
Yahoo!: abandons +5 à 9%
+400 ms
![Page 25: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/25.jpg)
+500 ms
![Page 26: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/26.jpg)
Google: recherches -20%
+500 ms
![Page 27: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/27.jpg)
-30% poids
![Page 28: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/28.jpg)
Google: +30% trafic
-30% poids
![Page 29: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/29.jpg)
Qu’est-ce que la performance?
![Page 30: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/30.jpg)
Deux Types:Temps de réponse
&Efficacité du systeme
![Page 31: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/31.jpg)
Notre focus est sur la temps de
réponse des produits web
![Page 32: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/32.jpg)
Cueillir les fruits de la performance
(certains bas, certains hauts)
![Page 33: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/33.jpg)
Nos buts principaux
• Moins de requêtes HTTP
• Des composants moins lourds
• Paralléliser les requêtes
![Page 34: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/34.jpg)
Bonnes pratiqueshttp://developer.yahoo.com/performance
Mise à jour des 14 recommandations initiales20 recommandations ajoutées
![Page 35: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/35.jpg)
14 bonnes pratiques (mises à jour)Faire moins de requêtes HTTPUtiliser un réseau de diffusion de contenu (CDN)Ajouter des entêtes “Expires” (ou Cache-control)Compresser les composants avec gzipMettre les CSS en hautDéplacer les CSS en bas (en ligne aussi)Éviter les “expression” en CSSExternaliser CSS et JavascriptRéduire les requêtes DNSMinimifier les Javascript et CSS (en ligne aussi)Éviter les redirectionsRetirer les scripts dupliquésConfigurer les ETagsRendre Ajax cachable http://developer.yahoo.com/performance/rules.html
![Page 36: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/36.jpg)
Après YSlow “A”?1. Vider le tampon rapidement (buffer)
2. Utiliser GET pour Ajax
3. Post-charger les composants
4. Pré-charger les composants
5. Réduire le nombre d’éléments DOM
6. Séparer les composants sur plusieurs domaines
7. Réduire le nombre d’iframe
8. Pas de 404
9. Réduire la taille des cookies
10. Utiliser les domaines sans cookie pour les composants
11. Minimiser les accès DOM
12. Développer des gestionnaires d’événements sympa
13. Choisir <link> plutôt que @import
14. Éviter “filter”
15. Optimiser les images
16. Optimiser les sprites CSS
17. Ne redimensionnez pas les images en HTML
18. Rendez favicon.ico léger et cachable
19. Nouveauté iPhone 3G
20. Groupes les composants dans un document mulitpart (mobiles)
![Page 37: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/37.jpg)
![Page 38: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/38.jpg)
Perception
#1
![Page 39: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/39.jpg)
temps de réponse perçu
performance speed enjoyable urgent instant accelerate
perception snap achievement better improve action pleasant pace
quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting
slow crawl boring snail stagnant
unexceptional yawn
unresponsive impatient delay
moderate blah subdue drag apathetic
prolong slack load sluggish sleepy
late unexciting reduced lag
complex heavy unmemorable
obscure
why wait
![Page 40: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/40.jpg)
temps de réponse perçu
Quelle est l’expérience utilisateur ?
performance speed enjoyable urgent instant accelerate
perception snap achievement better improve action pleasant pace
quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting
slow crawl boring snail stagnant
unexceptional yawn
unresponsive impatient delay
moderate blah subdue drag apathetic
prolong slack load sluggish sleepy
late unexciting reduced lag
complex heavy unmemorable
obscure
why wait
![Page 41: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/41.jpg)
Dans l’oeil du cyclone
• La perception et l’utilisabilité sont des mesures importantes
• Plus pertinentes que le simple onbeforeunload - onload
• La définition de ce qu’est le onload pour l’utilisateur est vague et change d’une page à
![Page 42: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/42.jpg)
#2“80% of consequences come from
20% of causes”
—Vilfredo Pareto
![Page 43: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/43.jpg)
L’Importance du Front-End
![Page 44: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/44.jpg)
L’Importance du Front-End
Back-end =
5%
![Page 45: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/45.jpg)
L’Importance du Front-End
Front-end =
95%
![Page 46: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/46.jpg)
L’Importance du Front-End
Même ici, front-end = 88%
![Page 47: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/47.jpg)
![Page 48: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/48.jpg)
Exemple
et ça continue encore, et encore...en réalité c’est 7 à 8 fois plus long
![Page 49: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/49.jpg)
Pourquoi côté client ?
• La page HTML représente moins de 10%
• 90% offrent un meilleur ROI
TF1 1,8%
AlloCiné 1,5%
FaceBook 7,2%
Skyrock 1%
France Telecom 34,7%
Free (portail) 1%
Le Monde 0,7%
Amazon France 25,1%
Google (résultats) 68,8%
Yahoo! France 30,7%
Daily Motion 8,5%
![Page 50: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/50.jpg)
Il y a encore un travail énorme dans le domaine de la performance.
![Page 51: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/51.jpg)
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
![Page 52: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/52.jpg)
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
![Page 53: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/53.jpg)
Cache
#3
![Page 54: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/54.jpg)
1l’utilisateur
demande www.yahoo.com
2l’utilisateur
demande d’autres pages web
3l’utilisateur demande de
nouveau www.yahoo.com
Cache vide / rempli
![Page 55: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/55.jpg)
1l’utilisateur demande
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Cache vide / rempli
avec un cache vide 0 0.5 1 1.5 2 2.5 3
imagestylesheet
scriptscript
dns lookupimageimageimageimageimage
dns lookupscript
imageimageimageimageimageimageimageimagescript
imageimageimageimageimageimageimageimagescript
dns lookupimageimage
htmldns lookup
![Page 56: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/56.jpg)
1l’utilisateur demande
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Cache vide / rempli
avec un cache vide 0 0.5 1 1.5 2 2.5 3
imagestylesheet
scriptscript
dns lookupimageimageimageimageimage
dns lookupscript
imageimageimageimageimageimageimageimagescript
imageimageimageimageimageimageimageimagescript
dns lookupimageimage
htmldns lookup
![Page 57: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/57.jpg)
Cache vide / rempli
1l’utilisateur
demande www.yahoo.com
2l’utilisateur
demande d’autres pages web
3l’utilisateur demande de
nouveau www.yahoo.com
![Page 58: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/58.jpg)
Cache vide / rempli
1l’utilisateur
demande www.yahoo.com
2l’utilisateur
demande d’autres pages web
3l’utilisateur demande de
nouveau www.yahoo.com
![Page 59: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/59.jpg)
Cache vide / rempli
1l’utilisateur
demande www.yahoo.com
2l’utilisateur
demande d’autres pages web
3l’utilisateur demande de
nouveau www.yahoo.com
![Page 60: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/60.jpg)
Pourquoi du cache ?Premier accès Second accès
Le gain est évident, non ?
![Page 61: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/61.jpg)
Cache vide / rempli
![Page 62: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/62.jpg)
Cache vide / rempli
vide = 2.4 secondes
rempli = 0.9 seconde
rempli = 83% moins de poids (octets)
rempli = 90% moins de requêtes HTTP.
![Page 63: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/63.jpg)
Cache - technique
• Expires: Wed, 24 Oct 2018 21:32:59 GMTCache-Control: public;max-age=315360000
• mod_expires sous ApacheExpiresDefault "access plus 1 month 15 days 2 hours"ExpiresByType image/gif "modification plus 5 hours 3 minutes"
• Tous les composants statiques
![Page 64: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/64.jpg)
Cache - mise à jour
• Une URL = Une version (en cache)
• Changer l’URL pour une nouvelle version
• monscript-1.4.js
• monscript.js?20081113T123559monscript.js?<?= filemtime($a); ?>
![Page 65: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/65.jpg)
Cache - CDN
• CDN - Content Delivery Network
• Serveur proche du client
• Latence faible
• Cache automatique
![Page 66: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/66.jpg)
(malheureusement, le cache ne fonctionne pas aussi bien qu’il pourrait)
#3b
![Page 67: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/67.jpg)
À quel point le cache bénéficie t-il à l’utilisateur ?
![Page 68: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/68.jpg)
À 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 ?
![Page 69: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/69.jpg)
Ajouter une nouvelle image sur vos pages :<img src="image/blank.gif" height="1" width="1"/>
avec ces entêtes HTTP dans la réponse :Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMT
}1 px
Tester le cache du navigateur
![Page 70: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/70.jpg)
Ajouter une nouvelle image sur vos pages :<img src="image/blank.gif" height="1" width="1"/>
avec ces entêtes HTTP dans la réponse :Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMT
}1 px
Tester le cache du navigateur
![Page 71: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/71.jpg)
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
![Page 72: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/72.jpg)
Tester le cache du navigateurQ1: Quel % d’utilisateurs uniques voient la page avec un cache vide ?
# utilisateurs uniques avec au moins une réponse 200
# total d’utilisateurs uniques
Q2: Quel % des pages sont vues avec un cache vide ?
# total de réponses 200# de 200 + # de 304
}1 px
![Page 73: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/73.jpg)
0,25
0,50
0,75
1,00
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
![Page 74: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/74.jpg)
0,25
0,50
0,75
1,00
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
![Page 75: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/75.jpg)
40-60% utilisateurs
20% pages vues
![Page 76: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/76.jpg)
À 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
![Page 77: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/77.jpg)
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 78: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/78.jpg)
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 79: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/79.jpg)
Téléchargements parallèles
#4
![Page 80: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/80.jpg)
Téléchargements parallèles
Deux composants en parallèle par domaine
GIF GIF
GIF
GIF
GIF
GIF
d’après HTTP/1.1
![Page 81: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/81.jpg)
Téléchargements parallèles
![Page 82: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/82.jpg)
Téléchargements parallèles
Deux en parallèle
Quatre en parallèle
Huit en parallèle
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,425 0,850 1,275 1,700
![Page 83: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/83.jpg)
Téléchargements parallèles
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,375 0,750 1,125 1,500
Deux en parallèle
Quatre en parallèle
Huit en parallèle
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,425 0,850 1,275 1,700
![Page 84: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/84.jpg)
Téléchargements parallèles
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,375 0,750 1,125 1,500
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,375 0,750 1,125 1,500
Deux en parallèle
Quatre en parallèle
Huit en parallèle
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0,425 0,850 1,275 1,700
![Page 85: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/85.jpg)
Optimiser les téléchargements parallèles
temps de réponse
(secondes)
alias
![Page 86: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/86.jpg)
Optimiser les téléchargements parallèles
temps de réponse
(secondes)
alias
0
0,2
0,4
0,6
0,8
1,0
1,2
1,4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
![Page 87: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/87.jpg)
Optimiser les téléchargements parallèles
temps de réponse
(secondes)
alias
0
0,2
0,4
0,6
0,8
1,0
1,2
1,4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
![Page 88: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/88.jpg)
Optimiser les téléchargements parallèles
temps de réponse
(secondes)
règle d’or : utiliser au moins 2 domaines, pas plus de 4
0
0,2
0,4
0,6
0,8
1,0
1,2
1,4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
![Page 89: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/89.jpg)
À 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
![Page 90: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/90.jpg)
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 91: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/91.jpg)
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 92: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/92.jpg)
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/
![Page 93: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/93.jpg)
#5Optimiser les images et
les sprites
![Page 94: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/94.jpg)
CSS Sprites
http://alistapart.com/articles/sprites
…
CSS:
HTML:
![Page 95: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/95.jpg)
CSS Sprites
L’image combinée est plus légèrehttp://alistapart.com/articles/sprites
…
CSS:
HTML:
![Page 96: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/96.jpg)
Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.
![Page 97: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/97.jpg)
Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.
![Page 98: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/98.jpg)
Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.
![Page 99: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/99.jpg)
Pourquoi est-ce que ça fonctionne ?
Les balises HTML sont comme des fenêtres.
![Page 100: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/100.jpg)
Un exemple pratique ?
![Page 101: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/101.jpg)
Un exemple pratique ?
![Page 102: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/102.jpg)
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
![Page 103: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/103.jpg)
Optimiser les sprites1. 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 ?
![Page 104: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/104.jpg)
Éviter les filtresPourquoi utiliser AlphaImageLoader ?
IE6 ne supporte pas la transparence partielle nativement. Le filtre force ce support.
![Page 105: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/105.jpg)
Problèmes avec les filtres
• Bloque le rendu, gèle le navigateur
• Plus grosse consomation mémoire
• Par élément, pas par image !
![Page 106: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/106.jpg)
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');
}
![Page 107: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/107.jpg)
Amélioration progressive de
PNG8Créer l’image avec transparence binaire. Dans Fireworks, ajouter quelques pixels
en semi-transparence.
![Page 108: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/108.jpg)
Les bons navigateurs ont +Et les dinausores ont un cas par défaut acceptable
IE6
FirefoxOperaIE7+Safari
![Page 109: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/109.jpg)
Données de testsRetirer Alpha Image Loader
100msYahoo! search
![Page 110: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/110.jpg)
Réduire les images
![Page 111: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/111.jpg)
Deux problèmes distincts
Qualité versus Optimisation
Design
Ingénierie
![Page 112: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/112.jpg)
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.
![Page 113: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/113.jpg)
LE PROBLÈMEOptimizing images sucks.
![Page 114: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/114.jpg)
LOURD = LENT
![Page 115: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/115.jpg)
Images, qui s’en
préoccupe ? Top 10 sites web
45.6% du poids des pages vient des images.
![Page 116: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/116.jpg)
.94
![Page 117: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/117.jpg)
7 ERREURSOptimisation d’images
![Page 118: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/118.jpg)
erreur #1Utiliser GIF quand PNG est plus léger
20.42%
![Page 119: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/119.jpg)
erreur #2Ne pas passer les images par PNGcrush
16.05%
![Page 120: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/120.jpg)
erreur #3Ne pas retirer les méta données JPEG
11.85%
![Page 121: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/121.jpg)
erreur #4Utiliser des PNG pleines couleurs au lieu de PNG8
![Page 122: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/122.jpg)
erreur #5Utiliser Alpha Image Loader
100msyahoo search
![Page 123: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/123.jpg)
erreur #6Envoyer les images générées dynamiquement “telles quelles”
38-55% google charts api
![Page 124: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/124.jpg)
erreur #7Ne pas combiner les images
![Page 125: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/125.jpg)
SOLUTION?
![Page 126: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/126.jpg)
Outils excellents,tellement de possibilités
JPEG Tran
PngOptimizer
OptiPNG
![Page 127: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/127.jpg)
UN OUTIL. BEAUCOUP D’ALGORITHMES.
Smush it optimise automatiquement les images en utilisant le meilleur outil open source
![Page 129: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/129.jpg)
![Page 130: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/130.jpg)
IBM Page Detailer
Packet sniffer. Windows seulement (IE, FF, ...).Démo gratuite, licence à $300
http://alphaworks.ibm.com/tech/pagedetailer
![Page 131: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/131.jpg)
FirebugDéveloppement web évolué.
Gratuit.
![Page 132: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/132.jpg)
YSlowApperçus et analyses de performance. Gratuit.
![Page 133: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/133.jpg)
GomezMesures tierces.
Comparaison de concurrence.
![Page 134: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/134.jpg)
HTTPfox??
![Page 135: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/135.jpg)
Webpagetest.org??
![Page 136: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/136.jpg)
smush.itL’optimisation des images sans
perte de qualité
![Page 137: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/137.jpg)
Équilibrer le budget performance.
![Page 138: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/138.jpg)
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
![Page 139: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/139.jpg)
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
![Page 140: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/140.jpg)
Fonctionnalités = Optimisation
![Page 141: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/141.jpg)
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 ?
![Page 142: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/142.jpg)
Allouer du temps, équilibrer le budget
améliorations de performance vs
nouvelles fonctionnalités
122
![Page 143: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/143.jpg)
High Performance Web Sites
Connaissances fondamentales pour les ingénieur web
front-end
par Steve Souders, avec des recherches de Yahoo!
![Page 144: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/144.jpg)
Exceptional Performance
sur YDNhttp://developer.yahoo.com/
performance
![Page 145: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/145.jpg)
Articles sur le YUIBlog
http://yuiblog.com/blog/category/performance
![Page 146: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/146.jpg)
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
![Page 147: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/147.jpg)
Questions ?
![Page 148: Performance Web côté client - Daspet / Sullivan - Paris Web 2008](https://reader034.vdocuments.mx/reader034/viewer/2022051609/547b5d41b4af9f160e8b464e/html5/thumbnails/148.jpg)
Éric Daspet
http://eric.daspet.name/
http://performance.survol.fr/(livre en préparation)
Nicole Sulivan
[email protected]“stubbornella” sur le webhttp://smushit.com/