Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing SpeedTracker

Introducing SpeedTracker

Talk from London Web Performance, 7th February 2017.


Eduardo Bouças

February 07, 2017

More Decks by Eduardo Bouças

Other Decks in Technology


  1. Eduardo Bouças Introducing SpeedTracker London Web Performance, 7 February 2017

  2. Place your screenshot here Who I am • Engineer at

    DADI • Open web fanboy • OSS advocate • Web performance specialist
  3. How to address web performance issues within an organisation?

  4. Awareness Visibility

  5. #perfmatters “53% of visits to mobile sites are abandoned after

    3 seconds according to research from Google's DoubleClick.” https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  6. #perfmatters “Financial Times added a one second delay to every

    page view and saw a 4.9% drop in the number of articles users read over a 7 day window.” http://engineroom.ft.com/2016/04/04/a-faster-ft-com/
  7. Poor performance costs money.

  8. WebPageTest FTW • Test a page from multiple locations, devices

    and network types • Web-based UI • RESTful API • Free, public instance • Or host it yourself
  9. But... • Data depicts isolated point in time ◦ Continuous

    effort VS. fixing isolated problems • Complex reporting for non-tech people ◦ When and who runs the tests? ◦ What to do with results? • Results visible only to the person requesting the test
  10. Awareness Visibility

  11. Make performance issues visible to the entire organisation so they

    become everyone’s problem.
  12. Continuous monitoring https://calibreapp.com/ https://speedcurve.com/

  13. Open-source alternative • Built on top of WebPageTest • Continuous

    monitoring of any WPT metric • Easy to digest dashboards • Performance budgets ◦ Email and Slack notifications • Minimal infrastructure costs
  14. https://speedtracker.org

  15. The architecture • API layer using public WPT instance ◦

    Bring your own API keys ◦ Or use your own private instance • GitHub repository as data store • Jekyll + React to build dashboard • GitHub Pages as a web server ◦ HTTPS for free
  16. The architecture API Jekyll + React app GitHub Repo WebPageTest

    Request test Request Results Update store Update dashboard
  17. Demo

  18. Get involved • Integrate GitHub commits/deployments • More metrics ◦

    Google PageSpeed ◦ https://whatdoesmysitecost.com/ • Easier/automated setup process • Better error reporting
  19. Thank you @speed_tracker github.com/speedtracker