HTTP/2 Push is a shiny new tool in the toolbox of web acceleration techniques. With any new tool, it's always a good idea to read the manual first to avoid losing a finger. This talk digs into how Akamai is automating the challenges of H2Push to do the job right.

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