Introducing SpeedTracker

Talk from London Web Performance, 7th February 2017.

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

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