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. By: @anabalica

    View full-size slide

  2. Hypertext
    Transfer Protocol

    View full-size slide

  3. Hypermedia
    Transfer Protocol

    View full-size slide

  4. HTTP/0.9
    (1991)

    View full-size slide

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

    ...
    Connection closed by foreign host.

    View full-size slide

  6. 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 full-size slide

  7. HTTP/1.0
    (RFC 1945, 1996)

    View full-size slide

  8. 㱺 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 full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. 㱺 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 full-size slide

  20. 㱺 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 full-size slide

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

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. ~50%
    increase in speed
    for secure requests

    View full-size slide

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

    View full-size slide

  27. simultaneous connections
    per domain
    6
    priority

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. .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 full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. Multiplexing

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

  41. HPACK
    (RFC 7541, 2015)

    View full-size slide

  42. 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 full-size slide

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

    View full-size slide

  44. +------------------------------------+
    | :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 full-size slide

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

    View full-size slide

  46. +------------------------------------+
    | | |
    +------------------------------------+
    | | |
    +------------------------------------+
    | :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 full-size slide

  47. +------------------------------------+
    | :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 full-size slide

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

    View full-size slide

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

    *

    *
    domain sharding

    View full-size slide

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






    View full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. QUIC
    (experimental transport layer over UDP)

    View full-size slide

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

    View full-size slide

  57. Thank you...

    View full-size slide