Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)

Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)

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 Shape Security for hosting the event!

Dfb236c2d968fbbf6fa4dd7d0541b6b6?s=128

Peter Hedenskog

August 26, 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. 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
  28. this.is.my.metric 12 timestamp Graphite

  29. Grafana

  30. None
  31. xvfb

  32. None
  33. None
  34. None
  35. We take from the rich and give to the poor

  36. Installation

  37. None
  38. None
  39. None
  40. None
  41. clear

  42. None
  43. None
  44. None
  45. None
  46. What should we monitor?

  47. “I like thinking big.” Donald Trump

  48. “Think small” Peter Hedenskog

  49. § 3rd party script

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

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

  56. Competition

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

  58. One page

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

  60. Summary of a site

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

  62. Custom Metrics

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

  64. WebPageTest

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

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

  67. It’s up to you!

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

  69. Summary

  70. front end dev

  71. responsible

  72. None
  73. s Your monitoring tool

  74. dashboard.sitespeed.io

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