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
   

   View Slide

2. Place your screenshot here
   Who I am
   ● Engineer at DADI
   ● Open web fanboy
   ● OSS advocate
   ● Web performance specialist
   

   View Slide

3. How to address web performance
   issues within an organisation?
   

   View Slide

4. Awareness
   Visibility
   

   View Slide

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/
   

   View Slide

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/
   

   View Slide

7. Poor performance costs money.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Awareness
    Visibility
    

    View Slide

11. Make performance issues visible
    to the entire organisation so they
    become everyone’s problem.
    

    View Slide

12. Continuous monitoring
    https://calibreapp.com/ https://speedcurve.com/
    

    View Slide

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
    

    View Slide

14. https://speedtracker.org
    

    View Slide

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
    

    View Slide

16. The architecture
    API
    Jekyll + React
    app
    GitHub Repo WebPageTest
    Request
    test
    Request
    Results
    Update store
    Update dashboard
    

    View Slide

17. Demo
    

    View Slide

18. Get involved
    ● Integrate GitHub commits/deployments
    ● More metrics
    ○ Google PageSpeed
    ○ https://whatdoesmysitecost.com/
    ● Easier/automated setup process
    ● Better error reporting
    

    View Slide

19. Thank you
    @speed_tracker
    github.com/speedtracker
    

    View Slide