Search

Performance Web côté client - Daspet / Sullivan - Paris Web 2008

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    2 Favorites & 1 Event

    Performance Web côté client - Daspet / Sullivan - Paris Web 2008 - Presentation 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 changés
    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 onbeforeunload - onload • La définitionest vague et change d’une page à l’utilisateur de ce qu’est le onload pour
    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 requêtes HTTP.
    59. 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
    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=\"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
    66. 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
    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://smushit.com
    125. IBM Page Detailer Packet sniffer. Windows seulement (IE, FF, ...). Démo gratuite, licence à $300 http://alphaworks.ibm.com/tech/ pagedetailer
    126. Firebug Développement web évolué. Gratuit.
    127. YSlow Apperçus et analyses de performance. Gratuit.
    128. Gomez Mesures tierces. Comparaison de concurrence.
    129. HTTPfox ??
    130. Webpagetest.org ??
    131. smush.it L’optimisation des images sans perte de qualité
    132. Équilibrer le budget performance.
    133. 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
    134. 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
    135. Fonctionnalités = Optimisation
    136. 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 ?
    137. Allouer du temps, équilibrer le budget améliorations de performance vs nouvelles fonctionnalités 122
    138. High Performance Web Sites Connaissances fondamentales pour les ingénieur web front-end par Steve Souders, avec des recherches de Yahoo!
    139. Exceptional Performance sur YDN http://developer.yahoo.com/ performance
    140. Articles sur le YUIBlog http://yuiblog.com/blog/ category/performance
    141. 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
    142. Questions ?
    143. É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/

    + Association Paris-WebAssociation Paris-Web, 11 months ago

    custom

    1668 views, 2 favs, 0 embeds more stats

    80% des problèmes de performance Web se situe au n more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1668
      • 1668 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 63
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Tags

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved