Slide 1
Slide 1 text
Eduardo Bouças
Introducing SpeedTracker
London Web Performance, 7 February 2017
@eduardoboucas
Slide 2
Slide 2 text
Place your screenshot here
Who I am
● Engineer at DADI
● Open web fanboy
● OSS advocate
● Web performance specialist
Slide 3
Slide 3 text
How to address web performance
issues within an organisation?
Slide 4
Slide 4 text
Awareness
Visibility
Slide 5
Slide 5 text
#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/
Slide 6
Slide 6 text
#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/
Slide 7
Slide 7 text
Poor performance costs money.
Slide 8
Slide 8 text
WebPageTest FTW
● Test a page from multiple locations, devices and
network types
● Web-based UI
● RESTful API
● Free, public instance
● Or host it yourself
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Awareness
Visibility
Slide 11
Slide 11 text
Make performance issues visible
to the entire organisation so they
become everyone’s problem.
Slide 12
Slide 12 text
Continuous monitoring
https://calibreapp.com/ https://speedcurve.com/
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
https://speedtracker.org
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
The architecture
API
Jekyll + React
app
GitHub Repo WebPageTest
Request
test
Request
Results
Update store
Update dashboard
Slide 17
Slide 17 text
Demo
Slide 18
Slide 18 text
Get involved
● Integrate GitHub commits/deployments
● More metrics
○ Google PageSpeed
○ https://whatdoesmysitecost.com/
● Easier/automated setup process
● Better error reporting
Slide 19
Slide 19 text
Thank you
@speed_tracker
github.com/speedtracker