HTTP: History & Performance

HTTP: History & Performance

RenderConf 2017 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

March 30, 2017
Tweet

Transcript

  1. None
  2. By: @anabalica What: Technical presentation Where: Render Conf, Oxford UK

    When: 30 March 2017
  3. None
  4. None
  5. HTTP 418 (RFC 2324) I’m a teapot

  6. iKettle 2.0 • Remote boil your iKettle from anywhere in

    the home. • Water Level sensor shows you exactly how much water is in the iKettle on the App • Make night feeds easier, remotely boil and be notified once the water reaches your desired temperature • Select any temperature between 20-100c to get the best taste from your chosen tea • Wake Up mode and home mode allow you to schedule your kettle at a time to suit you.
  7. Hypertext Transfer Protocol

  8. Hypermedia Transfer Protocol

  9. HTTP/0.9 (1991)

  10. 㱺 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.
  11. 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?
  12. HTTP/1.0 (RFC 1945, 1996)

  13. 㱺 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
  14. 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
  15. Operating with idealized values Real life networks are messy.

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

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

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

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

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

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

    responses & byte ranges 24 new status codes
  27. TCP-30ms GET /js 95ms 20ms 110ms JS response 130ms HTTP

    SYN 0ms SYN ACK 15ms 30ms ACK 45ms 35ms HTML response 80ms GET /
  28. 21 requests ~1.5s 1,425ms => with TLS handshake for first

    connection and TLS session resumption for all consequent requests twitter.com homepage over HTTP/1.1
  29. 100 requests 6.5s => 6,560ms modern average page over HTTP/1.1

    with TLS handshake for first connection and TLS session resumption for all consequent requests
  30. ~50% increase in speed for secure requests

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

  32. simultaneous connections per domain 6 priority

  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. None
  42. Binary framing layer Request and response multiplexing Header compression Server

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

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

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

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

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

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

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

    :host| www.example.com | +------------------------------------+ | | | +------------------------------------+ | :accept| */* | +------------------------------------+ | :user-agent| Mozilla/5.0... | +------------------------------------+ | :cookie| ... | +------------------------------------+ | :x-requested-with| XMLHttpRequest | +------------------------------------+ Request #1 with HPACK Saved in the dynamic table
  54. +------------------------------------+ | :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
  55. ~30-80% compression ratio of headers with HPACK

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

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

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

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

  64. Thank you...