edge 2016 automating h2 push

26
Inside Akamai: Automating H2 Push

Upload: akamaidevrel

Post on 08-Jan-2017

34 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Edge 2016 automating h2 push

Inside Akamai: Automating H2 Push

Page 2: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Page 3: Edge 2016 automating h2 push

© 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”

Page 4: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Refresher: basic sequence of an H2 Push

Request A

PUSH_PROMISE B

Response B

Response A

? RST_STREAM

Page 5: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

The Opportunity: Bandwidth View

TCP slow start

Opportunity

Page 6: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

The Opportunity: Time View

OriginEdgeUser

100 ms

Opportunity

100 ms

Page 7: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Page 8: Edge 2016 automating h2 push

© 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

Page 9: Edge 2016 automating h2 push

© 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

Page 10: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

When good pushes go bad: Blocking

Promises Push 1 Headers HTMLPush 2

Page 11: Edge 2016 automating h2 push

© 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

Page 12: Edge 2016 automating h2 push

© 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!

Page 13: Edge 2016 automating h2 push

© 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

Page 14: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Push to fill the pipePush while waiting

Push the right stuffPush in the right order

Push enough, but not too much

Page 15: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Page 16: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

Adaptive Acceleration

AnalyzeOptimize

Measure

Manual

Push and Preconnect

Automatic

Intelligent Performance Optimizations thatImprove Web Experiences based onActual User Behavior

Page 17: Edge 2016 automating h2 push

© 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

Page 18: Edge 2016 automating h2 push

© 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

Page 19: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

What can be learned from RUM Resource Timing Data?

Page 20: Edge 2016 automating h2 push

© AKAMAI - EDGE 2016

How A2 prevents: Blocking

Promises Push 1 Headers HTMLPush 2

MAX (kb) Priority

Page 21: Edge 2016 automating h2 push

© 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

Page 22: Edge 2016 automating h2 push

© 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

Page 23: Edge 2016 automating h2 push

© 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)

Page 24: Edge 2016 automating h2 push

© 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!!

Page 25: Edge 2016 automating h2 push

© 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

Page 26: Edge 2016 automating h2 push

© 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