HTTP: History & Performance

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

By: @anabalica What: Technical presentation Where: Render Conf, Oxford UK When: 30 March 2017

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

HTTP 418 (RFC 2324) I’m a teapot

Slide 6

Slide 6 text

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 notiﬁed 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.

Slide 7

Slide 7 text

Hypertext Transfer Protocol

Slide 8

Slide 8 text

Hypermedia Transfer Protocol

Slide 9

Slide 9 text

HTTP/0.9 (1991)

Slide 10

Slide 10 text

㱺 telnet stallman.org 80 Trying xxx.xxx.xx.xxx... Connected to stallman.org. Escape character is '^]'. GET / ... Connection closed by foreign host.

Slide 11

Slide 11 text

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?

Slide 12

Slide 12 text

HTTP/1.0 (RFC 1945, 1996)

Slide 13

Slide 13 text

㱺 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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Operating with idealized values Real life networks are messy.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

㱺 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

Slide 25

Slide 25 text

㱺 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

~50% increase in speed for secure requests

Slide 31

Slide 31 text

simultaneous connections per domain 6 number can vary per browser

Slide 32

Slide 32 text

simultaneous connections per domain 6 priority

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Multiplexing

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

HPACK (RFC 7541, 2015)

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

~30-80% compression ratio of headers with HPACK

Slide 56

Slide 56 text

6 connections per origin image sprites naive concatenation of assets inlining of resources ✖ * ✖ * domain sharding ✖

Slide 57

Slide 57 text

smart caching compress assets reduce header bytes ﬁne-tuned TCP stack use CDNs eliminate unnecessary resources ✔ ✔ ✔ ✔ ✔ ✔

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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