Serverless Speedtracking

JAMstack London meetup, Feb 5th 2019.

Transcript

1. Serverless
   Speedtracking JAMstack meetup
   London, February 2019
   

   View Slide

2. 2
   Hi, JAMstackers!
   I’m Eduardo Bouças.
   Software Engineer
   JAMstack fanboy
   Created Staticman, SpeedTracker and others
   @eduardoboucas
   FAR TOO MANY
   

   View Slide

3. Goals for tonight
   3
   1. Introducing SpeedTracker
   2. Pushing the boundaries of JAMstack
   

   View Slide

4. SpeedTracker
   1.
   

   View Slide

5. Time (really) is money
   5
   ▪ BBC: 10% of users lost for every additional second in
   load time
   ▪ Google: 53% of mobile visits abandoned after 3 seconds
   ▪ AliExpress: 36% reduction in load time increased orders
   by 10.5% and conversion by 27%
   (Links and several other reports at wpostats.com)
   

   View Slide

6. How to fix?
   6
   ▪ Performance-oriented techniques (e.g. server-side
   rendering, lazy loading) are not magic bullets
   ▪ Implications on performance must be considered at
   planning stages, not as an afterthought
   ▪ Introduce performance budgets
   □ «Can we afford this feature?»
   

   View Slide

7. To create a culture of
   performance, you must
   make it everyone’s
   problem.
   7
   

   View Slide

8. Increase visibility
   1. Browser developer tools
   □ Network view, Lighthouse
   2. WebPageTest (Web, API, CLI)
   □ Real devices
   □ Multiple locations around the globe
   □ Different network conditions
   8
   

   View Slide

9. View Slide

10. ▪ Information must be easy to consume
    ▪ Continuous monitoring vs. snapshots
    Dev tools are for devs
    10
    

    View Slide

11. View Slide

12. View Slide

13. FREE
    

    View Slide

14. Requirements
    14
    ▪ Test platform: public instance of WebPageTest
    ▪ Data store: GitHub repository
    ▪ Hosting service: GitHub Pages
    ▪ Dashboard: Jekyll + React
    ▪ Continuous integration: GitHub Pages + Jekyll
    

    View Slide

15. Architecture
    15
    SpeedTracker
    API
    Jekyll + React
    dashboard
    GitHub Repo
    WebPageTest
    API
    Request
    test
    Request
    Results
    Update store
    Update dashboard
    

    View Slide

16. View Slide

17. View Slide

18. Serverless JAM
    2.
    Pushing the boundaries of JAMstack
    

    View Slide

19. ▪ Decommission API in favour of decentralised setup
    ▪ Use Netlify Functions
    ▪ Bring your own database
    Let’s rebuild
    19
    

    View Slide

20. Repo
    20
    HTML + React
    dashboard
    Function:
    Get results
    WebPageTest
    API
    Request
    test
    Netlify Site
    Function:
    Process test
    Function:
    Request test
    Database
    Results
    Request
    

    View Slide

21. 1. Request WebPageTest API
    key
    2. Create a database
    3. Click “Deploy to Netlify”
    4. Start a test
    https://github.com/speedtracker/speedtracker-netlify
    

    View Slide

22. ▪ More database engines
    ▪ Integrations with Netlify builds
    ▪ Custom metrics
    ▪ … you tell me!
    What’s next?
    22
    

    View Slide

23. Thank you!
    23
    @eduardoboucas
    speedtracker.org
    

    View Slide