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

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