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

[NDC London] HTTP: History & Performance

Ana Balica
January 18, 2018

[NDC London] HTTP: History & Performance

NDC London 2018 talk

The Hypertext Transfer Protocol is one of the most popular protocols nowadays. It’s the language most servers, clients, and even teapots can speak. Learn how and why it became such an ubiquitous part of the web by following the evolution of HTTP.

In regards to web performance, have you ever wondered why are we using minimization, concatenation, image spriting, resource inlining and other little hacks? Befriend the browser and help it to help you deliver the best user experience possible. Find out how TLS and HTTPS affect performance and what to look forward in HTTP/2.

This talk will contain references to archaic RFCs, lots of diagrams and long lists of best practices.

Ana Balica

January 18, 2018
Tweet

More Decks by Ana Balica

Other Decks in Programming

Transcript

  1. View Slide

  2. By: @anabalica

    View Slide

  3. View Slide

  4. View Slide

  5. Hypertext
    Transfer Protocol

    View Slide

  6. Hypermedia
    Transfer Protocol

    View Slide

  7. HTTP/0.9
    (1991)

    View Slide

  8. 㱺 telnet stallman.org 80
    Trying xxx.xxx.xx.xxx...
    Connected to stallman.org.
    Escape character is '^]'.
    GET /

    ...
    Connection closed by foreign host.

    View Slide

  9. Client request -
    single ASCII char
    string terminated
    by a single CRLF
    Server
    response - ASCII
    char stream
    in HTML
    Connection
    closed after
    transfer complete
    GET
    method
    only
    Metadata?
    Never heard
    of that.
    What is
    content
    negotiation?

    View Slide

  10. HTTP/1.0
    (RFC 1945, 1996)

    View Slide

  11. 㱺 curl -v0 https://twitter.com
    * Connected to twitter.com port 443 (#0)
    > GET / HTTP/1.0
    > Host: twitter.com
    > User-Agent: curl/7.43.0
    > Accept: */*
    >
    < HTTP/1.0 200 OK
    < content-type: text/html;charset=utf-8
    < pragma: no-cache
    <

    ...
    * Closing connection 0

    View Slide

  12. Request may
    have newline
    separated
    headers
    Request
    includes
    HTTP version
    Connection
    closed after
    transfer complete
    And lots
    of other
    goodies...
    Response has
    its own newline
    separated
    headers
    Not limited
    to hypertext

    View Slide

  13. Operating with
    idealized values
    Real life networks are messy.

    View Slide

  14. TCP-30ms
    SYN 0ms
    SYN ACK
    15ms
    45ms
    35ms
    response
    80ms
    HTTP-65ms
    close connection 95ms
    GET /
    30ms
    ACK

    View Slide

  15. twitter.com homepage over HTTP/1.0
    21
    requests
    ~2s
    1,995ms
    =>

    View Slide

  16. modern average page over HTTP/1.0
    100
    requests
    9.5s
    exactly that
    just in ms
    =>

    View Slide

  17. TCP-30ms TLS-60ms
    30ms
    SYN 0ms
    SYN ACK
    15ms
    ACK
    ClientHello
    45ms
    ServerHello
    Certificate
    ServerHelloDone
    ClientKeyExchange
    ChangeCipherSpec
    Finished
    60ms
    75ms
    ChangeCipherSpec
    Finished
    Application data 90ms

    View Slide

  18. TCP-30ms
    30ms
    SYN 0ms
    SYN ACK
    15ms
    ACK
    ClientHello
    45ms
    ServerHello
    ChangeCipherSpec
    Finished
    60ms
    ChangeCipherSpec
    Finished
    Application data Application data
    TLS-30ms

    View Slide

  19. 21
    requests
    ~2.7s
    2,655ms
    =>
    twitter.com homepage over HTTP/1.0
    with TLS handshake for first connection and TLS
    session resumption for all consequent requests

    View Slide

  20. 100
    requests
    12.5s
    =>
    12,530ms
    with TLS handshake for first connection and TLS
    session resumption for all consequent requests
    modern average page over HTTP/1.0

    View Slide

  21. HTTP/1.1
    (RFC 2068, 1997 & RFC 2616, 1999)

    View Slide

  22. 㱺 curl -v https://github.com
    > GET / HTTP/1.1
    > Host: github.com
    > User-Agent: curl/7.43.0
    > Accept: */*
    >
    < HTTP/1.1 200 OK
    < Transfer-Encoding: chunked
    < Cache-Control: no-cache
    <
    { [1370 bytes data]
    * Connection #0 to host github.com left intact

    View Slide

  23. 㱺 curl -v -H "Range: bytes=0-1024”
    https://assets-cdn.github.com/../Octocat.png
    < HTTP/1.1 206 Partial Content
    < Cache-Control: max-age=31536000, public
    < Age: 2165764
    < Content-Type: image/png
    < Content-Range: bytes 0-1024/35407
    < Content-Length: 1025
    < Connection: keep-alive
    <
    { [1025 bytes data]
    * Connection #0 to host left intact

    View Slide

  24. Keepalive
    connections
    Better
    caching
    mechanism
    Pipelining
    Cookies
    spec
    Compression,
    chunked responses
    & byte ranges
    24 new
    status codes

    View Slide

  25. TCP-30ms
    GET /js 95ms
    20ms
    110ms
    JS response
    130ms
    HTTP
    SYN 0ms
    SYN ACK
    15ms
    30ms
    ACK
    45ms
    35ms
    HTML response
    80ms
    GET /

    View Slide

  26. 21
    requests
    ~1.5s
    1,425ms
    =>
    Single connection with a TLS handshake
    twitter.com homepage over HTTP/1.1

    View Slide

  27. 100
    requests
    6.5s
    =>
    6,560ms
    modern average page over HTTP/1.1
    Single connection with a TLS handshake

    View Slide

  28. ~50%
    increase in speed
    for secure requests

    View Slide

  29. simultaneous connections
    per domain
    6
    number can vary
    per browser

    View Slide

  30. simultaneous connections
    per domain
    6
    priority

    View Slide

  31. GET /js 95ms
    20ms
    110ms
    JS response
    130ms
    SYN 0ms
    SYN ACK
    15ms
    30ms
    ACK
    45ms
    35ms
    HTML response
    80ms
    GET /

    View Slide

  32. GET /js 95ms
    20ms
    110ms
    JS response
    130ms
    SYN 0ms
    SYN ACK
    15ms
    30ms
    ACK
    45ms
    35ms
    HTML response
    80ms
    GET /

    View Slide

  33. 45ms
    35ms
    20ms
    JS response
    HTML response
    80ms
    SYN 0ms
    SYN ACK
    15ms
    ACK
    30ms
    GET /js
    GET /

    View Slide

  34. from 200B to 2KB
    averaging to 700-800B
    HTTP headers
    no compression

    View Slide

  35. // webpack.config.js
    module.exports = {
    entry: ['./one.js', './two.js'],
    output: {
    filename: 'bundle.js'
    },
    plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    ]
    };

    View Slide

  36. .nav-sprite {
    background-image:
    url(https://example.com/sprites.png);
    background-repeat: no-repeat;
    }
    #nav-logo {
    width: 97px;
    height: 29px;
    background-position: -10px -51px;
    }

    View Slide

  37. HTTP/2
    (drafts & RFC 7540, 2015 & ongoing work)

    View Slide

  38. h2

    View Slide

  39. View Slide

  40. View Slide

  41. Binary
    framing
    layer
    Request and
    response
    multiplexing
    Header
    compression
    Server
    push
    Single
    connection
    per origin
    Flow
    control

    View Slide

  42. PUT /books/123/ HTTP/1.1
    Host: www.example.com
    Content-Type: application/json
    Content-Length: 35
    {“author”: “George Orwell”}
    HTTP/1.1
    HEADERS frame
    HTTP/2
    DATA frame
    SETTINGS frame
    PING frame
    GOAWAY frame
    ...

    View Slide

  43. Multiplexing

    View Slide

  44. stream 1
    stream 2
    Request message
    Response message
    HEADERS
    frame
    DATA
    frame
    HEADERS
    frame

    View Slide

  45. Stream
    prioritization
    Each stream may
    another stream
    and be dependent on
    between 1 and 256
    have a weight
    Flow
    control
    Each receiver can set
    entire connection
    for each stream or
    desired window size

    View Slide

  46. GET
    /index.html
    stream 1
    stream 1
    Response
    stream 2
    PUSH_PROMISE
    /script.js
    stream 3
    PUSH_PROMISE
    /style.css
    2
    3
    1

    View Slide

  47. HPACK
    (RFC 7541, 2015)

    View Slide

  48. 61 commonly used
    HTTP headers
    Static Table Dynamic Table
    Static Huffman Encoding
    +
    initially empty,
    consists of headers
    headers not yet indexed,
    are encoded using a code statistically obtained
    on a large sample of HTTP headers

    View Slide

  49. +------------------------------------+
    | :method| GET |
    +------------------------------------+
    | :scheme| https |
    +------------------------------------+
    | :host| www.example.com |
    +------------------------------------+
    | :path| / |
    +------------------------------------+
    | :accept| */* |
    +------------------------------------+
    | :user-agent| Mozilla/5.0... |
    +------------------------------------+
    | :cookie| ... |
    +------------------------------------+
    | :x-requested-with| XMLHttpRequest |
    +------------------------------------+
    Request #1

    View Slide

  50. +------------------------------------+
    | :method| GET |
    +------------------------------------+
    | :scheme| https |
    +------------------------------------+
    | :host| www.example.com |
    +------------------------------------+
    | :path| / |
    +------------------------------------+
    | :accept| */* |
    +------------------------------------+
    | :user-agent| Mozilla/5.0... |
    +------------------------------------+
    | :cookie| ... |
    +------------------------------------+
    | :x-requested-with| XMLHttpRequest |
    +------------------------------------+
    Request #1 with HPACK
    1byte
    1byte
    1byte++
    1byte
    1byte++
    1byte++
    1byte++
    +++

    View Slide

  51. +------------------------------------+
    | | |
    +------------------------------------+
    | | |
    +------------------------------------+
    | | www.example.com |
    +------------------------------------+
    | | |
    +------------------------------------+
    | | */* |
    +------------------------------------+
    | | Mozilla/5.0... |
    +------------------------------------+
    | | ... |
    +------------------------------------+
    | :x-requested-with| XMLHttpRequest |
    +------------------------------------+
    Request #1 with HPACK
    Encoded
    with a
    static
    Huffman
    code

    View Slide

  52. +------------------------------------+
    | | |
    +------------------------------------+
    | | |
    +------------------------------------+
    | :host| www.example.com |
    +------------------------------------+
    | | |
    +------------------------------------+
    | :accept| */* |
    +------------------------------------+
    | :user-agent| Mozilla/5.0... |
    +------------------------------------+
    | :cookie| ... |
    +------------------------------------+
    | :x-requested-with| XMLHttpRequest |
    +------------------------------------+
    Request #1 with HPACK
    Saved
    in the
    dynamic
    table

    View Slide

  53. +------------------------------------+
    | :method| GET |
    +------------------------------------+
    | :scheme| https |
    +------------------------------------+
    | :host| www.example.com |
    +------------------------------------+
    | :path| /cat.jpg |
    +------------------------------------+
    | :accept| image/jpeg |
    +------------------------------------+
    | :user-agent| Mozilla/5.0... |
    +------------------------------------+
    | :cookie| ... |
    +------------------------------------+
    | :x-requested-with| XMLHttpRequest |
    +------------------------------------+
    Request #2 with HPACK
    1byte
    1byte
    1byte
    1byte++
    1byte++
    1byte
    1byte
    1byte

    View Slide

  54. ~30-80%
    compression ratio
    of headers with HPACK

    View Slide

  55. 6 connections per origin
    image sprites
    naive concatenation of assets
    inlining of resources

    *

    *
    domain sharding

    View Slide

  56. smart caching
    compress assets
    reduce header bytes
    fine-tuned TCP stack
    use CDNs
    eliminate unnecessary resources






    View Slide

  57. Median loadEvent (ms)
    0
    1250
    2500
    3750
    5000
    RTT (latency)
    0 100 200 300 400 500
    H1 H2
    Impact of latency and HTTP/2 at ft.com
    Chart replicated based on statistics taken from next.ft.com, March 2016

    View Slide

  58. 70%
    30%
    HTTP/2 HTTP/1.1
    Traffic stats Feb 2017 from Mozilla
    40%
    60%
    88%
    12%
    All traffic HTTPS traffic only Top 10M websites

    View Slide

  59. Percentile
    0
    25
    50
    75
    100
    Document complete time (onload) (ms)
    2140 2150 2160 2200 2225 2240 2250 2260 2265 2300 2310 2340 2390 2450
    H1 H2
    Test with 0.0% PLR by fastly
    Browser: Firefox; 5000/1000 KBPS; 40ms latency, 0.0%PLR

    View Slide

  60. Percentile
    0
    25
    50
    75
    100
    Document complete time (onload) (ms)
    2300 2500 2800 2900 3000 3600 5000 5600 5700 7000 8300
    H1 H2
    Test with 2.0% PLR by fastly
    Browser: Firefox; 5000/1000 KBPS; 40ms latency, 2.0%PLR

    View Slide

  61. QUIC
    (experimental transport layer over UDP)

    View Slide

  62. Great book!1
    much wow
    so network
    latency bad :(

    View Slide

  63. Thank you...

    View Slide