Initiation WebPerf<br />Comprendre et optimiser la vitesse d’affichage Front-End<br />
Qui suis-je ?<br />Kenny DITS : Responsable Etude et Développement chez M6Web<br />Twitter: @kenny_dee <br />
Sommaire<br />Introduction<br />Comprendre<br />Mesurer<br />Améliorer<br />Conclusion / Questions<br />
Les performances Web :<br />Introduction<br />
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 pa...
Pourquoi ?<br />Référencement<br />Satisfaction internautes<br />Contenu important visible plus rapidement<br />Diminuer l...
Crédibilité<br />« Anypause beforeresponding to a simple question "doesthisdressmake me look big ?" qualifies the inevitab...
Speed Matters !<br />Tout le monde est concerné !<br />
1)Comprendre les performances Web<br />
Les métriques de base<br />Start Render<br />Document Complete<br />FullyLoaded<br />Request<br />Bytes In<br />
Comment fonctionnent nos navigateurs ?<br />Latence (Round Trip Time)<br />Connexions simultanées par domaine<br />Fonctio...
BrowserScope<br />Comparatif navigateurs surhttp://www.browserscope.org<br />
Cuzillon<br />Tester des combinaisons Js/Css/image/iframe …http://stevesouders.com/cuzillion/<br />
2)Mesurer les performances web :<br />
WaterfallCharts<br />Exemple généré avec Webpagetest<br />
Mesurer les performances ?<br />En local :<br />
Onglet Réseau :<br /><ul><li>Waterfall complet
Filtres par type de fichier
Détails des requêtes
http://www.firebug.net</li></ul>Firebug (Plugin Firefox)<br />
Onglet Yslow de Firebug :<br /><ul><li>Best practices Webperf
Yslow Score</li></ul>Yslow (Plugin Firebug)<br />
<ul><li>Best PraticesWebperf
PageSpeed Score / Yslow Rank</li></ul>PageSpeed /Yslow<br />
Payant.<br />Fonctionne avec IE et Firefox<br />Windows only …<br />HTTPWatch<br />
Windows only<br />Pas lié à un navigateur : capture le traffic web<br />WaterfallCharts<br />http://www.fiddler2.com/<br /...
Dynatrace Ajax<br />Windows uniquement (IE/FF)<br />Très précis pour le javascript<br />Beaucoup de possibilités<br />Vers...
Chrome Speed Tracer<br />Sur la version de dév de Chrome<br />Reflow/Repaint<br />Très précis mais complexe<br />Adapté au...
Mesurer les performances ?<br />A distance :<br />
WebPageTest.org<br /><ul><li>La référence incontestable dans le domaine.
Crée par @patmeenan (désormais chez Google)http://www.lafermeduweb.net/tutorial/web-page-test-auditez-les-performances-de-...
Graphique par connexion Http
Multi Browser :
IE (6/7/8/9) + Dynatrace, Chrome 11, Chrome Frame 11 IE 6
Génération de vidéo
Comparaison visuelle et vidéo entre plusieurs tests
Grand choix de location : Paris / Dulles / Londres / HongKong …
Scripting (navigation / clic / formulaire …)
Blocking : permet de bloquer la pub, les Js, des scripts tiers, des domaines etc …
Résultâts ultra-complets (par type de ressources, par domaine)
Screenshots des tests
Intégration pagespeed, yslow et différent conseils pour optimiser la page testée </li></li></ul><li>Comparaison Vidéo WebP...
Blaze.ioMobile<br /><ul><li>Iphone 4.3
Android 2.2, 2.3
Vidéo + Waterfall …
Accessible via l’onglet Mobile de WebPageTest
http://www.blaze.io/mobile/</li></li></ul><li>W3C Validator Mobile<br />Respect des standards<br />Priorisation des erreur...
ShowSlow<br /><ul><li>Peut être installé sur son serveur
Implémente PageSpeed / Yslow et Webpagetest
Pratique pour l’automation (Selenium IDE / Selenium RC / Firebug / Netexport …)
http://www.showslow.com</li></li></ul><li>Yottaa.com<br /><ul><li>Cloud
Prochain SlideShare
Chargement dans…5
×

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

9 268 vues

Publié le

Initiation WebPerf :

Comprendre, Analyser et Optimiser les performances Web Front-End

Publié dans : Technologie, Design
0 commentaire
11 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
9 268
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 380
Actions
Partages
0
Téléchargements
88
Commentaires
0
J’aime
11
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 />

×