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

Serverless Speedtracking

Serverless Speedtracking

JAMstack London meetup, Feb 5th 2019.

Avatar for Eduardo Bouças

Eduardo Bouças

February 05, 2019
Tweet

More Decks by Eduardo Bouças

Other Decks in Technology

Transcript

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

    Created Staticman, SpeedTracker and others @eduardoboucas FAR TOO MANY
  2. 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)
  3. 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?»
  4. 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
  5. Requirements 14 ▪ Test platform: public instance of WebPageTest ▪

    Data store: GitHub repository ▪ Hosting service: GitHub Pages ▪ Dashboard: Jekyll + React ▪ Continuous integration: GitHub Pages + Jekyll
  6. Architecture 15 SpeedTracker API Jekyll + React dashboard GitHub Repo

    WebPageTest API Request test Request Results Update store Update dashboard
  7. ▪ Decommission API in favour of decentralised setup ▪ Use

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

    API Request test Netlify Site Function: Process test Function: Request test Database Results Request
  9. 1. Request WebPageTest API key 2. Create a database 3.

    Click “Deploy to Netlify” 4. Start a test https://github.com/speedtracker/speedtracker-netlify
  10. ▪ More database engines ▪ Integrations with Netlify builds ▪

    Custom metrics ▪ … you tell me! What’s next? 22