HTTP/2 101 - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

HTTP2 101 Surma @surmair

Slide 3

Slide 3 text

TL;DR: SWITCH! HTTP/2 ≥ HTTP/1

Slide 4

Slide 4 text

TL;DR Performance If you invest, you can squeeze out lots of Δt

Slide 5

Slide 5 text

History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1995 1997 2012 2015

Slide 6

Slide 6 text

HTTP/0.9

Slide 7

Slide 7 text

History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015

Slide 8

Slide 8 text

HTTP/0.9 GET POST HEAD PUT DELETE LINK UNLINK HTTP/1.0

Slide 9

Slide 9 text

History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

HTTP/1.x Best Practices Write it, concatenate it, minify it, inline it, sprite it, shard it, vulcanize it, gzip it Workarounds Hacks

Slide 12

Slide 12 text

Flaw #1 HOL Blocking aka one-resource-at-a-time syndrome

Slide 13

Slide 13 text

http2.golang.org/gophertiles

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

h1 h2

Slide 16

Slide 16 text

Flaw #2 Meta Data GET /index.html User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef … POST /comment User-Agent: Mozilla/5.0… GET /logo.jpg User-Agent: Mozilla/5.0… GET /script.js User-Agent: Mozilla/5.0… Cookie: session_id=deadbeef …

Slide 17

Slide 17 text

Flaw #2 Meta Data 200 OK Set-Cookie: … Content-Type: text/html Content-Encoding: gzip ?

Slide 18

Slide 18 text

History HTTP HTTP/0.9 HTTP/1.0 HTTP/1.1 SPDY/2 HTTP/2 1991 1996 1997 2012 2015

Slide 19

Slide 19 text

Welcome to the glorious era of ✨HTTP/2✨ …but what is it?

Slide 20

Slide 20 text

HTTP/1.1 Upgrade to h2 ✨HTTP/2✨

Slide 21

Slide 21 text

✨HTTP/2✨ TLS encrypted

Slide 22

Slide 22 text

✨HTTP/2✨ Single TCP connection

Slide 23

Slide 23 text

✨HTTP/2✨

Slide 24

Slide 24 text

✨HTTP/2✨ Single TCP connection

Slide 25

Slide 25 text

HTTP/2 Concatenation Inlining Vulcanize Spriting

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

h1 h2

Slide 28

Slide 28 text

h1 h2

Slide 29

Slide 29 text

h2 h1

Slide 30

Slide 30 text

h2 capable h2 enabled h2 unsupported 7,200 ms 5,325 ms 6,160 ms Time to mobile load event Sample is 1 month of data on https://next.ft.com

Slide 31

Slide 31 text

✨HTTP/2✨

Slide 32

Slide 32 text

HPACK Header compression specifically for HTTP

Slide 33

Slide 33 text

✨HPACK✨ Header compression specifically for HTTP glorious

Slide 34

Slide 34 text

✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)

Slide 35

Slide 35 text

✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org … … … GET /index.html Host: www.example.org 2, 5, 35, Huffman(“www.example.org”)

Slide 36

Slide 36 text

✨HPACK✨ 2 :method GET 3 :method POST 5 :path /index.html 8 :status 200 35 Host 61 www-authenticate 62 Host www.example.org 63 … … POST /something Host: www.example.org 3, Huffman(“/something”), 62

Slide 37

Slide 37 text

HPACK Sharding Multiple CDNs

Slide 38

Slide 38 text

But wait theres more… Squeeze out the last bits of performance

Slide 39

Slide 39 text

✨PUSH✨ Can I interest you in some complementary resources to your resources?

Slide 40

Slide 40 text

✨PUSH✨ GET /index.html /index.html /style.css /script.js GET /style.css GET /script.js

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

with push without push Don’t push mindlessly!

Slide 43

Slide 43 text

Still needed GZIP/Deflate First Render CDNs/DNS lookup Cache-Control

Slide 44

Slide 44 text

47% of HTML 36% of CSS 26% of JS are still uncompressed without gzip with gzip bit.ly/uncompressed-resources

Slide 45

Slide 45 text

Now?

Slide 46

Slide 46 text

Now? (browsers)

Slide 47

Slide 47 text

Now? (servers) ✔ ✔ ✔

Slide 48

Slide 48 text

Now? (languages) bit.ly/http2implementations

Slide 49

Slide 49 text

bit.ly/http2implementations

Slide 50

Slide 50 text

Now? github.com/GoogleChrome/simplehttp2server (local dev) HTTP/2 & Push

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Now! Your Production Environment

Slide 54

Slide 54 text

Now! (Tier 1) Put your static assets on a h2 CDN

Slide 55

Slide 55 text

Now! (Tier 1) 8.41s vs 1.84s over 3G

Slide 56

Slide 56 text

Now! (Tier 1) 10% less data 0.15% faster

Slide 57

Slide 57 text

Now! (Tier 2) h2 reverse proxy

Slide 58

Slide 58 text

Now! (Tier 3) h2

Slide 59

Slide 59 text

Future? Manifest for static hosters and CDNs manifest.json

Slide 60

Slide 60 text

{ "index.html": { "/css/app.css": { "type": "style" }, ... }, "page.html": { "/css/page.css": { "type": "style" }, ... } }

Slide 61

Slide 61 text

$ http2-push-manifest -f index.html -f page.html

Slide 62

Slide 62 text

WebSockets – Maybe not a Thing Future?

Slide 63

Slide 63 text

Now? Yes Why? #PerfMatters How? JUST DO IT HTTP/2

Slide 64

Slide 64 text

Thank you! Surma @surmair