Upload
akamaidevrel
View
34
Download
1
Embed Size (px)
Citation preview
Inside Akamai: Automating H2 Push
© AKAMAI - EDGE 2016
© 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”
© AKAMAI - EDGE 2016
Refresher: basic sequence of an H2 Push
Request A
PUSH_PROMISE B
Response B
Response A
? RST_STREAM
© AKAMAI - EDGE 2016
The Opportunity: Bandwidth View
TCP slow start
Opportunity
© AKAMAI - EDGE 2016
The Opportunity: Time View
OriginEdgeUser
100 ms
Opportunity
100 ms
© AKAMAI - EDGE 2016
© AKAMAI - EDGE 2016
The Opportunity: Page Load View -- Without PushHTML Request
Acks
28KB HTML
Acks
56KB HTML
Acks + requests
CSS + JS
14KB HTML HTML
HTML Request
Start Render
© 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
© AKAMAI - EDGE 2016
When good pushes go bad: Blocking
Promises Push 1 Headers HTMLPush 2
© 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
© AKAMAI - EDGE 2016
When good pushes go bad: Duplicated Downloads
https://example.com/i/hero.jpg?cb=123454321https://example.com/i/hero.jpg?cb=123456789
https://example.com/i/library_v2.0.jshttps://example.com/i/library_v2.1.js
Vary: Cookie
Beware cache busting!
Beware lifecycle changes!
Beware incorrect pushes!
© 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
© AKAMAI - EDGE 2016
Push to fill the pipePush while waiting
Push the right stuffPush in the right order
Push enough, but not too much
© AKAMAI - EDGE 2016
© AKAMAI - EDGE 2016
Adaptive Acceleration
AnalyzeOptimize
Measure
Manual
Push and Preconnect
Automatic
Intelligent Performance Optimizations thatImprove Web Experiences based onActual User Behavior
© 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
© 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 TimingData
© AKAMAI - EDGE 2016
What can be learned from RUM Resource Timing Data?
© AKAMAI - EDGE 2016
How A2 prevents: Blocking
Promises Push 1 Headers HTMLPush 2
MAX (kb) Priority
© 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 pushing3. Prioritize css and fonts
© AKAMAI - EDGE 2016
How A2 prevents: Duplicated Downloads
https://example.com/i/hero.jpg?cb=123454321https://example.com/i/hero.jpg?cb=123456789
https://example.com/i/library_v2.0.jshttps://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
© 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)
© 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!!
© AKAMAI - EDGE 2016
Call To Action
1. Adopt H22. Turn on Akamai RUM3. Be cacheable4. Review your domain sharding and certificate usage5. Enable Adaptive Acceleration in Ion Beta Channel
© 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+Architecturehttp://bos-lp4qc.kendall.corp.akamai.com/push/https://blog.yoav.ws/being_pushy/https://github.com/asilvas/http2-push-assets-demohttps://h2o.examp1e.net/configure/http2_directives.html#http2-casperhttps://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edithttps://daveyshafik.com/archives/69603-http2-server-push-youre-doing-it-all-wrong.htmlhttps://http2.github.io/http2-spec/#PushResourceshttps://tools.ietf.org/html/draft-kazuho-h2-cache-digest-00https://www.facebook.com/atscaleevents/videos/vb.1576488989290866/1775942979345465/?type=2&theaterhttp://blog.kazuhooku.com/2015/10/performance-of-http2-push-and-server.html