Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Dynamic Generation January 24, 2019 @ JAMstack NYC Meetup Sergey Chernyshev
Sergey Chernyshev Principal Engineer @ Meetup January 24, 2019 @ JAMstack NYC Meetup • Care about
 UX speed • Organize
 NY...
• No PHP/Python/Ruby/ Java/ASP.Net/Node runtime! • No servers! • No databases! • Faster for users! Why Do We Generate?
Server-side Rendering Speed
Server-side Rendering Speed
Server-Side Rendered HTML • 1240ms @ Average • 3910ms @ 95%ile Static Resources • 483ms @ Average • 629ms @ 95%ile Generat...
• Carousell: -65% page load => +63% SEO, 3x ad clicks (2019) • Pinterest: -40% wait time => +15% SEO, +15% conversion (201...
Edge Cache vs. Generation
HTML Edge Cache
HTML Generation Workflow
• Renders on Read • Time To Live (TTL) • Stale for TTL/2 time • Cache hit ratio < 100% • Needs origin for misses • Renders...
HTML Edge Cache without Invalidation
HTML Edge Cache with Invalidation
• API call • stale-while-revalidate • Surrogate keys for dependency tracking • Cache evictions • Shared CDN nodes • Long t...
Static Generators
 with data in git Static with
 In-browser
 API calls Static Generators with API calls during build “Dyna...
Dynamic Generators
HTML Generation Workflow
Incremental Generation Workflow
• Maps changes to file names and edge cache keys • Sets renderer variables • auth / role • segmentation • language • Trigge...
Dynamic Generation
Dynamic Generation Today
Dynamic Generation using GraphQL Subscriptions
• Know your real freshness / staleness requirements • Learn your existing data update cycle • Map data changes to outputs,...
Thank You! Twitter: @sergeyche Sergey.Chernyshev@gmail.com SergeyChernyshev.com
Nächste SlideShare
Wird geladen in …5
×

Dynamic Generation

156 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
no profile picture user

  • Als Erste(r) kommentieren

Dynamic Generation

  1. 1. Dynamic Generation January 24, 2019 @ JAMstack NYC Meetup Sergey Chernyshev
  2. 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. 3. • No PHP/Python/Ruby/ Java/ASP.Net/Node runtime! • No servers! • No databases! • Faster for users! Why Do We Generate?
  4. 4. Server-side Rendering Speed
  5. 5. Server-side Rendering Speed
  6. 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. 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. 8. Edge Cache vs. Generation
  9. 9. HTML Edge Cache
  10. 10. HTML Generation Workflow
  11. 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. 12. HTML Edge Cache without Invalidation
  13. 13. HTML Edge Cache with Invalidation
  14. 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. 15. Static Generators
 with data in git Static with
 In-browser
 API calls Static Generators with API calls during build “Dynamic” Generators
  16. 16. Dynamic Generators
  17. 17. HTML Generation Workflow
  18. 18. Incremental Generation Workflow
  19. 19. • Maps changes to file names and edge cache keys • Sets renderer variables • auth / role • segmentation • language • Triggers incremental builds Dependency Manager
  20. 20. Dynamic Generation
  21. 21. Dynamic Generation Today
  22. 22. Dynamic Generation using GraphQL Subscriptions
  23. 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. 24. Thank You! Twitter: @sergeyche Sergey.Chernyshev@gmail.com SergeyChernyshev.com

×