Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)

Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)

You know that it's your responsibility as a front end developer to make sure that you monitor your sites performance? Well now you can do it really easy using Dockerized version of sitespeed.io, Grafana and Graphite.

Thank you Fastly for hosting the event!

Dfb236c2d968fbbf6fa4dd7d0541b6b6?s=128

Peter Hedenskog

August 27, 2015
Tweet

Transcript

  1. Peter Hedenskog Monitoring web performance using Open Source tools

  2. None
  3. Peter Hedenskog @soulislove peter@soulgalore.com

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. Lets talk performance

  11. 80-90% of the end-user response time is spent on the

    front end.
  12. Front end developers?

  13. front end dev

  14. front end dev

  15. front end dev

  16. front end dev

  17. front end dev

  18. With great power …

  19. comes great responsibility!

  20. Monitor performance

  21. None
  22. None
  23. None
  24. Monitoring tool

  25. The toolbox

  26. None
  27. • NodeJS • best practice rules • Navigation Timing/User Timing

    • Page metrics
  28. • CLI/https://run.sitespeed.io • Grunt/Gulp • Jenkins • Docker

  29. Rules using YSlow Selenium HAR Browsertime Firefox Chrome Safari Internet

    Explorer WebPageTest GPSI WPT NodeJS API PhantomJS/SlimerJS gpagespeed BrowserMobProxy JSON http://www.example.com JSON HTML Graphite http://www.example.com http://www.example.com http://www.example.com post tasks whatever output you want
  30. this.is.my.metric 12 timestamp Graphite

  31. Grafana

  32. None
  33. xvfb

  34. None
  35. None
  36. None
  37. We take from the rich and give to the poor

  38. Installation

  39. None
  40. None
  41. None
  42. None
  43. clear

  44. None
  45. None
  46. None
  47. None
  48. What should we monitor?

  49. “I like thinking big.” Donald Trump

  50. “Think small” Peter Hedenskog

  51. § 3rd party script

  52. “Infrastructure and code managed by someone else” Guy Podjarny (Akamai)

    Velocity 2014
  53. None
  54. None
  55. None
  56. None
  57. http://dashboard.sitespeed.io/dashboard/db/3rd-party-america-airlines

  58. Competition

  59. http://dashboard.sitespeed.io/dashboard/db/compare-multiple-sites

  60. One page

  61. http://dashboard.sitespeed.io/dashboard/db/metrics-for-one-page-american-airlines-home-page

  62. Summary of a site

  63. http://dashboard.sitespeed.io/dashboard/db/summary-of-a-site-america-airlines

  64. Custom Metrics

  65. http://dashboard.sitespeed.io/dashboard/db/user-timing-and-custom-metrics

  66. WebPageTest

  67. http://dashboard.sitespeed.io/dashboard/db/using-webpagetest

  68. http://dashboard.sitespeed.io/dashboard/db/using-webpagetest

  69. It’s up to you!

  70. http://dashboard.sitespeed.io/dashboard/db/google-analytics

  71. Summary

  72. front end dev

  73. responsible

  74. None
  75. s Your monitoring tool

  76. dashboard.sitespeed.io

  77. Thank you! @soulislove peter@soulgalore.com