Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2 - The future of the Web today (NDC Sydney 2017)

HTTP/2 - The future of the Web today (NDC Sydney 2017)

Client side web technologies continue to advance at breakneck speed. The quest to deliver richer user experiences is relentless and due to the limitations of HTTP/1.x, we have been forced to develop various workarounds (domain sharding, spriting, resource concatenation and inlining) in a bid to optimize performance.
HTTP/2 has been designed with the modern web in mind and eliminates the need for such compensating hacks. In this session we'll take an in-depth look at web performance optimization; the best practices that have evolved; the game changing new features of HTTP/2; and most importantly what you need to do to deliver a world class HTTP/2 experience:

- Why domain sharding, resource concatenation and image sprites are now anti-patterns
- How server push is effectively resource inlining on steroids
- What new best practices are possible with HTTP/2
- What techniques to apply during the transitional period from HTTP/1.x to HTTP/2

Additionally, we will look at the tooling available for working with HTTP/2 traffic and how we can ensure that we're getting the full benefit of HTTP/2 both client and server side.

3353b76e1480888ea7a482ebaa883dcb?s=128

Rob Crowley

August 16, 2017
Tweet

Transcript

  1. HTTP/2 the future of the web today @robdcrowley | robdcrowley

    https://www.flickr.com/photos/79909830@N04/15599391872
  2. Slides are available at https://bit.ly/ndcsydney-http2

  3. Goals for the session - Explore the evolution of HTTP

    from a simple one line protocol to being the rich full featured one we know. - Look at the motivations for HTTP/2 and investigate its major features. - Take an in depth look at Server Push, one of the key new HTTP/2 features and the current browser support. - Most of all, encourage you all learn more about HTTP/2 and migrate your applications across to leverage it
  4. HTTP is the foundation of data communication for the World

    Wide Web.
  5. Internet Protocol Stack Network Access IP TCP UDP DNS, TFTP

    etc. Application Layer Network Layer Internet Layer Transport Layer HTTP , FTP etc.
  6. Internet Protocol Stack Network Access IP TCP UDP DNS, TFTP

    etc. Application Layer Network Layer Internet Layer Transport Layer Network Access IP TCP HTTP , FTP etc. HTTP , FTP etc.
  7. TCP/IP vs OSI 7. Application 6. Presentation 5. Session 4.

    Transport 3. Network 2. Data Link 1. Physical Network Access Internet Transport Application OSI TCP/IP
  8. Network Performance 101 Cable ISP ISP Ethernet … WIFI Latency:

    The time from the source sending a packet to the destination receiving it. Bandwidth: Maximum throughput of a logical or physical communication path.
  9. 1990 HTTP/0.9 The abridged history of HTTP

  10. HTTP/0.9 was the ultimate MVP

  11. > telnet example.com 80 connected to 74.128.xxx.xxx GET /about/ (hypertext

    response) (connection closed)
  12. 1996 HTTP/1.0 The abridged history of HTTP

  13. 1996 HTTP/1.0 The abridged history of HTTP Adhoc Changes

  14. “This HTTP thing is really taking off. We should catalog

    all the de facto standard protocol extensions that been adopted.”
  15. HTTP/1.0 was not a standard but rather a compilation of

    best practices that had emerged.
  16. 1999 HTTP/1.1 The abridged history of HTTP

  17. HTTP/1.1 was a massive success.

  18. Connection: Keep-Alive provided the much needed ability to persist TCP

    connections across requests.
  19. Pipelining never gained widespread support, largely due to implementation complexity.

  20. We are now going to travel back through time to

    1999 when the web was a simpler place.
  21. http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/

  22. http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/ This is the era when <table> ruled page layouts

  23. http://web.archive.org/web/19990117032727/http://www.google.com:80/

  24. So what precipitated the need for a new version of

    HTTP?
  25. 1999 HTTP/1.1 The abridged history of HTTP

  26. 1999 HTTP/1.1 Rob’s first website The abridged history of HTTP

  27. 1999 HTTP/1.1 Rob’s first website The abridged history of HTTP

    2004 “Web 2.0”
  28. Web page weight gain 700 kB 80 3284 kB 108

    # requests page size 2010 2017
  29. TCP is optimized for long flows… …web pages typically have

    many short ones
  30. “For HTTP/1 74% of our active connections carry just a

    single transaction - persistent connections just aren't as helpful as we all want.” - Patrick McManus, Mozilla
  31. “You don't have to be an engineer to be a

    racing driver, but you do have to have mechanical sympathy.” - Jackie Stewart
  32. Issues with HTTP/1.x Head-of-line Blocking Lack of Parallelism Protocol Overhead

  33. Only one request can be outstanding on a connection at

    any point in time Image via https://www.flickr.com/photos/ivoposthumus/8385430378
  34. Head of line blocking Slow Response

  35. Poor bandwidth utilization Processing request Processing request Network idle Network

    idle
  36. :authority: www.bankwest.com.au :method: GET :path: /etc/clientlibs/dtm/bw-dtm-config/af27f6333b4c7c76398b2602be76dbf96 :scheme: https accept: */*

    accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.8 cache-control: no-cache cookie: JSESSIONID=BE056DF42B8A33245443C18C6BDD83DE; AWSELB=D739253506AB16 4225E86F8ADB10064C84FD43D1730B9B017999C004025758CEC0F5F93E55CB1934783B2FF7 670F03C545EDCB976AF90500354D65C74362F403; AMCVS_C7671CFE532E6D320A490D45%4 AdobeOrg=1; s_vnum=1505269579970%26vn%3D1; existingSession=true; s_ppvl=bw credit-cards%253Acompare-business-credit-cards%253Amastercard-low-rate%2C3 user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWe Headers are sent on every request
  37. :authority: www.bankwest.com.au :method: GET :path: /etc/clientlibs/dtm/bw-dtm-config/af27f6333b4c7c76398b2602be76dbf96 :scheme: https accept: */*

    accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.8 cache-control: no-cache cookie: JSESSIONID=BE056DF42B8A33245443C18C6BDD83DE; AWSELB=D739253506AB16 4225E86F8ADB10064C84FD43D1730B9B017999C004025758CEC0F5F93E55CB1934783B2FF7 670F03C545EDCB976AF90500354D65C74362F403; AMCVS_C7671CFE532E6D320A490D45%4 AdobeOrg=1; s_vnum=1505269579970%26vn%3D1; existingSession=true; s_ppvl=bw credit-cards%253Acompare-business-credit-cards%253Amastercard-low-rate%2C3 user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWe Headers are sent on every request A lot of duplicate data is transferred uncompressed across the wire.
  38. We have hacked out HTTP1/x best practices https://www.flickr.com/photos/canadianveggie/6774413477

  39. Domain Sharding

  40. Domain Sharding static1.example.com static2.example.com static3.example.com Modern browsers will open at

    most 6 concurrent connections to any single origin. Sharding requests across multiple domains allows us to overcome this limitation. This comes at a cost however….
  41. The cost of establishing a connection SYN SYN ACK ACK

    Client Hello Server Hello Certificate Server Hello Done Client Key Exchange Change Cipher Spec Finished Change Cipher Spec Finished
  42. …and we’re not done yet. TCP starts slowly. GET /me.webp

    10 x TCP Packet 10 x ACK 14600 bytes 20 x TCP Packet 29200 bytes 20 x ACK 6 x TCP Packet 7400 bytes 6 x ACK Size = 50Kb Initial cwnd = 10
  43. Image via https://www.flickr.com/photos/volvob12b/8096363022 Increases risk of network congestion and packet

    loss
  44. Ensure page level optimizations align with any overarching Quality of

    Service (QoS) policy.
  45. Image Sprites

  46. To get just one sprite, the browser must download and

    decode the entire image. Likewise if just one sprite changes the entire cached image on the client is invalidated. We are trading cache efficiency for reduced network requests.
  47. Resource Concatenation Image via https://www.flickr.com/photos/samcatchesides/3326878608

  48. JavaScript and CSS bundles { } { } { }

    { } {;} {;} {;} {;} bundle.css bundle.js
  49. JavaScript and CSS bundles { } { } { }

    { } {;} {;} {;} {;} bundle.css bundle.js X
  50. JavaScript and CSS bundles { } { } { }

    { } {;} {;} {;} {;} bundle.css bundle.js When just one resource changes the entire cached bundle is invalidated X X
  51. Resource Inlining Image via https://www.flickr.com/photos/backpackphotography/2318062662

  52. Above the fold CSS is a good candidate to be

    inlined.
  53. url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4QBGRXhpZgAATU0AKgAAAAgABAESAAMAAAABAAEAAFEQ AAEAAAABAQAAAFERAAQAAAABAAAAAFESAAQAAAABAAAAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBA MFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMD AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAPAEADASIAAhEB AxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUE GE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dn d4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8 QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcR MiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl 6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6

    /9oADAMBAAIRAxEAPwD9NvHHinxZrHxD+Iws/GGuabH4evN1vANRaG32vdLDsJLAIo3gj6Y71zd7rXxU037YLjxB4khk08sLlG1k7 oQs4tyxAf7olIXPcHcMr81d/wDE79nD4gJ8SfFlzoumWGraP4mnE0vmXEaCVPMEwjYM6su2RQcqedo5wSKqXfwk+Mmo2V1Dd aFpt19u877RI9xbrJMZZ0nYkrIBkPGmCAMKAvQKB/KeYZRmssRWVWli1JOpZwU3GT9pNxfVW5XCzjpZPTZv95weYYGNGm6c8O 4tQupOKklyRTXR35lK9+680uesP+FlR3t9DqXirxLatbWepSxiDVjcl7iyjDvAwSQ4PKj/AIEMZwRVDRtS+KniK4WGx8R69dyNfNpoW PXMn7QsLzGP7/Xy43OehKFQSwIrsJfhL8Zpbm4m/sSxjmupL2V5I7yFGV7xVWdlIlypIVcEfdxkYNQn4MfGRPEF9qUOj2drc6lc2t5 d+Tc2yJcTWziSORl343bxuYj7xLE5yc41Mpx14pUcdyqWuk+Zx5V1ta/MrbaRd9WrPSOYYazbqYW9tNYWTv2ve3Lrvq1bS91ymlal 8WNctLOez1zxNcR3+z7OV1Zv3gaWOEHlxgCWREOcbW3A42ttgv8Axb8QNM8Fza1P401pYodQTTfIGqymbzDD5pyM/LtBUFT8 wJYEKVOemn/Z6+LF7pNnZ3fh3T74afNNPbzT3Nu00ZmcySDcJBkNIS+SNyknaVBIqbxN8CvjB4w0aex1HRba6hnuIbovJewPMsk UAgU+Y0pZiY1AYuWJIznJOeOeT5t7GThSxvPy6XVS3Ny63slZKWi1ldWbtqjphmGB9olOpheW+tnC/Lfzbu3HfRWd0r6MzfBuv+N fiJ4kmtofF3iq3jtrG1ncw3kzfet48njPO9gTnAwXYn5cHpNB1zxp8NPjJ4St7rxPr2p2esan9ilivppJImi3JGeH43bvNII52pG3G8qMe2 /Zh+Jfh7xPZatp+iW7TRWkUeGvYMxsLcQOp+fvhiCCcqwzyWUaHg79nL4iv8ZdA8QaxosMcVnf20tzKt5A22KNwegfJCqAqgDhV Uc459jLsLnUPZwlhsT7b2yfP+95VDnTv2tbRp9Nb9DzMZVy6fNKNeh7L2T933L83K1bve+qffS3U//Z) We also inline using DataURIs… …resulting in larger downloads and overriding browser priorities
  54. These best practices create a tension... …between development and production

  55. Build tools help address this impedance mismatch

  56. The cost of such tooling is managing the added complexity

  57. 2009 SPDY The abridged history of HTTP

  58. Latency is the new bottleneck https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

  59. Latency is the new bottleneck https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ In many scenarios latency,

    not bandwidth, is the constraining factor on network performance.
  60. 2015 HTTP/2 The abridged history of HTTP

  61. HTTP/2 is a protocol designed for low-latency transport of content

    over the World Wide Web
  62. Adoption is rising with 16.2% of websites now leveraging HTTP/2

    * * source: https://w3techs.com (2017-09-15)
  63. HTTP/2 respects existing HTTP semantics. Not breaking the web is

    a good idea.
  64. With HTTP/2 all communication occurs over a single TCP connection

    per origin.
  65. HTTP/2 Binary Framing POST /products HTTP/1.1 Content-Type: application/json Content-Length: 21

    HTTP/1.1 HTTP/2 DATA frame (payload) HEADERS frame (meta-data) { “name”: “Hero Saver” }
  66. HTTP/2 Binary Framing Client Server HTTP/2 Connection Stream 1 DATA

    Stream 2 HEADERS Stream 2 DATA Stream 1 DATA Stream 2 DATA Stream 5 DATA Stream 4 DATA Multiplexing is possible as frames can be interleaved
  67. Better bandwidth utilization As request streams can be multiplexed the

    client no longer needs to queue requests.
  68. Only 25% of HTTP/2 connections carry a single transaction.

  69. With the efficiency that streams bring we are finally in

    a position to maximise the benefit of HTTP caching.
  70. With HTTP/2 the browser relies on the server to deliver

    data in an optimal way.
  71. Stream Prioritization With HTTP/1.x the browser defines the priority. With

    HTTP/2 the browser hints the priority via stream weights and dependencies. The server is not obligated to respect these hints. * id:A w:1 id:B w:4 id:C w:4 id:D w:8 id:E w:2
  72. HTTPS/2 Image via https://www.flickr.com/photos/sugarhiccuphiccup/4617472996

  73. The Internet is strewn with middle-box debris Image via https://www.flickr.com/photos/usfwspacific/33882304895

  74. Middle-box debris Client Server A lot of middle-boxes on the

    internet assume HTTP would never change. They expect text based traffic over port 80 and HTTP/2 binary data causes interoperability issues, mostly resulting in termination of the connection. In trials, between 20-30% of HTTP/2 traffic over port 80 was affected. Firewall WAN Optimizer IDS NAT X
  75. When served over HTTP/2 over TLS, version 1.2 or higher

    must be used along with perfect forward secrecy cypher suites.
  76. HTTPS adoption more than doubled in 2016 and now accounts

    for more than 50% of traffic on the web.
  77. For many sites, deploying HTTPS will be the most difficult

    part of migrating to HTTP/2.
  78. Protocol negotiation with ALPN (RFC 7301) Client Hello ( ALPN

    Extension + List of Protocols ) Server Hello ( ALPN Extension + Selected Protocol ) ALPN performs the equivalent function that Next Protocol Negotiation (NPN) did in SPDY.
  79. Header Compression via HPACK https://www.flickr.com/photos/23119666@N03/16159122789

  80. HPACK (RFC 7541) Techniques ▪ Index value for common header/values

    ▪ Indexed list of previously sent headers ▪ Huffman encoding to compress value Static Table ▪ Predefined common headers/values Dynamic Table ▪ Maximum size
  81. 192.168.10.101 192.168.10.101 https://www.example.com https://www.cnd.example.com Connection Coalescing A TCP connection will

    be reused between two origins if: ▪ The origins resolve to the same server IP address. ▪ The origins are covered by the same TLS certificate.
  82. Mitigating latency is fine but they should have fixed <insert

    your favorite HTTP peeve here>
  83. “HTTP/2 isn’t magic Web performance pixie dust; you can’t drop

    it in and expect your page load times to decrease by 50%.” - Mark Nottingham
  84. SERVER Image via https://www.flickr.com/photos/mryipyop/1673801831/

  85. Server Push Processing request

  86. Server Push Processing request Client can reject push promise via

    RST_STREAM
  87. A client may choose to opt out of Server Push

    via SETTINGS frame.
  88. HTTP/2 push is a low-level networking feature, its available to

    anything that uses the networking stack.
  89. Server Push Page Service Worker HTTP Cache Server Push Cache

    HTTP/2 Connection An item can only be read from the push cache once. The push cache has the lowest priority. If a matching item is found in an upstream cache, then the value in the push cache will not be used.
  90. If the connection is closed then it’s push cache is

    also lost.
  91. Requests without credentials use a separate connection. Handling these scenarios

    are key. fetch(url, {credentials: 'include'});
  92. Browser support is well…inconsistent

  93. Use User-Agent sniffing to only push resources to particular browsers.

  94. A bad server push strategy will perform worse than not

    supporting it at all. Caveat Emptor
  95. “An interesting observation about network-based applications is that the best

    application performance is obtained by not using the network.” - Roy Fielding
  96. Cache Digest will allow clients to inform the server of

    the resources they already have.
  97. So now we have Server Push do we need <link

    rel=”preload”> or <link rel=”prefetch”> anymore?
  98. Good ideas with both HTTP/1.x and HTTP/2 Image via https://www.flickr.com/photos/lloydcrew/3263012874

  99. Minimize DNS lookups Requests are blocked by unresolved names

  100. Reuse existing TCP connections Establishing a connection is expensive

  101. Minimize number of HTTP redirects

  102. Minimize data sent across the network through removing waste and

    effective caching
  103. Use a CDN to reduce latency including uncached origin fetches

  104. https://www.flickr.com/photos/rowenaoscura/8937849314 Tools to make your HTTP/2 life easier

  105. chrome://net-internals

  106. webpagetest

  107. wireshark

  108. QUIC The abridged history of HTTP

  109. Serving HTTP/2 over TCP removes head-of-line blocking at the application

    layer but not the transport layer.
  110. QUIC - A key goal of QUIC is reduce TLS

    handshake overhead. - 0 RTT for resuming session - 1 RTT for new session - Head-of-line blocking is eliminated at the transport layer. IP UDP QUIC HTTP/2 API
  111. So now you know HTTP/2, go try it out.

  112. Questions https://www.flickr.com/photos/abulic_monkey/1802610068