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!

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. • 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
33. xvfb
37. We take from the rich and give to the poor
38. Installation
43. clear
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
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
75. s Your monitoring tool
76. dashboard.sitespeed.io
77. Thank you! @soulislove peter@soulgalore.com