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

Introducing SpeedTracker

Introducing SpeedTracker

Talk from London Web Performance, 7th February 2017.

https://speedtracker.org
https://github.com/speedtracker

Eduardo Bouças

February 07, 2017
Tweet

More Decks by Eduardo Bouças

Other Decks in Technology

Transcript

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

    @eduardoboucas
  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