Promise of Push

HTTP/2 Push is the next frontier of web performance. Colin Bendell explores Push's possibilities and pitfalls as well as new metrics to measure the Push opportunity. Colin discusses when and how to use Push, testing, and several advanced techniques, reviews real-world experimentation, and shares recommendations on how to prepare for the future with Push support.

Transcript

1. ©2016 AKAMAI | FASTER FORWARD™ HTTP/2 Web Performance Promise of Push @ColinBendell Director, CTO Office
2. ©2016 AKAMAI | FASTER FORWARD™ Hi. I’m Colin • Dad, • Coder, • Runner, • (part crazy)
3. ©2016 AKAMAI | FASTER FORWARD™
4. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2016 AKAMAI | FASTER FORWARD™ Chapter 1: What is (h2) PUSH?
5. ©2016 AKAMAI | FASTER FORWARD™ Desktop 90th 50th Budget Mobile
6. ©2016 AKAMAI | FASTER FORWARD™ WebPageTest Looking for culprits
7. ©2016 AKAMAI | FASTER FORWARD™ #PerfMatters Perf 101  Wait ├ Caching ├ Protocol opt ├ Route opt. ├ Sharding └ Use time machine ├ webpack / concat ├ spriting / inlining ├ lazyload └  Reqs ├ Critical CSS ├ javascript ├ AMP └ Chroma Sub-Sampling
   Render  Bits ├ gzip/br ├ Resp. img ├ jp2 /webp └ webfonts
8. ©2016 AKAMAI | FASTER FORWARD™
9. ©2016 AKAMAI | FASTER FORWARD™
10. ©2016 AKAMAI | FASTER FORWARD™ Time-To-First-Byte 25% of Perf. Budget is waiting Many causes: User (Network, Device, CPU), App Server, etc
11. ©2016 AKAMAI | FASTER FORWARD™ Introducing Network Waste 1.48s (full throughput) 87.6% WASTE
12. ©2016 AKAMAI | FASTER FORWARD™ Network Waste An opportunity to PUSH content Move the experience 87.6% WASTE
13. ©2016 AKAMAI | FASTER FORWARD™ PUSH_PROMISE When you get it Right: 5.27s 8.59s
14. ©2016 AKAMAI | FASTER FORWARD™ Don't we already have PUSH?
15. How to PUSH Polling / Long Polling GET /messages HTTP/1.1 Host: queue.example.com Authorization: ... HTTP/1.1 200 OK Content-Length: 100 { "from": "adbram@montague.net", "to": "sampson@capulet.com", "message: "Do you bite your thumb at us, sir? }
16. ©2016 AKAMAI | FASTER FORWARD™ One-to-One with WebSockets var ws = new WebSocket('wss://example.com/socket'); ws.onmessage = function(msg) { if(msg.data instanceof Blob) { processBlob(msg.data); } else { processText(msg.data); } } function sendMessage(msgText) { ws.send(msgText); } Not cacheable; meant for special apps, not webpages
17. ©2016 AKAMAI | FASTER FORWARD™ Peer-to-Peer with WebRTC Great for video chat, not webpages
18. ©2016 AKAMAI | FASTER FORWARD™ How to PUSH Server-Side-Events GET /messages HTTP/1.1 Host: api.example.com Accept: text/event-stream Authorization: ... Last-Event-ID: 41 HTTP/1.1 200 OK Connection: keep-alive Content-Type: text/event-stream Transfer-Encoding: chunked id: 42 event: receiveMessage data: { "from": "adbram@montague.net", "to": "sampson@capulet.com", "message: "Do you bite your thumb at us, sir?} id: 43 event: stageAction data: { "from": "adbram@montague.net", "to": "sampson@capulet.com", "message: "Do you bite your thumb at us, sir?}
19. ©2016 AKAMAI | FASTER FORWARD™ How to PUSH Server-Side-Events HTTP/1.1 200 OK Connection: keep-alive Content-Type: text/event-stream Transfer-Encoding: chunked id: 42 event: recieveMessage data: { "from": "adbram@montague.net", "to": "sampson@capulet.com", "message: "Do you bite your thumb at us, sir?} id: 43 event: stageAction data: { "from": "adbram@montague.net", "to": "sampson@capulet.com", "message: "Do you bite your thumb at us, sir?} <script type="text/javascript"> var evtSource = new EventSource("/messages"); evtSource.addEventListener("receiveMessage", function(e) { var newElement = document.createElement("p"); var obj = JSON.parse(e.data); newElement.innerHTML = "Message: " + obj.message; eventList.appendChild(newElement); }, false); </script> Close – but realtime & text only (not resources)
20. ©2016 AKAMAI | FASTER FORWARD™ 9 (8+) 6+ (4.4)
21. ©2016 AKAMAI | FASTER FORWARD™ ! " TCP Slow Start # # # " " # # # #
22. ©2016 AKAMAI | FASTER FORWARD™
23. ©2016 AKAMAI | FASTER FORWARD™ Client Side Receive Window 20mbps @100ms RTT Time-To-First-Byte Time-To-First-Res.
24. ©2016 AKAMAI | FASTER FORWARD™ HTTP/2 PUSH: Warm the TCP Connection
25. ©2016 AKAMAI | FASTER FORWARD™
26. HTTP/2 PUSH_PROMISE Frame Basics DATA a:hover {color: blue} … PUSH_PROMISE :url: /push.css user-agent: chrome HEADERS :method: GET … SETTINGS ENABLE_PUSH: 0 RST_STREAM HEADERS :status: 200 …
27. HTTP/2 PUSH_PROMISE Expected Lifecycle HEADERS 13 HEADERS 13 DATA 13 PUSH_PROMISE 13 promised-stream-id: 2 HEADERS 2 DATA 2 … wait ...
28. HTTP/2 PUSH_PROMISE Expected Lifecycle HEADERS 13 HEADERS 13 DATA 13 PUSH_PROMISE 13 promised-stream-id: 2 RST_STREAM 2
29. ©2016 AKAMAI | FASTER FORWARD™ HTTP/2 PUSH_PROMISE $ nghttp https://www.colinbendell.com/demo/h2/pushtest.html -vv --no-push [ 0.123] Connected The negotiated protocol: h2 [ 0.518] send SETTINGS frame <length=18, flags=0x00, stream_id=0> (niv=3) [SETTINGS_MAX_CONCURRENT_STREAMS(0x03):100] [SETTINGS_INITIAL_WINDOW_SIZE(0x04):65535] [SETTINGS_ENABLE_PUSH(0x02):0] Push Not Supported [ 0.230] send RST_STREAM frame <length=5, flags=0x07, stream_id=4> Push not accepted
30. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2016 AKAMAI | FASTER FORWARD™ Chapter 2: Can i Push?
31. HTTP/2 PUSH Browsers & Apps Browser GET /index.html PUSH /global.css GET /index.html Cache Secret Queue* Unused Streams
32. HTTP/2 PUSH in a Secret Cache / Queue Browsers & Apps Browser GET /global.css Cache Unused Streams
33. ©2016 AKAMAI | FASTER FORWARD™ Push headers are 'provisional'
34. ©2016 AKAMAI | FASTER FORWARD™ Chrome shows PUSH in Timeline
35. chrome://net-internals
36. ©2016 AKAMAI | FASTER FORWARD™ HTTP/2 (Chrome) Adopted Push Stream chrome://net-internals to find unclaimed pushes Adopted pushes are logged (not a frame) * PUSH is kept in memory for 5 minutes and then get deleted if unclaimed
37. ©2016 AKAMAI | FASTER FORWARD™ Does the browser behave as I expect?
38. ©2016 AKAMAI | FASTER FORWARD™ Announcing: canipush.com
39. canipush.com Browser Test Harness Browser GET /example.css PUSH /example.css Cache Unused Streams ? Different content
40. ©2016 AKAMAI | FASTER FORWARD™ canipush.com H2 Basics: Coalescing https://canipush.com/?test=1 https://canipush.com/?test=2
41. ©2016 AKAMAI | FASTER FORWARD™ canipush.com H2 Basics: Coalescing
42. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Simple Push https://canipush.com/?test=3
43. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Simple Push
44. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Sharded Resource (Same Cert) https://canipush.com/?test=4
45. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Sharded Resource (Same Cert)
46. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Sharded Resource (Diff Cert) https://canipush.com/?test=5
47. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Shard w/ diff cert (should reject)
48. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Error pages (eg: 404) https://canipush.com/?test=6
49. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Shard w/ diff cert (should reject)
50. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Previously Cached https://canipush.com/?test=7
51. ©2016 AKAMAI | FASTER FORWARD™ canipush.com Previously Cached
52. ©2016 AKAMAI | FASTER FORWARD™ Browser Support Implementation notes • Cross Origin XHR are different • PUSHed content must be pulled (no programatic alerting – use SSE for that) • FF uses init flow control of 64kb • Browsers don’t (yet) sync caches
53. ©2016 AKAMAI | FASTER FORWARD™ What is coming?
54. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2016 AKAMAI | FASTER FORWARD™ Chapter 3: Should i Push?
55. ©2016 AKAMAI | FASTER FORWARD™
56. ©2016 AKAMAI | FASTER FORWARD™
57. ©2016 AKAMAI | FASTER FORWARD™
58. ©2016 AKAMAI | FASTER FORWARD™ Gartner's Hype-Cycle Where is HTTP/2 PUSH?
59. ©2016 AKAMAI | FASTER FORWARD™ How do you push? Hint (late) with Headers HTTP/2 200 OK Content-Type: text/html Link: /jquery.js; rel=preload; as=script Link: /global.css; rel=preload; as=style; nopush Link: <URL>; rel=preload; as=style
60. ©2016 AKAMAI | FASTER FORWARD™
61. ©2016 AKAMAI | FASTER FORWARD™
62. ©2016 AKAMAI | FASTER FORWARD™ Delayed HTML Load Missed Opportunity
63. HTTP/2 PUSH_PROMISE Why can't you send Link early? DATA a:hover {color: blue} … HEADERS :method: GET … HEADERS :status: 200 Link: ... rel=preload
64. ©2016 AKAMAI | FASTER FORWARD™ Proposal
65. ©2016 AKAMAI | FASTER FORWARD™ RFC 7540: The server SHOULD send PUSH_PROMISE (Section 6.6) frames prior to sending any frames that reference the promised responses. This avoids a race where clients issue requests prior to receiving any PUSH_PROMISE frames.
66. ©2016 AKAMAI | FASTER FORWARD™ How do you push? Push while waiting public class MyServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) { String uri = request.getRequestURI(); if ("/index.html".equals(uri)) { String resourceToPush = "/js/jquery.js"; RequestDispatcher dispatcher = request.getRequestDispatcher(resourceToPush); dispatcher.push(request); } } }
67. ©2016 AKAMAI | FASTER FORWARD™ What if you get it wrong? Delayed HTML
68. ©2016 AKAMAI | FASTER FORWARD™ PUSH Results Insurance Site Original CSS/JS Original Everything Images
69. ©2016 AKAMAI | FASTER FORWARD™ PUSH Results Cosmetics Site Original CSS/JS Everything Images
70. ©2016 AKAMAI | FASTER FORWARD™ Automatic PUSH_PROMISE But when you get it Right: 5.27s 8.59s
71. ©2016 AKAMAI | FASTER FORWARD™ https://goo.gl/M98bWr Google' Recommendations 1. Push just enough to fill idle network time, and no more 2. Push resources in right order. 3. Use special strategies to track the client-side cache 4. Use the right cookies when pushing resources that vary by cookie 5. Use server push to fill the initial cwnd and use preload to reveal the remaining critical or hidden resources.
73. ©2016 AKAMAI | FASTER FORWARD™ Time-To-First-Byte TTFB delays impact TCP HOL
74. ©2016 AKAMAI | FASTER FORWARD™ Minimally send to TCP Send Buffer TCP Head OF Line Blocking
75. ©2016 AKAMAI | FASTER FORWARD™ Announcing: shouldipush.com
76. ©2016 AKAMAI | FASTER FORWARD™ www.rakuten.co.uk TTFB: Network Waste TTFB: 330ms 95.9% Waste
77. ©2016 AKAMAI | FASTER FORWARD™ www.rakuten.co.uk Time-to-First-Resource TTFR: 762ms 91.1% Waste
78. ©2016 AKAMAI | FASTER FORWARD™ www.rakuten.co.uk 33.7% Vis. Complete Time 1.48s (full throughput) 87.6% WASTE Vis. Complete: 4.38s
79. ©2016 AKAMAI | FASTER FORWARD™ www.forever21.com WPT: Network Waste 81.7% 0.6s (full throughput)
80. ©2016 AKAMAI | FASTER FORWARD™ Browser Support Implementation notes • Measures opportunity to use the network • Synthetic indicator metric – NOT silver bullet • Uses WPT results
81. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2016 AKAMAI | FASTER FORWARD™ Chapter 4: Epilogue
82. ©2016 AKAMAI | FASTER FORWARD™ PUSH Questions & Predictions • First request: ClientHints, Session Cookies • PUSH to surrogate but not client • Cache Management / Invalidation • Next page resources • DDOS countermeasures using PUSH
83. ©2016 AKAMAI | FASTER FORWARD™ PUSH
84. ©2016 AKAMAI | FASTER FORWARD™ HTTP/2 PUSH Take Action Optimize for the Browser • Cache Everything • Remove 3rd Party Content • Federated development: move APIs to the 1st party domain • Plan for coalescing (use TLS SANs) Experiment • shouldipush.com • Test TTFB globally
85. ©2016 AKAMAI | FASTER FORWARD™ Thanks! @ColinBendell