$30 off During Our Annual Pro Sale. View Details »

Serverless Speedtracking

Serverless Speedtracking

JAMstack London meetup, Feb 5th 2019.

Eduardo Bouças

February 05, 2019
Tweet

More Decks by Eduardo Bouças

Other Decks in Technology

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