Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

9,565 views

Published on

Initiation WebPerf :

Comprendre, Analyser et Optimiser les performances Web Front-End

Published in: Technology, Design
  • Be the first to comment

Initiation Webperf : Comprendre, analyser et optimiser les performances web Front-End

  1. 1. Initiation WebPerf<br />Comprendre et optimiser la vitesse d’affichage Front-End<br />
  2. 2. Qui suis-je ?<br />Kenny DITS : Responsable Etude et Développement chez M6Web<br />Twitter: @kenny_dee <br />
  3. 3. Sommaire<br />Introduction<br />Comprendre<br />Mesurer<br />Améliorer<br />Conclusion / Questions<br />
  4. 4. Les performances Web :<br />Introduction<br />
  5. 5. Etats des lieux<br />Perf Back-End<br />15% du temps passé<br />3% du temps passé<br />Perf Front-End<br />85% du temps passé<br />97% du temps passé<br />Web<br />Source : http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/<br />Mobile<br />
  6. 6. Pourquoi ?<br />Référencement<br />Satisfaction internautes<br />Contenu important visible plus rapidement<br />Diminuer les coûts d'hébergement / BP<br />Bonnes pratiques de désign / intégration<br />QOS<br />
  7. 7. Crédibilité<br />« Anypause beforeresponding to a simple question "doesthisdressmake me look big ?" qualifies the inevitableresponse"absolutelynot" as lesscertain. »<br />Source : http://radar.oreilly.com/2011/04/why-speed-matters.html<br />
  8. 8. Speed Matters !<br />Tout le monde est concerné !<br />
  9. 9. 1)Comprendre les performances Web<br />
  10. 10. Les métriques de base<br />Start Render<br />Document Complete<br />FullyLoaded<br />Request<br />Bytes In<br />
  11. 11. Comment fonctionnent nos navigateurs ?<br />Latence (Round Trip Time)<br />Connexions simultanées par domaine<br />Fonctionnement CSS / JS<br />…<br />Voir BrowserScope.org<br />
  12. 12. BrowserScope<br />Comparatif navigateurs surhttp://www.browserscope.org<br />
  13. 13. Cuzillon<br />Tester des combinaisons Js/Css/image/iframe …http://stevesouders.com/cuzillion/<br />
  14. 14. 2)Mesurer les performances web :<br />
  15. 15. WaterfallCharts<br />Exemple généré avec Webpagetest<br />
  16. 16. Mesurer les performances ?<br />En local :<br />
  17. 17. Onglet Réseau :<br /><ul><li>Waterfall complet
  18. 18. Filtres par type de fichier
  19. 19. Détails des requêtes
  20. 20. http://www.firebug.net</li></ul>Firebug (Plugin Firefox)<br />
  21. 21. Onglet Yslow de Firebug :<br /><ul><li>Best practices Webperf
  22. 22. Yslow Score</li></ul>Yslow (Plugin Firebug)<br />
  23. 23. <ul><li>Best PraticesWebperf
  24. 24. PageSpeed Score / Yslow Rank</li></ul>PageSpeed /Yslow<br />
  25. 25. Payant.<br />Fonctionne avec IE et Firefox<br />Windows only …<br />HTTPWatch<br />
  26. 26. Windows only<br />Pas lié à un navigateur : capture le traffic web<br />WaterfallCharts<br />http://www.fiddler2.com/<br />Fiddler<br />
  27. 27. Dynatrace Ajax<br />Windows uniquement (IE/FF)<br />Très précis pour le javascript<br />Beaucoup de possibilités<br />Version premium payante<br />http://ajax.dynatrace.com/<br />
  28. 28. Chrome Speed Tracer<br />Sur la version de dév de Chrome<br />Reflow/Repaint<br />Très précis mais complexe<br />Adapté aux applications « Ajax »<br />
  29. 29. Mesurer les performances ?<br />A distance :<br />
  30. 30. WebPageTest.org<br /><ul><li>La référence incontestable dans le domaine.
  31. 31. Crée par @patmeenan (désormais chez Google)http://www.lafermeduweb.net/tutorial/web-page-test-auditez-les-performances-de-votre-site-web-42.html</li></li></ul><li>WebPageTest.org<br /><ul><li>Waterfallcharts très complet (et paramétrable)
  32. 32. Graphique par connexion Http
  33. 33. Multi Browser :
  34. 34. IE (6/7/8/9) + Dynatrace, Chrome 11, Chrome Frame 11 IE 6
  35. 35. Génération de vidéo
  36. 36. Comparaison visuelle et vidéo entre plusieurs tests
  37. 37. Grand choix de location : Paris / Dulles / Londres / HongKong …
  38. 38. Scripting (navigation / clic / formulaire …)
  39. 39. Blocking : permet de bloquer la pub, les Js, des scripts tiers, des domaines etc …
  40. 40. Résultâts ultra-complets (par type de ressources, par domaine)
  41. 41. Screenshots des tests
  42. 42. Intégration pagespeed, yslow et différent conseils pour optimiser la page testée </li></li></ul><li>Comparaison Vidéo WebPageTest.org<br />
  43. 43. Blaze.ioMobile<br /><ul><li>Iphone 4.3
  44. 44. Android 2.2, 2.3
  45. 45. Vidéo + Waterfall …
  46. 46. Accessible via l’onglet Mobile de WebPageTest
  47. 47. http://www.blaze.io/mobile/</li></li></ul><li>W3C Validator Mobile<br />Respect des standards<br />Priorisation des erreurs rencontrées<br />http://validator.w3.org/mobile/<br />
  48. 48. ShowSlow<br /><ul><li>Peut être installé sur son serveur
  49. 49. Implémente PageSpeed / Yslow et Webpagetest
  50. 50. Pratique pour l’automation (Selenium IDE / Selenium RC / Firebug / Netexport …)
  51. 51. http://www.showslow.com</li></li></ul><li>Yottaa.com<br /><ul><li>Cloud
  52. 52. YottaaOptimizer
  53. 53. Waterfall + Time To Title
  54. 54. http://www.yottaa.com</li></li></ul><li>Mesurer les performances <br />Voir aussi: <br />Pingdom, Yottaa,Gxmetric… <br />WebPageTest Monitoring<br />ShowSlow+ Automation (Selenium RC) + Firebug+ NetExport<br />PageSpeed Online<br />…<br />
  55. 55. 3)Comment améliorer les performances ?<br />Quelques pistes:<br />
  56. 56. Diminuer le nombre de requêtes HTTP<br />
  57. 57. Sprites CSS<br />Regrouper plusieurs images en une seule, et les positionner via CSS<br />
  58. 58. Images => CSS<br />Remplacer les images de dégradé (pngtocss)et les bords arrondis par des équivalents CSS 3<br />https://github.com/bluesmoon/pngtocss<br />
  59. 59. Regroupement CSS et Js intelligent<br />Regrouper les multiples Js et Css en fonction du rubriquage de votre site.<br />
  60. 60. Cache HTTP / Expires<br />Définir une durée de cache pour chaque élément de vos sites :<br />Ex : ExpiresByType dans la conf Apache<br />http://httpd.apache.org/docs/2.0/mod/mod_expires.html<br />
  61. 61. Javascript : Optimisation et blocage<br />Utilisez FireBug / Speed Tracer / Dynatrace pour optimiser votre code Javascript. Eviter les scripts JsInline autant que possible ou regroupez les en fin de page.<br />Utilisez des sélecteurs efficaces.<br />Evitez les balises <script> dans le <head>, et préférez les avant le </body><br />
  62. 62. Javascript externe : Asynchrone<br />Charger les scripts qui le permettent en Asynchrone afin de ne pas bloquer le chargement des autres éléments.<br />var e = document.createElement('script’);e.async= true;e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js’;document.getElementById('fb-root').appendChild(e);<br />
  63. 63. Optimisation et positionnement CSS<br />Utilisez PageSpeed pour modifier les sélecteurs non optimisés.<br />Réduisez la taille de vos feuilles de style au maximum.<br />
  64. 64. CookieLess Domain<br />Utilisez des domaines sans cookie pour délivrer les contenus statiques.<br />
  65. 65. Domain Sharding<br />Pour une meilleure parallélisation, utilisez plusieurs domaines pour délivrer les contenus statiques<br />
  66. 66. Lazyloading<br />Ne charger certains contenus que lorsque l’utilisateur peut le visualiser.<br />
  67. 67. Compression Gzip / Keep-Alive<br />Gzip permet de gagner 70% sur la taille des éléments de la page.<br />Le keep-alive permet l’établissement de connexions permanentes.<br />
  68. 68. Compression CSS et Javascript<br /> Pour le JS : Closure Compiler, YUICompressor<br />http://code.google.com/intl/fr-FR/closure/compiler/ , http://developer.yahoo.com/yui/compressor/<br />Pour les CSS : CssCompressor (PHP) <br />https://github.com/codenothing/css-compressor/<br />
  69. 69. Compression des images Jpg/Png<br />OptiPng / Jpegtran / Pngcrush / Smush.it / ImageMagick …<br />
  70. 70. Widgets ou scripts Tiers<br />Attention à l’intégration des widgets Facebook, Twitter, ou tags Adsense & co …Lazyload / Cron …<br />http://stevesouders.com/p3pc/<br />
  71. 71. Commentaires conditionnels IE<br />Paralleliser les CSS sur IE en cas de commentairesconditionnels dans le <head><br /><!--[if IE]><![endif]--><br />=> 0,2s gagnée sur le StartRender<br />http://webforscher.wordpress.com/2010/05/20/ie-6-slowing-down-ie-8/<br />
  72. 72. Feuille de style Print<br />Ajouter la CSS print dans la CSS globale avec :<br /> @media print { … }<br />
  73. 73. Pour continuer :<br />
  74. 74. HTTP Archive : le standard<br />Viewer : <br />http://code.google.com/p/harviewer/<br />Format : http://groups.google.com/group/http-archive-specification<br />Supporté par : http://groups.google.com/group/http-archive-specification/web/har-adopters?hl=en<br />
  75. 75. HTTP Archive : le site<br />Statistiques diverses sur les performances Web récoltées via les mesures publiques WebPageTest<br />http://www.httparchive.org<br />
  76. 76. Pour continuer<br />Nouvelle métrique : Abovethe Fold Time (AFT) sur WPT.<br />Google Analytics (mesures des performances)<br />Service d’optimization : Strangeloop / Yottaa / Blaze.io / CloudFlare / Torbit …<br />Audit de performances<br />
  77. 77. Conclusion/Thanks to <br />WebperfGuru’s : StoyanStefanov / Steve Souders<br />Webperf Fr : Eric Daspet @edasfr, Vincent Voyer @zeroload & many more<br />Le Webperf Group Fr : https://groups.google.com/group/performance-web?hl=fr<br />#webperf sur Twitter<br />EvenFasterWebsites (Livre)<br />High Performance Websites (Livre)<br />…<br />
  78. 78. Follow me on Twitter<br />@kenny_dee <br />

×