Edge 2016 automating h2 push
- 1. Inside Akamai: Automating H2 Push
- 2. © AKAMAI - EDGE 2016
- 3. © AKAMAI - EDGE 2016 About this new H2 Push thing… does it make pages faster? “Saves only 1 RTT” “HTTP2 push will only have marginal effect on web performance” “15% faster TTFB”
- 4. © AKAMAI - EDGE 2016 Refresher: basic sequence of an H2 Push Request A PUSH_PROMISE B Response B Response A ? RST_STREAM
- 5. © AKAMAI - EDGE 2016 The Opportunity: Bandwidth View TCP slow start Opportunity
- 6. © AKAMAI - EDGE 2016 The Opportunity: Time View OriginEdgeUser 100 ms Opportunity 100 ms
- 7. © AKAMAI - EDGE 2016
- 8. © AKAMAI - EDGE 2016 The Opportunity: Page Load View -- Without Push HTML Request Acks 28KB HTML Acks 56KB HTML Acks + requests CSS + JS 14KB HTML HTML HTML Request Start Render
- 9. © AKAMAI - EDGE 2016 The Opportunity: Page Load View -- With Push HTML HTML RequestHTML Request Acks 28KB CSS+JS Acks 56KB CSS+JS Acks HTML 14KB CSS+JS Start Render
- 10. © AKAMAI - EDGE 2016 When good pushes go bad: Blocking Promises Push 1 Headers HTMLPush 2
- 11. © AKAMAI - EDGE 2016 When good pushes go bad: Bad Ordering a.html b.css c.js c.css d.js e.jpg f.jpg h.jpg i.js j.js k.html l.css m.jpg n.js Document Complete Beware simple heuristics! Push this js But not this js
- 12. © AKAMAI - EDGE 2016 When good pushes go bad: Duplicated Downloads https://example.com/i/hero.jpg?cb=123454321 https://example.com/i/hero.jpg?cb=123456789 https://example.com/i/library_v2.0.js https://example.com/i/library_v2.1.js Vary: Cookie Beware cache busting! Beware lifecycle changes! Beware incorrect pushes!
- 13. © AKAMAI - EDGE 2016 When good pushes go bad: Pushing stuff already in browser cache Request A PUSH_PROMISE x.js Response x.js ? RST_STREAM Cache: x.js
- 14. © AKAMAI - EDGE 2016 Push to fill the pipe Push while waiting Push the right stuff Push in the right order Push enough, but not too much
- 15. © AKAMAI - EDGE 2016
- 16. © AKAMAI - EDGE 2016 Adaptive Acceleration AnalyzeOptimize Measure Manual Push and Preconnect Automatic Intelligent Performance Optimizations that Improve Web Experiences based on Actual User Behavior
- 17. © AKAMAI - EDGE 2016 https://www….. -https://www….. -https://www….. https://www….. -https://www….. HTML Request HTML Push 1 Push 2 Manual Push and Preconnect HTML Request HTML
- 18. © AKAMAI - EDGE 2016 https://www….. -https://www….. -https://www….. https://www….. -https://www….. HTML Request HTML Push 1 Push 2 Adaptive Acceleration HTML Request HTML RUM Resource Timing Data
- 19. © AKAMAI - EDGE 2016 What can be learned from RUM Resource Timing Data?
- 20. © AKAMAI - EDGE 2016 How A2 prevents: Blocking Promises Push 1 Headers HTMLPush 2 MAX (kb) Priority
- 21. © AKAMAI - EDGE 2016 How A2 prevents: Bad Ordering a.html b.css c.js c.css d.js e.jpg f.jpg h.jpg i.js j.js k.html l.css m.jpg n.js Document Complete 1. Learn page dependency graph from multiple samples 2. Respect page ordering when pushing 3. Prioritize css and fonts
- 22. © AKAMAI - EDGE 2016 How A2 prevents: Duplicated Downloads https://example.com/i/hero.jpg?cb=123454321 https://example.com/i/hero.jpg?cb=123456789 https://example.com/i/library_v2.0.js https://example.com/i/library_v2.1.js Vary: Cookie Detect and omit varying resources Reanalyze regularly to pick up site changes Omit resources not cachable at Edge
- 23. © AKAMAI - EDGE 2016 How A2 prevents: Pushing stuff already in browser cache Request A PUSH_PROMISE x.js Response x.js RST_STREAM Cache: x.js CACHE_DIGEST P(cached)
- 24. © AKAMAI - EDGE 2016 What else do you need to know about Adaptive Acceleration? it does Preconnects too!! Its JuST Keeps GeTTing Smarter!! Much More to Come!!
- 25. © AKAMAI - EDGE 2016 Call To Action 1. Adopt H2 2. Turn on Akamai RUM 3. Be cacheable 4. Review your domain sharding and certificate usage 5. Enable Adaptive Acceleration in Ion Beta Channel
- 26. © AKAMAI - EDGE 2016 References https://developer.apple.com/videos/play/wwdc2016/711/ https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/ https://gsd.akamai.com/wiki/display/RUA/System+Architecture http://bos-lp4qc.kendall.corp.akamai.com/push/ https://blog.yoav.ws/being_pushy/ https://github.com/asilvas/http2-push-assets-demo https://h2o.examp1e.net/configure/http2_directives.html#http2-casper https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit https://daveyshafik.com/archives/69603-http2-server-push-youre-doing-it-all-wrong.html https://http2.github.io/http2-spec/#PushResources https://tools.ietf.org/html/draft-kazuho-h2-cache-digest-00 https://www.facebook.com/atscaleevents/videos/vb.1576488989290866/1775942979345465/?type=2&theater http://blog.kazuhooku.com/2015/10/performance-of-http2-push-and-server.html