Tweet
Tweet

Slide 1

Slide 1 text

@DasSurma Developer Advocate ✨HTTP/2✨ OMG so good

Slide 2

Slide 2 text

TL;DR: SWITCH!

Slide 3

Slide 3 text

HTTP/1.1 – Upgrade – HTTP/2.0 ✨HTTP/2✨

Slide 4

Slide 4 text

caniuse.com

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

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 bit.ly/surma-http2 Talk from CDS 2015

Slide 8

Slide 8 text

Head-of-Line Blocking aka one-resource-at-a-time syndrome

Slide 9

Slide 9 text

HTTP/1

Slide 10

Slide 10 text

HTTP/1

Slide 11

Slide 11 text

HTTP/1 200KB 4s

Slide 12

Slide 12 text

✨HTTP/2✨ Single TCP connection

Slide 13

Slide 13 text

http2.golang.org/gophertiles

Slide 14

Slide 14 text

h1 h2

Slide 15

Slide 15 text

Concatenation Inlining Bundling Spriting ? More later

Slide 16

Slide 16 text

Encryption

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

✨HTTP/2✨ TLS encrypted ? ?

Slide 20

Slide 20 text

✨HTTP/2✨ $0

Slide 21

Slide 21 text

certbot.eff.org

Slide 22

Slide 22 text

CDNs say bit.ly/surma-http2-performance-increase HTTP/2 is 20% faster (on avg)

Slide 23

Slide 23 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 26%

Slide 24

Slide 24 text

HTTP/2 bit.ly/chromeblog-http2

Slide 25

Slide 25 text

But how? Setup? Testing? bit.ly/surma-http2-setup

Slide 26

Slide 26 text

What about local development?

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

What did I not talk about yet?

Slide 30

Slide 30 text

HPACK

Slide 31

Slide 31 text

HTTP/2 Push

Slide 32

Slide 32 text

RTT > Bandwidth

Slide 33

Slide 33 text

index.html styles.css webfont.css webfont.woff @import @font-face 14K 1.4K 800B 12K Back-of-napkin math: Total data: 28.4K Data transfer time: 37ms # of RTTs: 4 Total time: 437ms

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

bit.ly/jake-push

Slide 36

Slide 36 text

bit.ly/jake-push TL;DR: – Massive inconsistencies between browsers – Not pushing things that are already in the cache is a hard problem – Don’t even think about pushing anything but GET

Slide 37

Slide 37 text

bit.ly/jake-push Alternatives – Inlining for first-paint-critical resources – for interactive-critical resources

Slide 38

Slide 38 text

Onemore thing about bundling bit.ly/sergio-bundling

Slide 39

Slide 39 text

TL;DR: SWITCH!

Slide 40

Slide 40 text

@DasSurma Developer Advocate ✨HTTP/2✨ OMG so good