Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

  2. 2 Hi, JAMstackers! I’m Eduardo Bouças. Software Engineer JAMstack fanboy

    Created Staticman, SpeedTracker and others @eduardoboucas FAR TOO MANY
  3. Goals for tonight 3 1. Introducing SpeedTracker 2. Pushing the

    boundaries of JAMstack
  4. SpeedTracker 1.

  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)
  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?»
  7. To create a culture of performance, you must make it

    everyone’s problem. 7
  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
  9. None
  10. ▪ Information must be easy to consume ▪ Continuous monitoring

    vs. snapshots Dev tools are for devs 10
  11. None
  12. None
  13. FREE

  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
  15. Architecture 15 SpeedTracker API Jekyll + React dashboard GitHub Repo

    WebPageTest API Request test Request Results Update store Update dashboard
  16. None
  17. None
  18. Serverless JAM 2. Pushing the boundaries of JAMstack

  19. ▪ Decommission API in favour of decentralised setup ▪ Use

    Netlify Functions ▪ Bring your own database Let’s rebuild 19
  20. Repo 20 HTML + React dashboard Function: Get results WebPageTest

    API Request test Netlify Site Function: Process test Function: Request test Database Results Request
  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
  22. ▪ More database engines ▪ Integrations with Netlify builds ▪

    Custom metrics ▪ … you tell me! What’s next? 22
  23. Thank you! 23 @eduardoboucas speedtracker.org