Monitoring Web Performance using Open Source tools (Stockholm)

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.

Dfb236c2d968fbbf6fa4dd7d0541b6b6?s=128

Peter Hedenskog

November 05, 2015
Tweet

Transcript

  1. Peter Hedenskog Monitoring web performance using Open Source tools

  2. Peter Hedenskog @soulislove peter@soulgalore.com

  3. None
  4. None
  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

  28. None
  29. None
  30. None
  31. Monitoring tool

  32. The toolbox

  33. None
  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

  38. None
  39. xvfb

  40. None
  41. None
  42. None
  43. We take from the rich and give to the poor

  44. Installation

  45. None
  46. None
  47. None
  48. None
  49. clear

  50. None
  51. None
  52. None
  53. None
  54. None
  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
  60. None
  61. None
  62. None
  63. None
  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

  82. None
  83. s Your monitoring tool

  84. 1.0 - Hello world 2.0 - The logo 3.0 -

    Most downloaded 2015 4.0 - Number one
  85. None
  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