[NDC London] HTTP: History & Performance

2a3082799c3df9a58d06bc1b81107752?s=47 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.

2a3082799c3df9a58d06bc1b81107752?s=128

Ana Balica

January 18, 2018
Tweet

Transcript

  1. None
  2. By: @anabalica

  3. None
  4. None
  5. Hypertext Transfer Protocol

  6. Hypermedia Transfer Protocol

  7. HTTP/0.9 (1991)

  8. 㱺 telnet stallman.org 80 Trying xxx.xxx.xx.xxx... Connected to stallman.org. Escape

    character is '^]'. GET / <!DOCTYPE html> <html>...</html> Connection closed by foreign host.
  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?
  10. HTTP/1.0 (RFC 1945, 1996)

  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 < <!DOCTYPE html> <html>...</html> * Closing connection 0
  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
  13. Operating with idealized values Real life networks are messy.

  14. TCP-30ms SYN 0ms SYN ACK 15ms 45ms 35ms response 80ms

    HTTP-65ms close connection 95ms GET / 30ms ACK
  15. twitter.com homepage over HTTP/1.0 21 requests ~2s 1,995ms =>

  16. modern average page over HTTP/1.0 100 requests 9.5s exactly that

    just in ms =>
  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
  18. TCP-30ms 30ms SYN 0ms SYN ACK 15ms ACK ClientHello 45ms

    ServerHello ChangeCipherSpec Finished 60ms ChangeCipherSpec Finished Application data Application data TLS-30ms
  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
  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
  21. HTTP/1.1 (RFC 2068, 1997 & RFC 2616, 1999)

  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
  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
  24. Keepalive connections Better caching mechanism Pipelining Cookies spec Compression, chunked

    responses & byte ranges 24 new status codes
  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 /
  26. 21 requests ~1.5s 1,425ms => Single connection with a TLS

    handshake twitter.com homepage over HTTP/1.1
  27. 100 requests 6.5s => 6,560ms modern average page over HTTP/1.1

    Single connection with a TLS handshake
  28. ~50% increase in speed for secure requests

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

  30. simultaneous connections per domain 6 priority

  31. GET /js 95ms 20ms 110ms JS response 130ms SYN 0ms

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

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

    SYN ACK 15ms ACK 30ms GET /js GET /
  34. from 200B to 2KB averaging to 700-800B HTTP headers no

    compression
  35. // webpack.config.js module.exports = { entry: ['./one.js', './two.js'], output: {

    filename: 'bundle.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin(), ] };
  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; }
  37. HTTP/2 (drafts & RFC 7540, 2015 & ongoing work)

  38. h2

  39. None
  40. None
  41. Binary framing layer Request and response multiplexing Header compression Server

    push Single connection per origin Flow control
  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 ...
  43. Multiplexing

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

    DATA frame HEADERS frame
  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
  46. GET /index.html stream 1 stream 1 Response stream 2 PUSH_PROMISE

    /script.js stream 3 PUSH_PROMISE /style.css 2 3 1
  47. HPACK (RFC 7541, 2015)

  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
  49. +------------------------------------+ | :method| GET | +------------------------------------+ | :scheme| https |

    +------------------------------------+ | :host| www.example.com | +------------------------------------+ | :path| / | +------------------------------------+ | :accept| */* | +------------------------------------+ | :user-agent| Mozilla/5.0... | +------------------------------------+ | :cookie| ... | +------------------------------------+ | :x-requested-with| XMLHttpRequest | +------------------------------------+ Request #1
  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++ +++
  51. +------------------------------------+ | | | +------------------------------------+ | | | +------------------------------------+ |

    | www.example.com | +------------------------------------+ | | | +------------------------------------+ | | */* | +------------------------------------+ | | Mozilla/5.0... | +------------------------------------+ | | ... | +------------------------------------+ | :x-requested-with| XMLHttpRequest | +------------------------------------+ Request #1 with HPACK Encoded with a static Huffman code
  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
  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
  54. ~30-80% compression ratio of headers with HPACK

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

    inlining of resources ✖ * ✖ * domain sharding ✖
  56. smart caching compress assets reduce header bytes fine-tuned TCP stack

    use CDNs eliminate unnecessary resources ✔ ✔ ✔ ✔ ✔ ✔
  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
  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
  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
  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
  61. QUIC (experimental transport layer over UDP)

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

  63. Thank you...