Monitoring Web Performance using Open Source tools (Stockholm)

You want to stay on top of the game of web performance? Then checkout sitespeed.io, webpagetest, Grafana and Graphite.

Transcript

1. Peter Hedenskog Monitoring web performance using Open Source tools
2. Peter Hedenskog @soulislove peter@soulgalore.com
5. • Open source vs Proprietary • Why? • Open Source Toolbox • Demo: dashboard + Wikimedia Monitoring performance
6. Open Source vs. Proprietary Software
7. Catchpoint Keynote by Dynatrace SpeedCurve Proprietary
8. @soulislove Proprietary
9. @soulislove Proprietary
10. @soulislove Proprietary
11. Open Source
12. WebPageTest sitespeed.io Grafana Graphite/InfluxDB Open Source
13. Open Source
14. Open Source
15. Open Source
16. Open Source
17. Lets talk performance
18. 80-90% of the end-user response time is spent on the front end.
19. Front end developers?
20. front end dev
21. front end dev
22. front end dev
23. front end dev
24. front end dev
25. With great power …
26. comes great responsibility!
27. Monitor performance
31. Monitoring tool
32. The toolbox
34. 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
35. • sitespeed.io > 37k Docker pulls • graphite > 14k Docker pulls • npm: > 134k downloads 2015
36. this.is.my.metric 12 timestamp Graphite
37. Grafana
39. xvfb
43. We take from the rich and give to the poor
44. Installation
49. clear
55. What should we monitor?
56. “I like thinking big.” Donald Trump
57. “Think small” Peter Hedenskog
58. § 3rd party script
59. “Infrastructure and code managed by someone else” Guy Podjarny (Akamai) Velocity 2014
64. http://dashboard.sitespeed.io/dashboard/db/3rd-party-america-airlines
65. Competition
66. http://dashboard.sitespeed.io/dashboard/db/compare-multiple-sites
67. One page
68. http://dashboard.sitespeed.io/dashboard/db/metrics-for-one-page-american-airlines-home-page
69. Summary of a site
70. http://dashboard.sitespeed.io/dashboard/db/summary-of-a-site-america-airlines
71. Custom Metrics
72. http://dashboard.sitespeed.io/dashboard/db/user-timing-and-custom-metrics
73. WebPageTest
74. http://dashboard.sitespeed.io/dashboard/db/using-webpagetest
75. http://dashboard.sitespeed.io/dashboard/db/using-webpagetest
76. https://grafana.wikimedia.org/dashboard/db/WebPageTest
77. It’s up to you!
78. http://dashboard.sitespeed.io/dashboard/db/google-analytics
79. Summary
80. front end dev
81. responsible
83. s Your monitoring tool
84. 1.0 - Hello world 2.0 - The logo 3.0 - Most downloaded 2015 4.0 - Number one
86. • http://dashboard.sitespeed.io/ • https://www.sitespeed.io/documentation/ performance-dashboard/ • https://grafana.wikimedia.org/dashboard/db/ WebPageTest • https://wikitech.wikimedia.org/wiki/WebPageTest Monitoring performance
87. Thank you! @soulislove peter@soulgalore.com