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.

Transcript

1. HTTP/2
   the future of the web today
   @robdcrowley | robdcrowley
   https://www.flickr.com/photos/79909830@N04/15599391872
   

   View Slide

2. Slides are available at
   https://bit.ly/ndcsydney-http2
   

   View Slide

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
   

   View Slide

4. HTTP is the foundation of data communication for
   the World Wide Web.
   

   View Slide

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

   View Slide

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.
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

9. 1990
   HTTP/0.9
   The abridged history of HTTP
   

   View Slide

10. HTTP/0.9 was the ultimate MVP
    

    View Slide

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

    View Slide

12. 1996
    HTTP/1.0
    The abridged history of HTTP
    

    View Slide

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

    View Slide

14. “This HTTP thing is really taking off. We should
    catalog all the de facto standard protocol
    extensions that been adopted.”
    

    View Slide

15. HTTP/1.0 was not a standard but rather a compilation
    of best practices that had emerged.
    

    View Slide

16. 1999
    HTTP/1.1
    The abridged history of HTTP
    

    View Slide

17. HTTP/1.1 was a massive success.
    

    View Slide

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

    View Slide

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

    View Slide

20. We are now going to travel back through time to
    1999 when the web was a simpler place.
    

    View Slide

21. http://web.archive.org/web/19990508070818/http://www3.yahoo.com:80/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 1999
    HTTP/1.1
    The abridged history of HTTP
    

    View Slide

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

    View Slide

27. 1999
    HTTP/1.1
    Rob’s first
    website
    The abridged history of HTTP
    2004
    “Web 2.0”
    

    View Slide

28. Web page weight gain
    700 kB
    80
    3284 kB
    108
    # requests
    page size
    2010 2017
    

    View Slide

29. TCP is optimized for long flows…
    …web pages typically have many short ones
    

    View Slide

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
    

    View Slide

31. “You don't have to be an engineer to be a racing driver,
    but you do have to have mechanical sympathy.”
    - Jackie Stewart
    

    View Slide

32. Issues with HTTP/1.x
    Head-of-line
    Blocking
    Lack of
    Parallelism
    Protocol
    Overhead
    

    View Slide

33. Only one request can be outstanding on a connection
    at any point in time
    Image via https://www.flickr.com/photos/ivoposthumus/8385430378
    

    View Slide

34. Head of line blocking
    Slow Response
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

38. We have hacked out HTTP1/x best practices
    https://www.flickr.com/photos/canadianveggie/6774413477
    

    View Slide

39. Domain Sharding
    

    View Slide

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….
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. Image via https://www.flickr.com/photos/volvob12b/8096363022
    Increases risk of network congestion and packet loss
    

    View Slide

44. Ensure page level optimizations align with
    any overarching Quality of Service (QoS) policy.
    

    View Slide

45. Image Sprites
    

    View Slide

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.
    

    View Slide

47. Resource Concatenation
    Image via https://www.flickr.com/photos/samcatchesides/3326878608
    

    View Slide

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

    View Slide

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

    View Slide

50. JavaScript and CSS bundles
    { } { } { }
    { }
    {;} {;} {;}
    {;}
    bundle.css bundle.js
    When just one resource changes the entire cached bundle is invalidated
    X
    X
    

    View Slide

51. Resource Inlining
    Image via https://www.flickr.com/photos/backpackphotography/2318062662
    

    View Slide

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

    View Slide

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
    

    View Slide

54. These best practices create a tension...
    …between development and production
    

    View Slide

55. Build tools help address this impedance mismatch
    

    View Slide

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

    View Slide

57. 2009
    SPDY
    The abridged history of HTTP
    

    View Slide

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

    View Slide

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.
    

    View Slide

60. 2015
    HTTP/2
    The abridged history of HTTP
    

    View Slide

61. HTTP/2 is a protocol designed for low-latency
    transport of content over the World Wide Web
    

    View Slide

62. Adoption is rising with 16.2% of websites now
    leveraging HTTP/2 *
    * source: https://w3techs.com (2017-09-15)
    

    View Slide

63. HTTP/2 respects existing HTTP semantics.
    Not breaking the web is a good idea.
    

    View Slide

64. With HTTP/2 all communication occurs over a
    single TCP connection per origin.
    

    View Slide

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”
    }
    

    View Slide

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
    

    View Slide

67. Better bandwidth utilization
    As request streams can be multiplexed the client no longer needs to queue requests.
    

    View Slide

68. Only 25% of HTTP/2 connections carry a single
    transaction.
    

    View Slide

69. With the efficiency that streams bring we are finally in a
    position to maximise the benefit of HTTP caching.
    

    View Slide

70. With HTTP/2 the browser relies on the server to deliver
    data in an optimal way.
    

    View Slide

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
    

    View Slide

72. HTTPS/2
    Image via https://www.flickr.com/photos/sugarhiccuphiccup/4617472996
    

    View Slide

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

    View Slide

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
    

    View Slide

75. When served over HTTP/2 over TLS, version 1.2 or
    higher must be used along with perfect forward
    secrecy cypher suites.
    

    View Slide

76. HTTPS adoption more than doubled in 2016 and now
    accounts for more than 50% of traffic on the web.
    

    View Slide

77. For many sites, deploying HTTPS will be the
    most difficult part of migrating to HTTP/2.
    

    View Slide

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.
    

    View Slide

79. Header Compression via HPACK
    https://www.flickr.com/photos/23119666@N03/16159122789
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

82. Mitigating latency is fine but they should have fixed
    
    

    View Slide

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
    

    View Slide

84. SERVER
    Image via https://www.flickr.com/photos/mryipyop/1673801831/
    

    View Slide

85. Server Push
    Processing request
    

    View Slide

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

    View Slide

87. A client may choose to opt out of Server Push via
    SETTINGS frame.
    

    View Slide

88. HTTP/2 push is a low-level networking feature, its
    available to anything that uses the networking stack.
    

    View Slide

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.
    

    View Slide

90. If the connection is closed then it’s push cache is
    also lost.
    

    View Slide

91. Requests without credentials use a separate
    connection. Handling these scenarios are key.
    fetch(url, {credentials: 'include'});
    

    View Slide

92. Browser support is well…inconsistent
    

    View Slide

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

    View Slide

94. A bad server push strategy will perform worse
    than not supporting it at all.
    Caveat Emptor
    

    View Slide

95. “An interesting observation about network-based
    applications is that the best application performance is
    obtained by not using the network.”
    - Roy Fielding
    

    View Slide

96. Cache Digest will allow clients to inform the server of
    the resources they already have.
    

    View Slide

97. So now we have Server Push do we need
    or
    anymore?
    

    View Slide

98. Good ideas with both HTTP/1.x and HTTP/2
    Image via https://www.flickr.com/photos/lloydcrew/3263012874
    

    View Slide

99. Minimize DNS lookups
    Requests are blocked by unresolved names
    

    View Slide

100. Reuse existing TCP connections
     Establishing a connection is expensive
     

     View Slide

101. Minimize number of HTTP redirects
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

105. chrome://net-internals
     

     View Slide

106. webpagetest
     

     View Slide

107. wireshark
     

     View Slide

108. QUIC
     The abridged history of HTTP
     

     View Slide

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

     View Slide

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
     

     View Slide

111. So now you know HTTP/2, go try it out.
     

     View Slide

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

     View Slide