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!

Transcript

1. Peter Hedenskog Monitoring web performance using Open Source tools
3. Peter Hedenskog @soulislove peter@soulgalore.com
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
24. Monitoring tool
25. The toolbox
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
31. xvfb
35. We take from the rich and give to the poor
36. Installation
41. clear
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
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
73. s Your monitoring tool
74. dashboard.sitespeed.io
75. Thank you! @soulislove peter@soulgalore.com