edge 2016 automating h2 push

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