Dynamic Generation
Feb. 4, 2019•0 likes•646 views
Download to read offline
Report
Technology
Sergey Chernyshev is going to talk about the reasons why we prefer generation+deployment workflow to calculating output in real time as users request information. We will review the difference between generation and caches and why the former is more preferred strategy while latter is often misleading with it’s declared ease of implementation. And in the end we will look at the range of currently available solutions, from static generation to API-driven applications within JAMstack and introduce a new concept of “Dynamic Generators” and discuss how one can build a system that combines benefits of “generation” workflow and “dynamic” data to help expand fast User Experiences all the way across the full range of web application.
SergeyChernyshevFollow
Recommended
Capturing speed of user experience using user timing apiSergeyChernyshev
Managing application performance by Kwame ThomisonSergeyChernyshev
Fastest request is never madeSergeyChernyshev
Designing speed with progressive enhancementSergeyChernyshev
Web performance tools @ WebPerf.camp 2016SergeyChernyshev
Extending your applications to the edge with CDNsSergeyChernyshev
More Related Content
More from SergeyChernyshev
What we can learn from CDNs about Web Development, Deployment, and PerformanceSergeyChernyshev
Scalability vs. PerformanceSergeyChernyshev
Web performance: beyond load testingSergeyChernyshev
Introduction to web performance @ IEEESergeyChernyshev
Introduction to Web PerformanceSergeyChernyshev
Performance anti patterns in ajax applicationsSergeyChernyshev
Recently uploaded
Accelerating Data Science through Feature Platform, Transformers, and GenAIFeatureByte
Scaling out with WordPressKonstantin Kovshenin
Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...DianaGray10
Privacy in the era of quantum computersSpeck&Tech
Google cloud Study Jam 2023.pptxGDSCNiT
Product Listing Presentation_Cathy.pptxCatarinaTorrenuevaMa
Dynamic Generation
- 1. Dynamic Generation January 24, 2019 @ JAMstack NYC Meetup Sergey Chernyshev
- 2. Sergey Chernyshev Principal Engineer @ Meetup January 24, 2019 @ JAMstack NYC Meetup • Care about UX speed • Organize NY Web Performance Meetup Group • Work on Web Platform team @ Meetup
- 3. • No PHP/Python/Ruby/ Java/ASP.Net/Node runtime! • No servers! • No databases! • Faster for users! Why Do We Generate?
- 4. Server-side Rendering Speed
- 5. Server-side Rendering Speed
- 6. Server-Side Rendered HTML • 1240ms @ Average • 3910ms @ 95%ile Static Resources • 483ms @ Average • 629ms @ 95%ile Generation is Faster • Bottleneck for the whole page • Much faster on average • Significantly less variable
- 7. • Carousell: -65% page load => +63% SEO, 3x ad clicks (2019) • Pinterest: -40% wait time => +15% SEO, +15% conversion (2017) • DoubleClick: 5s vs 19s on mobile => 2x ad revenue (2016) • Trainline: -300ms latency => +$11.5M / year revenue (2016) • Etsy: +160Kb => +12% bounce rate (2014) • Mozilla: -2.2s => +15.4% Downloads (2010) • Google: +400ms => -0.21% searches after experiment! (2009) • Netflix: +GZip => -43% Traffic cost (2008) • Amazon: +100ms => -1% revenue (2008) • Google: +500ms => -25% searches (2006) Stats @ WPOstats.com
- 8. Edge Cache vs. Generation
- 9. HTML Edge Cache
- 10. HTML Generation Workflow
- 11. • Renders on Read • Time To Live (TTL) • Stale for TTL/2 time • Cache hit ratio < 100% • Needs origin for misses • Renders on Write • Infinite TTL • Stale until updated • 100% offload Cache Generation
- 12. HTML Edge Cache without Invalidation
- 13. HTML Edge Cache with Invalidation
- 14. • API call • stale-while-revalidate • Surrogate keys for dependency tracking • Cache evictions • Shared CDN nodes • Long tail content • Deployment is invalidation • Serve stale while building • Incremental builds need dependency tracking • Storage & CPU cost $ • Each view is stored • Generates on write Invalidation ~ Generation
- 15. Static Generators with data in git Static with In-browser API calls Static Generators with API calls during build “Dynamic” Generators
- 16. Dynamic Generators
- 17. HTML Generation Workflow
- 18. Incremental Generation Workflow
- 19. • Maps changes to file names and edge cache keys • Sets renderer variables • auth / role • segmentation • language • Triggers incremental builds Dependency Manager
- 20. Dynamic Generation
- 21. Dynamic Generation Today
- 22. Dynamic Generation using GraphQL Subscriptions
- 23. • Know your real freshness / staleness requirements • Learn your existing data update cycle • Map data changes to outputs, list variations • Identify personalized vs. segmented content • Build your Dynamic Generator • Make your users happy! To Do
- 24. Thank You! Twitter: @sergeyche Sergey.Chernyshev@gmail.com SergeyChernyshev.com