HTTP 2 and You - Speaker Deck

Slide 1

Slide 1 text

HTTP/2 and You Zack Tollman @tollmanz

Slide 2

Slide 2 text

Latency is the enemy

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Round Trip Time

Slide 5

Slide 5 text

Reduce latency

Slide 6

Slide 6 text

Bandwidth vs. Latency

Slide 7

Slide 7 text

https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

Slide 8

Slide 8 text

https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

Slide 9

Slide 9 text

“…decreasing RTT, regardless of current bandwidth always helps make web browsing faster.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

Slide 10

Slide 10 text

TCP Connection

Slide 11

Slide 11 text

TCP Connection SYN

Slide 12

Slide 12 text

TCP Connection SYN SYN ACK

Slide 13

Slide 13 text

TCP Connection SYN SYN ACK ACK

Slide 14

Slide 14 text

TCP Connection SYN SYN ACK ACK 50ms

Slide 15

Slide 15 text

TCP Connection SYN SYN ACK ACK 50ms 50ms

Slide 16

Slide 16 text

TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms

Slide 17

Slide 17 text

TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms 150ms

Slide 18

Slide 18 text

TCP Connection SYN SYN ACK ACK 50ms 50ms 50ms HTTP

Slide 19

Slide 19 text

HTTPS / TLS

Slide 20

Slide 20 text

HTTPS / TLS SYN ACK SYN

Slide 21

Slide 21 text

HTTPS / TLS SYN ACK SYN ACK / HELLO HELLO

Slide 22

Slide 22 text

HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED

Slide 23

Slide 23 text

HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP

Slide 24

Slide 24 text

HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3

Slide 25

Slide 25 text

HTTPS / TLS SYN ACK SYN ACK / HELLO FINISHED HELLO FINISHED HTTP 1 2 3 100ms 100ms 100ms

Slide 26

Slide 26 text

Connections are costly

Slide 27

Slide 27 text

That’s just a single TCP connection

Slide 28

Slide 28 text

284 assets 2000 ms start render 101 connections 8418 ms latency

Slide 29

Slide 29 text

“To speed up the Internet at large, we should look for more ways to bring down RTT.” — Mike Belshe https://docs.google.com/a/chromium.org/viewer? a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2

Slide 30

Slide 30 text

Latency problems in HTTP/1.1 are critical flaws

Slide 31

Slide 31 text

Serialization: a single asset at a time

Slide 32

Slide 32 text

TCP Connection html html style.css style.css

Slide 33

Slide 33 text

One request, one response

Slide 34

Slide 34 text

Developers are clever

Slide 35

Slide 35 text

Reduce requests with bundling

Slide 36

Slide 36 text

JS/CSS concatenation

Slide 37

Slide 37 text

Image sprites

Slide 38

Slide 38 text

Bypass 6 connections limit per domain

Slide 39

Slide 39 text

images1.cdn.com images2.cdn.com images3.cdn.com Domain sharding

Slide 40

Slide 40 text

Optimize critical rendering path

Slide 41

Slide 41 text

Inline CSS, images, JS

Slide 42

Slide 42 text

“Best Practices”

Slide 43

Slide 43 text

Clever Hacks

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

HTTP/2 reduces latency by fixing the flaws

Slide 46

Slide 46 text

SPDY

Slide 47

Slide 47 text

HTTP/2

Slide 48

Slide 48 text

Multiplexing: one connection per domain

Slide 49

Slide 49 text

No more bundling

Slide 50

Slide 50 text

No more sharding

Slide 51

Slide 51 text

Single domain

Slide 52

Slide 52 text

Server push: one request, many responses

Slide 53

Slide 53 text

TCP Connection html html style.css style.css

Slide 54

Slide 54 text

TCP Connection html html style.css

Slide 55

Slide 55 text

No more inlining

Slide 56

Slide 56 text

Prioritization

Slide 57

Slide 57 text

Important assets received first

Slide 58

Slide 58 text

HTTPS is required

Slide 59

Slide 59 text

“HTTP/2 is (or will be soon) supported by all of the ‘major’ browsers, and if you want them to use it with your Web site, you’ll need to have HTTPS URLs” — Mark Nottingham https://www.mnot.net/blog/2015/06/15/http2_implementation_status

Slide 60

Slide 60 text

Gophertiles https://http2.golang.org/gophertiles

Slide 61

Slide 61 text

HTTP/1.1

Slide 62

Slide 62 text

HTTP/2

Slide 63

Slide 63 text

12s

Slide 64

Slide 64 text

1.7s

Slide 65

Slide 65 text

HTTP/2 is available… today!

Slide 66

Slide 66 text

Firefox 36 Chrome 41 (iOS too!) Opera 28 IE 11 (Windows 10) Edge Safari 8.1 (iOS 9/OSX 10.10)