Promise of Push

097b83add05a95ca2bb3f1f95ac9c8c9?s=47 Colin Bendell
November 08, 2016

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.

097b83add05a95ca2bb3f1f95ac9c8c9?s=128

Colin Bendell

November 08, 2016
Tweet

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.
  72. None
  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