Serverless Speedtracking

JAMstack London meetup, Feb 5th 2019.

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
10. ▪ Information must be easy to consume ▪ Continuous monitoring vs. snapshots Dev tools are for devs 10
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
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