Pourquoi la performance?

  • 7,419 views
Uploaded on

Quantifier et améliorer la performance de tout produit Yahoo! mondial avec Éric Daspet pour ParisWeb 2008

Quantifier et améliorer la performance de tout produit Yahoo! mondial avec Éric Daspet pour ParisWeb 2008

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Le video du meme presentation. Video of the same presentation.


    Eric Daspet & Nicole Sullivan - Performance Web côté client
    Uploaded by parisweb<br /><object type="application/x-shockwave-flash" data="http://www.dailymotion.com/swf/k7kwkTxouboio5Saqh&related=0" width="350" height="288"><param name="movie" value="http://www.dailymotion.com/swf/k7kwkTxouboio5Saqh&related=0"></param><embed src="http://www.dailymotion.com/swf/k7kwkTxouboio5Saqh&related=0" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,419
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
0
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!
  • 3. Quantifier et améliorer la performance de tout produit Yahoo! mondial
  • 4. you?
  • 5. Pourquoi la performance?
  • 6. 1: Rapide est mieux
  • 7. 7
  • 8. 10
  • 9. 11
  • 10. 12
  • 11. 13
  • 12. 2: Les sites sont plus lourd
  • 13. Les sites web modernes & les application web ont changer
  • 14. De 2003 à 2008: 97K à 312K. 25.7 à 49.9 objects.
  • 15. Les derniers 12 mois, le top1000 sites: De 250K à 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  • 16. 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
  • 17. 3: L’utilisateur veut un site rapide
  • 18. Quel est le problème ? • 6 sur 11 ont un chargement > 4s • Abandons, agacement, • Impacte votre business
  • 19. +100 ms
  • 20. Amazon: ventes -1% +100 ms
  • 21. +400 ms
  • 22. Yahoo!: abandons +5 à 9% +400 ms
  • 23. +500 ms
  • 24. Google: recherches -20% +500 ms
  • 25. -30% poids
  • 26. Google: +30% trafic -30% poids
  • 27. Qu’est-ce que la performance?
  • 28. Deux Types: Temps de réponse & Efficacité du systeme
  • 29. Notre focus est sur la temps de réponse des produits web
  • 30. Cueillir les fruits de la performance (certains bas, certains hauts)
  • 31. Nos buts principaux • Moins de requêtes HTTP • Des composants moins lourds • Paralléliser les requêtes
  • 32. Bonnes pratiques http://developer.yahoo.com/performance Mise à jour des 14 recommandations initiales 20 recommandations ajoutées
  • 33. 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
  • 34. 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)
  • 35. #1 Perception
  • 36. 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
  • 37. 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 ?
  • 38. 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.
  • 39. #2 “80% of consequences come from 20% of causes” —Vilfredo Pareto
  • 40. L’Importance du Front-End
  • 41. L’Importance du Front-End Back-end = 5%
  • 42. L’Importance du Front-End Front-end = 95%
  • 43. L’Importance du Front-End Même ici, front-end = 88%
  • 44. Exemple et ça continue encore, et encore... en réalité c’est 7 à 8 fois plus long
  • 45. 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%
  • 46. Il y a encore un travail énorme dans le domaine de la performance.
  • 47. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  • 48. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  • 49. #3 Cache
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. Pourquoi du cache ? Premier accès Second accès Le gain est évident, non ?
  • 57. Cache vide / rempli
  • 58. Cache vide / rempli vide = 2.4 secondes rempli = 0.9 seconde rempli = 83% moins de poids (octets) rempli = 90% moins de requetes HTTP.
  • 59. 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
  • 60. 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); ?>
  • 61. Cache - CDN • CDN - Content Delivery Network • Serveur proche du client • Latence faible • Cache automatique
  • 62. #3b (malheureusement, le cache ne fonctionne pas aussi bien qu’il pourrait)
  • 63. À quel point le cache bénéficie t-il à l’utilisateur ?
  • 64. À 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 ?
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 40-60% utilisateurs 20% pages vues
  • 72. À 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
  • 73. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  • 74. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  • 75. #4 Téléchargements parallèles
  • 76. Téléchargements parallèles Deux composants en parallèle par domaine GIF GIF GIF GIF GIF GIF d’après HTTP/1.1
  • 77. Téléchargements parallèles
  • 78. 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
  • 79. 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
  • 80. 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
  • 81. Optimiser les téléchargements parallèles temps de réponse (secondes) alias
  • 82. 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
  • 83. 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
  • 84. 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
  • 85. À 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
  • 86. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
  • 87. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
  • 88. 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/
  • 89. #5 Optimiser les images et les sprites
  • 90. CSS Sprites CSS: … HTML: http://alistapart.com/articles/sprites
  • 91. CSS Sprites CSS: … HTML: L’image combinée est plus légère http://alistapart.com/articles/sprites
  • 92. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  • 93. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  • 94. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  • 95. Pourquoi est-ce que ça fonctionne ? Les balises HTML sont comme des fenêtres.
  • 96. Un exemple pratique ?
  • 97. Un exemple pratique ?
  • 98. 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
  • 99. 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 ?
  • 100. Éviter les filtres Pourquoi utiliser AlphaImageLoader ? IE6 ne supporte pas la transparence partielle nativement. Le filtre force ce support.
  • 101. Problèmes avec les filtres • Bloque le rendu, gèle le navigateur • Plus grosse consomation mémoire • Par élément, pas par image !
  • 102. 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'); }
  • 103. Amélioration progressive de PNG8 Créer l’image avec transparence binaire. Dans Fireworks, ajouter quelques pixels en semi-transparence.
  • 104. IE6 Firefox Opera IE7+ Safari Les bons navigateurs ont + Et les dinausores ont un cas par défaut acceptable
  • 105. Données de tests Retirer Alpha Image Loader 100ms Yahoo! search
  • 106. Réduire les images
  • 107. Deux problèmes distincts Design Qualité versus Optimisation Ingénierie
  • 108. 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.
  • 109. LE PROBLÈME Optimizing images sucks.
  • 110. LOURD = LENT
  • 111. Images, qui s’en préoccupe ? Top 10 sites web 45.6% du poids des pages vient des images.
  • 112. .94
  • 113. 7 ERREURS Optimisation d’images
  • 114. erreur #1 Utiliser GIF quand PNG est plus léger 20.42%
  • 115. erreur #2 Ne pas passer les images par PNGcrush 16.05%
  • 116. erreur #3 Ne pas retirer les méta données JPEG 11.85%
  • 117. erreur #4 Utiliser des PNG pleines couleurs au lieu de PNG8
  • 118. erreur #5 Utiliser Alpha Image Loader 100ms yahoo search
  • 119. erreur #6 Envoyer les images générées dynamiquement “telles quelles” 38-55% google charts api
  • 120. erreur #7 Ne pas combiner les images
  • 121. SOLUTION?
  • 122. JPEG Tran Outils excellents, tellement de possibilités PngOptimizer OptiPNG
  • 123. UN OUTIL. BEAUCOUP D’ALGORITHMES. Smush it optimise automatiquement les images en utilisant le meilleur outil open source
  • 124. démo http://smush.it
  • 125. Outils.
  • 126. IBM Page Detailer Packet sniffer. Windows seulement (IE, FF, ...). Démo gratuite, licence à $300 http://alphaworks.ibm.com/tech/ pagedetailer
  • 127. Firebug Développement web évolué. Gratuit.
  • 128. YSlow Apperçus et analyses de performance. Gratuit.
  • 129. Gomez Mesures tierces. Comparaison de concurrence.
  • 130. HTTPfox ??
  • 131. Webpagetest.org Waterfall of your page load performance as well as a comparison against an optimization checklist.
  • 132. smush.it L’optimisation des images sans perte de qualité
  • 133. Gestion du projet d’amélioration des performances.
  • 134. Équilibrer le budget performance.
  • 135. 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
  • 136. 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
  • 137. Fonctionnalités = Optimisation
  • 138. 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 ?
  • 139. Allouer du temps, équilibrer le budget améliorations de performance vs nouvelles fonctionnalités 124
  • 140. Pour plus d’informations :
  • 141. High Performance Web Sites Connaissances fondamentales pour les ingénieur web front-end par Steve Souders, avec des recherches de Yahoo!
  • 142. Exceptional Performance sur YDN http://developer.yahoo.com/ performance
  • 143. Articles sur le YUIBlog http://yuiblog.com/blog/ category/performance
  • 144. 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
  • 145. 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/
  • 146. 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
  • 147. 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. Questions ?
  • 149. É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/