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. 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