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.

Rob Crowley

August 16, 2017
Tweet

More Decks by Rob Crowley

Other Decks in Programming

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